es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo utilizar AWS Cognito Hosted UI para el flujo de autorización de código de concesión

Cómo utilizar AWS Cognito Hosted UI para el flujo de autorización de código de concesión

29 May, 2023 Programació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.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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.

    npm install amazon-cognito-auth-js --save

    Luego, inicialice el objeto CognitoAuth con los detalles de su grupo de usuarios y la aplicación de Cognito.

    import { CognitoAuth } from 'amazon-cognito-auth-js';

const authData = {
  ClientId: 'su-identificador-de-cliente-de-la-aplicación',
  AppWebDomain: 'su-dominio-de-cognito.auth.us-east-1.amazoncognito.com',
  TokenScopesArray: ['openid', 'email', 'profile'],
  RedirectUriSignIn: 'http://localhost:3000/signin',
  RedirectUriSignOut: 'http://localhost:3000/signout',
  AdvancedSecurityDataCollectionFlag: false,
};

const auth = new CognitoAuth(authData);

    Luego, puede utilizar el método auth.getSession() para comprobar si el usuario ya está autenticado y obtener sus datos de sesión.

    auth.getSession((err, session) => {
  if (err) {
    // Manejar error
  } else if (!session.isValid()) {
    // Usuario no autenticado, redirigir a la página de inicio de sesión de la IU alojada
    auth.awsSignIn();
  } else {
    // Usuario autenticado, continuar con la aplicació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.

    auth.parseCognitoWebResponse(window.location.href);
auth.getSession();

    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().

    auth.userhandler = {
  onSuccess: (result) => {
    // Manejar autenticación exitosa
  },
  onFailure: (err) => {
    // Manejar error de autenticación
  },
};

const code = auth.getUrlParameter('code');
auth.code = code;
auth.getTokens(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.

Comments are closed.