Fujitsu KEAN Stack-Entwicklung
2017-03-24
Machine-translated — the English original is authoritative.
KEAN – K5, Express, Angular(2), NodeJS
Ich bin kean (ja, das ist absichtlich), um zu demonstrieren, wie man Fujitsus K5 IaaS oder die OpenStack Keystone-Authentifizierungs-API verwendet. Ich probiere ein neues Medium aus, nämlich Video, anstatt nur einen langweiligen Blogbeitrag zu schreiben. Hoffentlich ist es so einfacher zu konsumieren.
Ich habe Angular 2 als Entwicklungs-Framework gewählt, da es heute sehr beliebt ist – Sie müssen Angular nicht kennen, um dem Video folgen zu können. Es ist mein erster Ausflug in die Web-Frontend-Entwicklung, und ich würde lügen, wenn ich sagen würde, dass es einfach ist – jedoch ist es mit Frameworks wie Angular von Google jetzt ein ganzes Stück einfacher, +1.
Die Anwendung nimmt einfach Ihre K5-Anmeldeinformationen und sendet eine Anfrage an Keystone, den Backend-K5-Authentifizierungs- (Identitäts-) Endpunkt, und wenn diese Anmeldeinformationen gültig sind, stellt sie Ihnen Ihren Token zur Verfügung.
Da K5-Endpunkte Cross-Origin-Resource-Sharing (CORS) nicht unterstützen, habe ich einen in diesem Blog detaillierten Workaround bereitgestellt.
Nachdem Sie das Video gesehen haben, finden Sie den gesamten Quellcode.
K5_Angular_2_Example_Login
Aktualisierung – 23.03.2017 – Angular 2 und K5 CORS-Herausforderung gelöst…durch Verwendung eines leichtgewichtigen CORS-PROXY-Servers
Sehen Sie sich cors_proxy_service.js für die Lösung an.
https://github.com/allthingsclowd/K5_Angular_2_Example_Login
Dieses Repository wurde zusammengestellt, um zu demonstrieren, wie man die CORS-Authentifizierungsherausforderungen beim Erstellen einer Angular 2 SPA (Single Page Application) für Fujitsus K5-Plattform umgeht.
Herausforderung
Die Hauptschwierigkeit besteht darin, dass Fujitsu K5 derzeit CORS nicht unterstützt, was zu folgendem Fehler führt:
„XMLHttpRequest kann https://identity.uk-1.cloud.global.fujitsu.com/v3/auth/tokens nicht laden. Die Antwort auf die Preflight-Anfrage besteht die Zugriffskontrollprüfung nicht: Es ist kein Header ‚Access-Control-Allow-Origin‘ auf der angeforderten Ressource vorhanden. Die Herkunft ‚http://localhost:3000‘ hat daher keinen Zugriff. Die Antwort hatte den HTTP-Statuscode 404.“
Wenn ich die Vorschläge in diesem detaillierten CORS-Blog versuche – http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/
Erhalte ich die folgenden Fehler, wenn ich die ‚Preflight-Prüfungen‘ sende –
Lösung
Verwenden Sie einen CORS-Proxy-Server, um Ihre Browseranfragen anzunehmen und sie als Serveranfragen weiterzuleiten, wodurch die CORS (Browser-) Probleme umgangen werden.
Installation
Aktualisierung 23.3.17 – Gelöst durch Verwendung eines einfachen NodeJS-Proxy-Dienstes – siehe npm cors-anywhere-Modul
- Installieren Sie NodeJS (> v4) und NPM (> v3) von https://nodejs.org/en/download/. Sie können die installierten Versionen überprüfen, indem Sie node -v und npm -v in der Befehlszeile ausführen.
- 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
Aktualisierung 23.3.17 – Die obige Anwendung wurde so konfiguriert, dass sie den folgenden Proxy-Server verwendet
- Öffnen Sie ein neues Terminalfenster
- npm install cors-anywhere
- Wechseln Sie in den Ordner cors_proxy_server
- node cors_proxy_service.js
Rufen Sie http://localhost:3000 auf
Vorsicht:
Ich habe nur die Datei authentication.service.ts und die login.component.html gehackt, um die HTTP-Anfrage an K5 zu ermöglichen…für eine vollständige SPA gibt es noch viel zu tun, aber dies sollte ausreichen, um die Leute über die ersten Authentifizierungshürden zu bringen…die einzige Einschränkung ist jetzt Ihre Vorstellungskraft.
Rohansicht
Angular2_OpenStack.md
Gehostet mit ❤ von GitHub
Der Quellcode ist hier zu finden – https://github.com/allthingsclowd/K5_Angular_2_Example_Login
Viel Spaß beim Stapeln!
withk5youcan
Originally published on allthingscloud.eu (2017-03-24).