KEAN – K5, Express, Angular(2), NodeJS
I’m kean (yes it’s deliberate) to demonstrate how to use Fujitsu’s K5 IaaS or OpenStack Keystone authentication API. I’m trying a new medium of video rather than just a boring blog post, hopefully it’ll be easier to consume.
I’ve chosen Angular 2 as the development framework as it’s very popular today – you don’t need to know Angular to be able to follow the video. It’s my first foray into web front-end development and I’d be lying if I said it was easy – however it’s a heck of a lot easier now with frameworks like Angular from Google, +1.
The application simply takes your K5 credentials and makes a request to Keystone, the backend K5 authentication (identity) endpoint, and if these credentials are valid it presents your token back to you.
As K5’s endpoints don’t support Cross-Origin-Resource-Sharing (CORS) I’ve provided a workaround detailed in this blog .
Following the video you’ll find all the source code.
Update – 23/03/2017 – Angular 2 and K5 CORS challenge resolved…by using a lightweight CORS PROXY Server
See the cors_proxy_service.js for the solution.
This repo has been put together to demonstrate how to work-around the CORS authentication challenges when building an Angular 2 SPA (Single Page Application) for Fujitsu’s K5 platform.
They key challenge is that Fujitsu K5 does not currently support CORS which results in the following error:
“XMLHttpRequest cannot load https://identity.uk-1.cloud.global.fujitsu.com/v3/auth/tokens. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000‘ is therefore not allowed access. The response had HTTP status code 404.”
When I try the suggestions in this detailed CORS blog – http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/
I get the following errors when I send the ‘preflight checks’ –
Use a CORS proxy server to accept your browser requests and forward them on as server requests thus by-passing the CORS (browser) issues.
Update 23/3/17 – Resolved by using a simple nodejs proxy service – see npm cors-anywhere module
- Install NodeJS (> v4) and NPM (> v3) from https://nodejs.org/en/download/, you can check the versions you have installed by running node -v and npm -v from the command line.
- git clone https://github.com/allthingsclowd/K5_Angular_2_Example_Login
- cd K5_Angular_2_Example_Login
- npm install –save-dev @angular/cli@latest
- npm install
- npm start
Update 23/3/17 – The above application has be configured to use the following proxy server
- Open a new terminal window
- npm install cors-anywhere
- cd to the cors_proxy_server folder
- node cors_proxy_service.js
Navigate to http://localhost:3000
I’ve only hacked the authentication.service.ts file and the login.component.html to facilitate making the HTTP request to K5…there’s a lot more to do for a full SPA but this should be enough to get folks passed the initial authentication hurdles…..the only restriction now is your imagination.
The source code can be found here – https://github.com/allthingsclowd/K5_Angular_2_Example_Login