Fujitsu KEAN Stack Development
2017-03-24
Machine-translated — the English original is authoritative.
KEAN – K5, Express, Angular(2), NodeJS
Soy kean (sí, es intencionado) para demostrar cómo utilizar la API de autenticación de K5 IaaS de Fujitsu o OpenStack Keystone. Estoy probando un nuevo formato de vídeo en lugar de un aburrido post de blog, espero que sea más fácil de consumir.
He elegido Angular 2 como framework de desarrollo ya que es muy popular hoy en día – no necesitas saber Angular para poder seguir el vídeo. Es mi primera incursión en el desarrollo front-end web y mentiría si dijera que es fácil – sin embargo, es una barbaridad más fácil ahora con frameworks como Angular de Google, +1.
La aplicación simplemente toma tus credenciales de K5 y realiza una solicitud a Keystone, el punto final de autenticación (identidad) backend de K5, y si estas credenciales son válidas, te presenta tu token de vuelta.
Como los puntos finales de K5 no soportan Cross-Origin-Resource-Sharing (CORS), he proporcionado una solución alternativa detallada en este blog .
Tras ver el vídeo, encontrarás todo el código fuente.
K5_Angular_2_Example_Login
Actualización – 23/03/2017 – Angular 2 y el desafío CORS de K5 resuelto…usando un servidor PROXY CORS ligero
Consulta cors_proxy_service.js para ver la solución.
https://github.com/allthingsclowd/K5_Angular_2_Example_Login
Este repositorio se ha creado para demostrar cómo solucionar los desafíos de autenticación CORS al construir una SPA (Single Page Application) de Angular 2 para la plataforma K5 de Fujitsu.
Desafío
El desafío clave es que Fujitsu K5 actualmente no soporta CORS, lo que resulta en el siguiente error:
“XMLHttpRequest no puede cargar https://identity.uk-1.cloud.global.fujitsu.com/v3/auth/tokens. La respuesta a la solicitud previa no pasa la comprobación de control de acceso: No hay cabecera ‘Access-Control-Allow-Origin’ presente en el recurso solicitado. El origen ‘http://localhost:3000’ por lo tanto no tiene permiso de acceso. La respuesta tuvo un código de estado HTTP 404.”
Cuando intento las sugerencias en este detallado blog sobre CORS – http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/
Obtengo los siguientes errores cuando envío las ‘comprobaciones previas’ –
Solución
Utiliza un servidor proxy CORS para aceptar las solicitudes de tu navegador y reenviarlas como solicitudes del servidor, eludiendo así los problemas de CORS (del navegador).
Instalación
Actualización 23/3/17 – Resuelto utilizando un simple servicio proxy nodejs – ver el módulo npm cors-anywhere
- Instala NodeJS (> v4) y NPM (> v3) desde https://nodejs.org/en/download/, puedes comprobar las versiones que tienes instaladas ejecutando node -v y npm -v desde la línea de comandos.
- 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
Actualización 23/3/17 – La aplicación anterior se ha configurado para utilizar el siguiente servidor proxy
- Abre una nueva ventana de terminal
- npm install cors-anywhere
- cd a la carpeta cors_proxy_server
- node cors_proxy_service.js
Navega a http://localhost:3000
Precaución:
Solo he hackeado el archivo authentication.service.ts y login.component.html para facilitar la solicitud HTTP a K5…hay mucho más que hacer para una SPA completa pero esto debería ser suficiente para que la gente supere los obstáculos iniciales de autenticación…la única restricción ahora es tu imaginación.
ver raw
Angular2_OpenStack.md
alojado con ❤ por GitHub
El código fuente se puede encontrar aquí – https://github.com/allthingsclowd/K5_Angular_2_Example_Login
¡Feliz Apilamiento!
withk5youcan
Originally published on allthingscloud.eu (2017-03-24).