Fujitsu KEAN Stack Development
2017-03-24
Machine-translated — the English original is authoritative.
KEAN – K5, Express, Angular(2), NodeJS
Sono kean (sì, è intenzionale) per dimostrare come utilizzare l’API di autenticazione K5 IaaS di Fujitsu o OpenStack Keystone. Sto sperimentando un nuovo formato video invece del solito noioso post sul blog, sperando che sia più facile da consumare.
Ho scelto Angular 2 come framework di sviluppo poiché è molto popolare oggi – non è necessario conoscere Angular per seguire il video. È la mia prima avventura nello sviluppo front-end web e mentirei se dicessi che è facile – tuttavia è di gran lunga più facile ora con framework come Angular di Google, +1.
L’applicazione prende semplicemente le tue credenziali K5 ed effettua una richiesta a Keystone, l’endpoint di autenticazione (identità) backend K5, e se queste credenziali sono valide, ti restituisce il tuo token.
Poiché gli endpoint di K5 non supportano Cross-Origin-Resource-Sharing (CORS), ho fornito una soluzione alternativa dettagliata in questo blog .
Dopo il video troverai tutto il codice sorgente.
K5_Angular_2_Example_Login
Aggiornamento – 23/03/2017 – Angular 2 e sfida CORS di K5 risolta…utilizzando un server proxy CORS leggero
Vedi cors_proxy_service.js per la soluzione.
https://github.com/allthingsclowd/K5_Angular_2_Example_Login
Questo repository è stato creato per dimostrare come aggirare le sfide di autenticazione CORS durante la creazione di un’Angular 2 SPA (Single Page Application) per la piattaforma K5 di Fujitsu.
Sfida
La sfida principale è che Fujitsu K5 attualmente non supporta CORS, il che comporta il seguente errore:
“XMLHttpRequest non può caricare https://identity.uk-1.cloud.global.fujitsu.com/v3/auth/tokens. La risposta alla richiesta preflight non supera il controllo dei criteri di accesso: l’intestazione ‘Access-Control-Allow-Origin’ non è presente sulla risorsa richiesta. L’origine ‘http://localhost:3000‘ non ha quindi accesso consentito. La risposta ha avuto codice di stato HTTP 404.”
Quando provo i suggerimenti in questo blog dettagliato sul CORS – http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/
Ottengo i seguenti errori quando invio i ‘controlli preflight’ –
Soluzione
Utilizzare un server proxy CORS per accettare le richieste del browser e inoltrarle come richieste del server, aggirando così i problemi CORS (del browser).
Installazione
Aggiornamento 23/3/17 – Risolto utilizzando un semplice servizio proxy nodejs – vedere il modulo npm cors-anywhere
- Installa NodeJS (> v4) e NPM (> v3) da https://nodejs.org/en/download/, puoi verificare le versioni installate eseguendo node -v e npm -v dalla riga di comando.
- 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
Aggiornamento 23/3/17 – L’applicazione sopra è stata configurata per utilizzare il seguente server proxy
- Apri una nuova finestra del terminale
- npm install cors-anywhere
- cd nella cartella cors_proxy_server
- node cors_proxy_service.js
Vai a http://localhost:3000
Attenzione:
Ho modificato solo il file authentication.service.ts e il login.component.html per facilitare l’invio della richiesta HTTP a K5…c’è molto altro da fare per una SPA completa ma questo dovrebbe essere sufficiente per far superare agli utenti gli ostacoli iniziali dell’autenticazione…l’unica restrizione ora è la tua immaginazione.
visualizza raw
Angular2_OpenStack.md
ospitato con ❤ da GitHub
Il codice sorgente può essere trovato qui – https://github.com/allthingsclowd/K5_Angular_2_Example_Login
Happy Stacking!
withk5youcan
Originally published on allthingscloud.eu (2017-03-24).