En este módulo creará un grupo de usuarios de Amazon Cognito para administrar las cuentas de los usuarios. Podrá implementar páginas que permiten a los clientes registrarse como un usuario nuevo, verificar su dirección de correo electrónico e iniciar sesión en el sitio.

Serverless_Web_App_LP_assets-03

Cuando los usuarios visiten su sitio web, primero registrarán una nueva cuenta de usuario. A los efectos de este taller, solo necesitan proporcionar una dirección de correo electrónico y contraseña para registrarse. No obstante, puede configurar Amazon Cognito para exigir atributos adicionales en sus propias aplicaciones.

Después de que los usuarios envíen su registro, Amazon Cognito enviará un correo electrónico de confirmación con un código de verificación a la dirección que ofrecen. Para confirmar su cuenta, los usuarios regresarán a su sitio y escribirán su dirección de correo electrónico y el código de verificación que recibieron. También puede confirmar cuentas de usuario a través de la consola de Amazon Cognito si desea utilizar falsas direcciones de correo electrónico para las pruebas.

Después de que los usuarios hayan confirmado la cuenta (ya sea utilizando el proceso de verificación de correo electrónico o una confirmación manual a través de la consola), podrán iniciar sesión. Cuando los usuarios inician sesión, introducen el nombre de usuario (o correo electrónico) y la contraseña. Una función de JavaScript a continuación se comunica con Amazon Cognito, autentica mediante el protocolo Secure Remote Password (SRP) y recibe un conjunto de fichas web JSON (JWT). Los JWT contienen reclamaciones sobre la identidad del usuario y se utilizarán en el siguiente módulo para autenticar frente a la API RESTful que crea con Amazon API Gateway.

Tiempo para completar el módulo: 30 minutos

Los servicios utilizados: Amazon Cognito

Plantilla de CloudFormation: Si desea pasar al siguiente módulo, puede lanzar una de estas plantillas de AWS CloudFormation en la misma región que utilizó en el módulo 1.

Región Plantilla de CloudFormation
EE.UU. Este (Norte de Virginia) Lanzar pila >
EE.UU. Este (Ohio) Lanzar pila >
EE.UU. Oeste (Oregón) Lanzar pila >
UE (Fráncfort) Lanzar pila >
UE (Irlanda) Lanzar pila >
UE (Londres) Lanzar pila >
Asia Pacífico (Tokio) Lanzar pila >
Asia Pacífico (Seúl) Lanzar pila >
Asia Pacífico (Sídney) Lanzar pila >
Asia Pacífico (Mumbai) Lanzar pila >
Serverless_Web_App_LP_assets-17

Instrucciones de lanzamiento de CloudFormation

  1. Elija el enlace anterior Lanzar pila para la región de su elección.

  2. Elija Siguiente en la página Seleccionar plantilla.

  3. Proporcione el nombre del bucket del sitio web del módulo 1 en el campo Website Bucket Name (Nombre del bucket del sitio web) (por ejemplo wildrydes-sunombre) y seleccione Next (Siguiente).

    Nota: Debe especificar el mismo nombre de bucket que utilizó en el módulo anterior. Si proporciona un nombre de bucket que no existe o al cual no tiene acceso de escritura, la pila de CloudFormation fallará durante la creación.

  4. En la página de opciones, deje todos los valores predeterminados y elija Siguiente.

  5. En la página Análisis, marque la casilla para confirmar que CloudFormation creará los recursos de IAM y seleccione Crear.

    Esta plantilla utiliza recursos personalizados para crear un grupo de usuarios de Amazon Cognito y el cliente, así como generar un archivo de configuración con la información necesaria para conectarse a este grupo de usuarios y cargarlo a su bucket de sitio web. La plantilla creará una función que proporciona acceso para crear estos recursos y cargar el archivo de configuración para su bucket.

  6. Espere hasta que la pila wildrydes-webapp-2 alcance el estado CREATE_COMPLETE.

  7. Siga los pasos descritos en el paso 4. Pruebe su implementación, para confirmar que está preparado para continuar con el siguiente módulo.


Siga las instrucciones paso a paso que se detallan a continuación para crear grupos de usuario. Haga clic en cada número de paso para expandir la sección.

  • Paso 1. Crear un grupo de usuarios de Amazon Cognito

    Amazon Cognito ofrece dos mecanismos diferentes para autenticar a los usuarios. Puede utilizar el grupo de usuarios de Cognito para agregar la funcionalidad de registro e inicio de sesión a la aplicación o utilizar los grupos de identidad de Cognito para autenticar a los usuarios a través de proveedores de identidad social, como Facebook, Twitter o Amazon, con soluciones de identidad SAML o a través de su propio sistema de identidad. Para este módulo va a utilizar un grupo de usuarios como backend para el registro y el inicio de sesión en las páginas.


    1. Desde la consola de AWS, haga clic en Servicios a continuación, seleccione Cognito en Servicios móviles.
    2. Elija Administrar sus grupos de usuarios.
    3. Elija Crear un grupo de usuarios
    4. Proporcione un nombre para el conjunto de usuarios como WildRydes y, a continuación, seleccione Analizar configuración predeterminada
    5. En la página de análisis, haga clic en Crear grupo.
    6. Tenga en cuenta el ID de grupo en la página de detalles de grupo del grupo de usuarios que se acaba de crear.
  • Paso 2. Añadir una aplicación a su grupo de usuarios

    En la consola de Amazon Cognito, seleccione el grupo de usuarios y, a continuación, seleccione la sección de los clientes de la aplicación. Añada un nuevo cliente de aplicación y asegúrese de que la opción Generar secreto del cliente no esté seleccionada. Los secretos de cliente no son compatibles con el SDK para JavaScript. Si crea una aplicación con un secreto generado, elimínela y cree una nueva con la configuración adecuada.


    1. En la página Pool Details (Detalles del grupo) de su grupo de usuarios, seleccione App clients (Clientes de la aplicación) en la sección General Settings (Configuración general) ubicada en el lateral izquierdo de la barra de navegación.
    2. Haga clic en Add an app client (Añadir un cliente de aplicación).
    3. Coloque al cliente de aplicaciones un nombre comoWildRydesWebApp.
    4. Desmarque la opción Generar secreto del cliente. Los secretos de cliente no son válidos para su uso con aplicaciones basadas en navegador.
    5. Seleccione Create app client (Crear aplicación de cliente).
    6. Tenga en cuenta el ID de cliente de aplicaciones para la nueva aplicación.
  • Paso 3. Actualizar el archivo config.js en su bucket de sitio web

    El archivo /js/config.js contiene configuraciones para el ID del grupo de usuarios, ID de cliente de aplicación y región. Actualice este archivo con la configuración de la aplicación y el grupo de usuarios que ha creado en los pasos anteriores y cargue el archivo a su bucket.


    1. Descargue el archivo config.js desde el directorio del sitio web del primer módulo en este repositorio al equipo local. Puede encontrar que volviendo al bucket de S3 que ha creado y se dirige a la carpeta con el nombre 'js'.
    2. Abra el archivo descargado utilizando el editor de texto de su elección.
    3. Actualice la sección Cognito con los valores correctos para el grupo de usuarios y aplicación que acaba de crear.
    4. Puede encontrar el valor para userPoolId en la página de detalles Pool (Grupo) de la consola de Amazon Cognito después de seleccionar el grupo de usuarios que creó.
      Puede encontrar el valor para userPoolClientId si selecciona App clients (Clientes de aplicaciones) en la barra de navegación ubicada a la izquierda. Utilice el valor del campo App client id (Identificador de cliente de aplicaciones) para la aplicación que creó en la sección anterior.
      El valor para el campo region (región) debe ser el código de la región de AWS en la que creó el grupo de usuarios. Por ej., us-east-1 para la región Norte de Virginia o us-west-2 para la región Oregón. Si no está seguro de qué código utilizar, puede ver el valor ARN del grupo en la página de detalles del grupo. El código de región es la parte del ARN después de arn:aws:cognito-idp:.
      El archivo actualizado config.js debe ser así. Tenga en cuenta que los valores reales para el archivo será diferente:

    window._config = { cognito: { userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv region: 'us-west-2' // e.g. us-east-2 }, api: { invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod', } };

    1. Guarde el archivo modificado y asegúrese de que el nombre de archivo siga siendo config.js.
    2. Abra la consola de Amazon S3 en https://console.aws.amazon.com/s3/.
    3. Seleccione su bucket de sitio web de Wild Rydes que ha creado en el módulo anterior.
    4. Busque el prefijo js.
    5. Elija Cargar y, a continuación, Añadir archivos.
    6. Busque el directorio en donde haya guardado la versión del archivo config.js localmente modificada, selecciónelo y haga clic en Abrir.
    7. Elija Cargar en la parte izquierda del cuadro de diálogo.

    Nota: En lugar de tener que escribir el código del navegador para administrar el registro, la verificación y los flujos de inicio de sesión, proporcionamos una implementación de trabajo en los recursos que implementó en el primer módulo. El archivo cognito-auth.js contiene el código que administra la UI de eventos e invoca los métodos apropiados SDK de identidad de Amazon Cognito. Para obtener más información sobre SDK, consulte la página de proyectos en GitHub.

  • Paso 4. Pruebe su implementación


    1. Vaya a /register.html debajo del dominio de su sitio web o elija Giddy Up! que se encuentra en la página de inicio de su sitio.
    2. Complete el formulario de registro y elija Let's Ryde (paseemos). Puede utilizar su propio correo electrónico o introduzca un correo electrónico falso. Asegúrese de elegir una contraseña que contenga al menos una letra en mayúsculas, un número y un carácter especial. No olvide la contraseña que ha introducido para más tarde. Debería ver una alerta que confirma que el usuario se ha creado.
    3. Confirme el nuevo usuario mediante el uso de uno de los dos métodos siguientes.
    4. Si utilizó una dirección de email que usted controla, puede finalizar el proceso de verificación de cuenta si se dirige a /verify.html debajo del dominio de su sitio web e introduce el código de verificación que se le envía por email. Tenga en cuenta que el correo electrónico de verificación podría acabar en la carpeta de spam. Para las implementaciones reales le recomendamos que configure el grupo de usuarios para utilizar Amazon Simple Email Service para enviar correos electrónicos de un dominio de su propiedad.
    5. Si ha utilizado una dirección de correo electrónico ficticia, debe confirmar el usuario manualmente a través de la consola de Cognito.
    6. Desde la consola de AWS, haga clic en Servicios, a continuación, seleccione Cognito en Seguridad, identidad y conformidad.
    7. Elija Administrar sus grupos de usuarios
    8. Seleccione el grupo de usuarios WildRydes y haga clic en Users and groups (Usuarios y grupos) en la barra de navegación izquierda.
    9. Debería ver un usuario correspondiente a la dirección de correo electrónico que envió a través de la página de registro. Elija el nombre de usuario para ver la página de detalles del usuario.
    10. Elija Confirmar usuario para finalizar el proceso de creación de la cuenta.
    11. Después de confirmar el usuario nuevo con la página /verify.html o la consola de Cognito, visite /signin.html e inicie sesión con la dirección de email y la contraseña que introdujo durante el paso de registro.
    12. Si el proceso se desarrolla correctamente, debería ser redirigido a /ride.html. Debería ver una notificación de que la API no está configurada.
    successful-login