Cómo utilizar AWS Cognito Hosted UI para el flujo de autorización de código de concesión
Estoy utilizando el Amplify CLI para crear un grupo de usuarios Cognito para mi aplicación web React. Me di cuenta de que el uso de la interfaz de usuario withAuthentication no cumple con mis necesidades, porque no puedo personalizar el formulario de inicio de sesión (por ejemplo, para eliminar el campo de número de teléfono) o proteger solo parte de mi aplicación.
En su lugar, me gustaría utilizar la interfaz de usuario alojada proporcionada por Cognito, pero estoy teniendo dificultades para implementar el flujo de concesión de un código de autorización. ¿Existe una biblioteca de npm fácil de utilizar que me pueda ayudar con esto?
He intentado llamar directamente al punto final /authorize según lo descrito en la documentación, pero obtengo un error de cors al llamar desde localhost. También he intentado utilizar window.location.ref para redirigir a la URL alojada que proporciona un enlace la Consola de Cognito. Esto funciona, pero cuando vuelvo a mi página especificada (siguiendo la devolución de llamada), analizo el código de la cadena de consulta y envío una solicitud POST al punto final /token según lo descrito en la documentación, obtengo un código de estado 400. ¿Hay algo más que deba hacer aquí?
Soy muy nuevo en OAuth, por lo que agradecería cualquier explicación simple o indicación de materiales básicos que un novato pueda entender sería genial.
davy.ai
Solución
Si desea utilizar la IU alojada proporcionada por Cognito para su aplicación web React e implementar el flujo de Authorization Code Grant, puede utilizar la biblioteca
amazon-cognito-auth-js
npm para simplificar el proceso.En primer lugar, instale la biblioteca como dependencia en su proyecto.
Luego, inicialice el objeto
CognitoAuth
con los detalles de su grupo de usuarios y la aplicación de Cognito.Luego, puede utilizar el método
auth.getSession()
para comprobar si el usuario ya está autenticado y obtener sus datos de sesión.Para manejar la devolución de llamada después de que el usuario haya iniciado sesión, puede agregar el siguiente código a la página a la que redirecciona la IU alojada.
Por último, para intercambiar el código de autorización por un token de acceso y un token de actualización, puede utilizar el método
auth.userhandler()
.Asegúrese de configurar la configuración de CORS adecuada en su grupo de usuarios y la aplicación de Cognito de AWS para permitir solicitudes desde su aplicación web React. También puede personalizar el formulario de inicio de sesión de la IU alojada configurando la integración de la aplicación en los ajustes de la consola de Cognito del grupo de usuarios.
Si es principiante en OAuth, puede ser útil revisar la especificación de OAuth 2.0 y comprender los diferentes tipos de concesiones y flujos de autenticación. El blog AWS Mobile también proporciona una buena introducción al uso de Cognito para concesiones de OAuth 2.0.