javascript - headers - cors header ‘access-control-allow-origin’ missing

Autentica la aplicación del lado del cliente a la API REST usando CORS con la estrategia local (5)

Construí este ejemplo usando Node y PassportJS para mostrar cómo autenticar a los usuarios con Facebook o Local Strategy. Ambos lados están en diferentes dominios como describió y requiere CORS habilitado.

GitHub: https://github.com/pablodenadai/Corsnection
Demostración en vivo: http://corsnection-client.herokuapp.com/

El problema:

Sirviendo una API segura a una aplicación del lado del cliente utilizando solo una estrategia de autenticación local.
Las flechas rojas son parte de la brecha de conocimiento.

Contexto:

Es decir --- client.example.com está realizando una POST para api.example.com/login donde, con éxito, client.example.com puede obtener acceso a un servicio GET como api.example.com/secret .

¡Una idea!

Implimentation de OAuth 2.0 con tipo de concesión híbrida frente a API.

¿Por qué híbrido?

No se trataría de un Implicit Grant Flow también conocido como Implicit Grant Flow Client-Side Web Applications Flow ya que no hay una redirección al servidor de la API que también otorga el token de acceso. (es decir) "¿Está bien que Fulano acceda a sus datos?"
No sería un Resource Owner Password Flow porque una ID de cliente y un secreto de cliente se pasan junto con la solicitud, por lo que se supone que la aplicación de cliente está en el servidor.

OK ... ¿Y qué hay de un poco de ambos?

¿Qué sucede si utilizamos un token de CRSF en la carga de la página de la aplicación del lado del cliente y POST con credenciales de usuario también para el punto de autenticación de OAuth 2.0 para intercambiar token de acceso? Debería autenticar cada solicitud posterior con el token de acceso y el token de CRSF después de un inicio de sesión exitoso.

Una buena biblioteca de Node.js OAuth 2.0 que encontré:

https://github.com/ammmir/node-oauth2-provider

¡Ayuadame!

¡No puedo encontrar un ejemplo funcional de una medida de autenticación que resuelva este problema! Señalarme en la dirección correcta?

En última instancia, el objetivo aquí es autenticar demasiado una aplicación del lado del cliente a una API REST utilizando CORS con una estrategia local, es decir, nombre de usuario y contraseña, incluso si la convención anterior no es posible.

Para acomodar Bounty:

Esta es una aplicación del lado del cliente, así que mantengamos la moda.

Estoy buscando un ejemplo de trabajo que use el encabezado Node.js OAuth 2.0 anterior para el servidor API / Auth y un marco de front-end como Angular.js o Backbone.js para realizar solicitudes.

El ejemplo debe coincidir con el contexto descrito anteriormente.

Estoy trabajando en una aplicación con una arquitectura bastante similar, aunque los servicios son .NET Web API en lugar de Node y estamos usando DotNetOpenAuth para el proveedor de OAuth. En lugar del enfoque híbrido, sugiere que hagamos lo siguiente:

x.com muestra una página de inicio de sesión
POSTs de la página de inicio de sesión devuelven las credenciales a x.com
la lógica del lado del servidor en x.com combina client_id y client_secret con las credenciales para enviar una solicitud de token (las credenciales de contraseña del dueño del recurso se otorgan que mencionaste anteriormente) recibiendo de nuevo un token de acceso temporal y un token de actualización
el token de actualización se cifra en una cookie emitida por x.com
tanto la cookie (con el token de actualización encriptado) como el token de acceso temporal se envían al navegador
la aplicación cliente (angular en mi caso) ahora puede usar el token de acceso para presionar api.x.com por los servicios (Parece que usted está al tanto de las limitaciones de CORS ... pirateamos una versión de $resource de angular para facilitar esto, pero no era bonito, ya que queríamos usar todos los verbos HTTP y admitir IE9)
cuando el token de acceso caduca, la aplicación del lado del cliente puede solicitar un nuevo token de acceso desde x.com
del lado del servidor, x.com descifra la cookie para obtener el token de actualización y emite otra llamada oauth para un nuevo token de acceso

Este es un nivel bastante alto, pero es de esperar que te dé una idea de cómo abordar tu situación. En mi caso, y aparece en el tuyo, no queríamos usar el estado de la sesión o una base de datos para almacenar el token de actualización, pero obviamente exponer eso al navegador presenta problemas de seguridad, por lo que el cifrado del token de actualización es importante (entre otras cosas) consideraciones) y el uso de la cookie elimina la necesidad de un estado de sesión u otro almacenamiento persistente en x.com.

No es una respuesta para el premio. Solo mis 2 centavos :)

En mi servidor web,

Realizo mi autenticación a través de una llamada de reposo con inicio de sesión / contraseña con autenticación básica sobre https. Esta llamada entrega una clave para el cliente (una aplicación web de una página).

Luego, cada llamada REST posterior se firma con la tecla. El servidor verifica que la firma sea correcta y todo sigue ocurriendo en https.

Este mecanismo es bastante usado, creo.

No veo el problema con el dominio cruzado. Tengo una única fuente y si necesito algo de otra fuente, usaría JSONP.

Yo uso nginx como un promotor https-> http.

No estoy seguro de cómo compite con una solución OAuth2.

No puedo prometer que tengo tiempo para escribir un ejemplo de trabajo, pero puedo mostrarte 2 caminos :)

El mayor acuerdo es CORS. Después de resolver ese problema, es fácil usar el servicio $http . Por lo tanto, primero y probablemente el más fácil sea configurar el proxy inverso en el servidor web x.com, que apunta a api.x.com. Escribí el artículo here

El segundo enfoque es mejor, y creado exactamente para este propósito, para autorizar un dominio específico para usar su recurso. Implica un poco de codificación en api.x.com para que no tenga que cambiar nada en las nuevas aplicaciones web servidas en otros dominios. Simplemente necesita autorizar las solicitudes CORS en el servicio api.x.com.

Cree una tabla en la base de datos donde puede administrar la lista de dominios autorizados
Agregue en esa tabla el registro "x.com"
en api.x.com agregar filtro / interceptor de solicitud que sea el término técnico que use para el método que debe invocarse una vez que se maneja la solicitud y agregar en respuesta Access-Control-Allow-Origin: x.com si la solicitud proviene de x.com ( en otras palabras, marque en el encabezado de solicitud, refiera la coincidencia de valor a cualquier valor en la tabla anterior y ponga ese valor en el encabezado de respuesta de Control de acceso-Permitir).

Eso es todo :) Después de esto, si sabes cómo usar $http o jQuey.ajax , podrás POST / PUT / DELETE / ... cualquier solicitud a api.x.com desde cualquier dominio autorizado en solo unos minutos.

Tengo una idea muy similar al utilizar la aplicación web vinilla js y la autenticación de dominio cruzado para el backend GAE o la conexión OpenID.

La aplicación web se ejecuta en CDN. Cuando haga clic en el enlace de inicio de sesión, irá al servidor de inicio de sesión respectivo y lo redireccionará a la aplicación web (con token de seguridad XSRF y solo con la cookie HTTPS). El servidor de inicio de sesión acepta solicitud de dominio cruzado con credenciales . El token XSRF tiene que ser configurado (en el encabezado) con cada solicitud. cookie es establecida por el navegador. Como es solo una cookie HTTP, JS no puede leerla. La técnica es muy segura.

Una vez que inicie sesión, puede obtener una evaluación segura del servidor de inicio de sesión.

Para obtener una descripción detallada, here puede encontrar repo código abierto.