cognito aws auth amplify admincreateuser javascript amazon-web-services amazon-s3 amazon-cognito aws-cognito

javascript - aws - Cognito alojó la interfaz de usuario



He estado buscando configurar un inicio de sesión para una aplicación web que permita a los clientes ver datos alojados en S3 y descubrí que AWS Cognito tiene una IU web alojada [link] que maneja la mayor parte del flujo de autenticación. El problema al que me enfrento es No puedo encontrar información sobre cómo integrar la salida de la interfaz de usuario web en mi aplicación. La mayoría de la documentación existente en Cognito solo hace referencia a cómo usar las distintas API para crear su propia interfaz de usuario, lo que me deja con confusas respuestas a mi problema.

¿Hay alguna información que se haya creado teniendo en cuenta la interfaz de usuario alojada de Cognito?

Amazon dice que puedes integrar el inicio de sesión autenticado con Cognito en minutos, pero lo he estado viendo durante algunas semanas y no puedo resolverlo.


También luché con esto; Estoy de acuerdo en que la documentación es un poco ligera.

El enlace que proporcionó muestra el aspecto de la URL de la interfaz de usuario de Cognito

https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url>

La idea es que usted envíe a su usuario a este URI, ellos hagan su trabajo y luego se redirigen a usted con algún tipo de token (s) o código. Puedes verificar tu dominio haciendo clic en "Nombre de dominio" en la barra de navegación izquierda.

Configuración del cliente de la aplicación y tipos de concesión de OAuth

Primero, revisa la configuración de tu aplicación cliente. Deberá incluir en la lista blanca sus URL de devolución de llamada (a las que Cognito redireccionará) y asegurarse de que se permita al menos un flujo OAuth.

Configuración de cliente de la aplicación Cognito

La "concesión del código de autorización" devolverá un código de autorización, que luego enviará al punto final oauth2/token para obtener un access_token, id_token y refresh_token. Esta es una buena opción si tiene una aplicación de back-end y desea actualizar tokens.

"Subvención implícita" es lo que estoy usando en mi aplicación de front-end. Devolverá un token de acceso y un token de identificación directamente a mi aplicación de front-end.

Para usar la concesión implícita, cambie response_type=code a response_type=token en su URL de Cognito UI.

Ejemplo de subvención implícita

Entonces, si su redireccionamiento después de una autenticación exitosa se ve así:

https://localhost:3000/#access_token=eyJraWQiOiJG...&id_token=eyJraWQZNg....&token_type=Bearer&expires_in=3600

Solo debe quitar el id_token de la URL y enviarlo a Cognito, con su grupo de usuarios como la clave en el mapa de inicio de sesión. En Javascript:

AWS.config.credentials = new AWS.CognitoIdentityCredentials({ IdentityPoolId: ''us-east-1:bxxxxxx6-cxxx-4xxx-8xxx-xxxxxxxxxx3c'', Logins: { ''cognito-idp.us-east-1.amazonaws.com/us-east-1_ixxxxxxx'': idToken } });

Donde idToken es el token de identificación que regresó a ti en la redirección.

Código de autorización Tipo de concesión

Si en su lugar usa el tipo de concesión de código de autorización (response_type = código), su back-end tendrá que llamar al punto final /oauth2/token para intercambiar el código por tokens. Esa llamada se vería algo así:

curl -X POST / https://<my-cognito-domain>.auth.us-east-1.amazoncognito.com/oauth2/token / -H ''content-type: application/x-www-form-urlencoded'' / -d ''grant_type=authorization_code&scope=email%20openid%20profile&redirect_uri=https%3A%2F%2Flocalhost%3A3000%2F&client_id=15xxxxxxxxxxxxxx810&code=54826355-b36e-4c8e-897c-d53d37869ee2''

Luego puedes darle este token de identificación a Cognito como se indica arriba.

Notas de la interfaz de usuario

Mi aplicación está abriendo la interfaz de usuario de Cognito en una nueva pestaña cuando el usuario hace clic en un enlace. Cuando el redireccionamiento vuelve a mi aplicación, uso postMessage() para enviar los tokens a la ventana principal, que luego cierra la nueva pestaña. Creo que este es un patrón relativamente común.

No lo he intentado, pero supongo que la deshabilitación de la interfaz de usuario en un iframe no está permitida, como una mitigación contra el click-jacking. Source

Espero que esto sea al menos algo útil. ¡Buena suerte!