Fujitsu KEAN Stack Development

2017-03-24

Machine-translated — the English original is authoritative.

KEAN – K5, Express, Angular(2), NodeJS

Je suis kean (oui, c’est intentionnel) pour démontrer comment utiliser l’API d’authentification K5 IaaS de Fujitsu ou OpenStack Keystone. J’essaie un nouveau support vidéo plutôt qu’un simple article de blog ennuyeux, j’espère que ce sera plus facile à consommer.

J’ai choisi Angular 2 comme framework de développement car il est très populaire aujourd’hui – vous n’avez pas besoin de connaître Angular pour suivre la vidéo. C’est ma première incursion dans le développement front-end web et je mentirais si je disais que c’était facile – cependant, c’est maintenant beaucoup plus facile avec des frameworks comme Angular de Google, +1.

L’application prend simplement vos identifiants K5 et effectue une requête vers Keystone, le point de terminaison d’authentification (identité) backend K5, et si ces identifiants sont valides, elle vous présente votre jeton.

Comme les points de terminaison de K5 ne prennent pas en charge le partage de ressources entre origines croisées (CORS), j’ai fourni une solution de contournement détaillée dans ce blog .

Après la vidéo, vous trouverez tout le code source.

Contenu intégré

K5_Angular_2_Example_Login

Mise à jour – 23/03/2017 – Angular 2 et défi CORS de K5 résolu…en utilisant un serveur proxy CORS léger

Voyez le cors_proxy_service.js pour la solution.

https://github.com/allthingsclowd/K5_Angular_2_Example_Login

Ce dépôt a été mis en place pour démontrer comment contourner les défis d’authentification CORS lors de la construction d’une SPA (Single Page Application) Angular 2 pour la plateforme K5 de Fujitsu.

Défi

Le défi principal est que Fujitsu K5 ne prend actuellement pas en charge CORS, ce qui entraîne l’erreur suivante :

« XMLHttpRequest ne peut pas charger https://identity.uk-1.cloud.global.fujitsu.com/v3/auth/tokens. La réponse à la demande préalable ne passe pas le contrôle de contrôle d’accès : aucun en-tête « Access-Control-Allow-Origin » n’est présent sur la ressource demandée. L’origine « http://localhost:3000 » n’est donc pas autorisée à accéder. La réponse avait un code d’état HTTP 404. »

Lorsque j’essaie les suggestions dans ce blog détaillé sur CORS – http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/
J’obtiens les erreurs suivantes lorsque j’envoie les « vérifications préalables » –

Solution

Utilisez un serveur proxy CORS pour accepter vos requêtes de navigateur et les transmettre en tant que requêtes serveur, contournant ainsi les problèmes CORS (navigateur).

Installation

Mise à jour 23/3/17 – Résolu en utilisant un simple service proxy nodejs – voir le module npm cors-anywhere

• Installez NodeJS (> v4) et NPM (> v3) depuis https://nodejs.org/en/download/, vous pouvez vérifier les versions que vous avez installées en exécutant node -v et npm -v depuis la ligne de commande.
• 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

Mise à jour 23/3/17 – L’application ci-dessus a été configurée pour utiliser le serveur proxy suivant

• Ouvrez une nouvelle fenêtre de terminal
• npm install cors-anywhere
• cd dans le dossier cors_proxy_server
• node cors_proxy_service.js

Accédez à http://localhost:3000

Attention :

J’ai seulement bidouillé le fichier authentication.service.ts et le login.component.html pour faciliter la requête HTTP vers K5…il y a beaucoup plus à faire pour une SPA complète mais cela devrait suffire à faire passer aux gens les obstacles initiaux d’authentification…la seule restriction maintenant est votre imagination.

voir brut
Angular2_OpenStack.md
hébergé avec ❤ par GitHub

Le code source peut être trouvé ici – https://github.com/allthingsclowd/K5_Angular_2_Example_Login

Empilage heureux !

withk5youcan

Originally published on allthingscloud.eu (2017-03-24).