Fujitsu KEAN Stack Development

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.

 

K5_Angular_2_Example_Login

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.

https://github.com/allthingsclowd/K5_Angular_2_Example_Login

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.

Challenge

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’ –

Solution

Use a CORS proxy server to accept your browser requests and forward them on as server requests thus by-passing the CORS (browser) issues.

Installation

Update 23/3/17 – Resolved by using a simple nodejs proxy service – see npm cors-anywhere module

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

Caution:

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

Happy Stacking!

#withk5youcan

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s