Implementación

• Cree un grupo de usuarios de Amazon Cognito e integre una aplicación con su grupo de usuarios

  Amazon Cognito ofrece dos mecanismos distintos para la autenticación de usuarios. Puede utilizar los grupos de usuarios de Cognito para añadir funcionalidad de inscripción e inicio de sesión a su aplicación, o bien utilizar los grupos de identidades de Cognito para autenticar a los usuarios a través de proveedores de identidad de redes sociales, como Facebook, Twitter o Amazon, con soluciones de identidad SAML o mediante su propio sistema de identidad. Para este módulo, utilizará un grupo de usuarios como backend para las páginas de registro e inicio de sesión proporcionadas.
  

  1. En la consola de Amazon Cognito, elija Crear grupo de usuarios.
  2. En la página Configurar la experiencia de inicio de sesión, en la sección Opciones de inicio de sesión del grupo de usuarios de Cognito, seleccione Nombre de usuario. Mantenga los valores predeterminados para el resto de la configuración, como los tipos de proveedores, y no seleccione ningún requisito de nombre de usuario. Seleccione Siguiente.
  3. En la página Configurar requisitos de seguridad, mantenga Modo de política de contraseñas como Valores predeterminados de Cognito. Puede elegir configurar la autenticación multifactor (MFA) o elegir Sin MFA y mantener otras configuraciones como predeterminadas. Seleccione Siguiente.
  4. En la página Configurar la experiencia de registro, mantenga todo como predeterminado. Seleccione Siguiente.
  5. En la página Configurar entrega de mensajes, en Proveedor de correo electrónico, confirme que esté seleccionada la opción Enviar correo electrónico con Amazon SES: recomendado. En el campo Dirección de correo electrónico del REMITENTE, seleccione una dirección de correo electrónico que haya verificado con Amazon SES, siguiendo las instrucciones que se indican en Verificación de la identidad de una dirección de correo electrónico de la Guía para desarrolladores de Amazon Simple Email Service.
     Nota: Si no ve la dirección de correo electrónico verificada en el menú desplegable, asegúrese de haber creado una dirección de correo electrónico verificada en la misma región que seleccionó al principio del tutorial. 
  6.  En la página Integre su aplicación, asigne un nombre a su grupo de usuarios: WildRydes. En Cliente de aplicación inicial, asigne al cliente de aplicación el nombre WildRydesWebApp y mantenga las demás configuraciones como predeterminadas.
  7. En la página Revisar y crear, elija Crear grupo de usuarios.
  8. En la página Grupos de usuarios, seleccione el nombre del grupo de usuarios para ver información detallada sobre el grupo de usuarios que creó. Copie el ID del grupo de usuarios en la sección Descripción general del grupo de usuarios y guárdelo en una ubicación segura de su máquina local. 
  9. Seleccione la pestaña Integración de aplicaciones y copie y guarde el ID de cliente en la sección Análisis y clientes de aplicaciones del grupo de usuarios recién creado.
• Actualizar el archivo de configuración del sitio web

  El archivo js/config.js contiene la configuración del ID de grupo de usuarios, el ID de cliente de aplicación y la región. Actualice este archivo con la configuración de la aplicación y el grupo de usuarios que creó en los pasos anteriores y vuelva a cargar el archivo en el bucket.

  1. Desde la máquina local, abra el archivo wildryde-site/js/config.js en el editor de texto que prefiera.
  2. Actualice la sección de Cognito del archivo con los valores correctos para el ID del grupo de usuarios y el ID del cliente de aplicación que guardó en los pasos 8 y 9 de la sección anterior. El valor de userPoolID es el ID del grupo de usuarios de la sección Descripción general del grupo de usuarios y el de userPoolClientID es el ID del cliente de aplicación de la sección Integración de aplicaciones > Clientes de aplicaciones y análisis de Amazon Cognito. 
  3. El valor de la región debe ser el código de la región de AWS en la que creó el grupo de usuarios. Por ejemplo, us-east-1 para la región Norte de Virginia o us-west-2 para la región de Oregón. Si no tiene claro qué código utilizar, puede ver el valor del ARN del grupo en la descripción general del grupo de usuarios. El código de la región es la parte del ARN inmediatamente después de arn:aws:cognito-idp:.

  El archivo config.js actualizado debería tener un aspecto similar al código siguiente. Tenga en cuenta que los valores reales para su archivo serán distintos:
  

  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',
      }
  };

  Code snippet copied

  Copiar

      4. Guarde el archivo modificado.

      5. En la ventana del terminal, agregue, confirme y envíe el archivo al repositorio de Git para que se implemente automáticamente en la consola de Amplify.

  El siguiente bloque de código es un ejemplo de lo que verá en la ventana del terminal:

  $ git add .
  $ git commit -m "new_config"
  $ git push
  

  Code snippet copied

  Copiar
• Validar la implementación
  1. En una ventana del Finder o en el Explorador de archivos de Windows, navegue hasta la carpeta wildrydes-site que copió en su máquina local en el Módulo 1. 
  2. Abra /register.html o seleccione Giddy Up! en la página de inicio (página index.html) del sitio.
  3. Complete el formulario de registro y elija Let's Ryde. Puede utilizar su correo electrónico o especificar uno 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 especificada, la necesitará más adelante. Debería ver una alerta que confirme que el usuario se ha creado.
  4. Confirme su nuevo usuario con uno de los dos métodos siguientes:
     1. Si utilizó una dirección de correo electrónico que usted controla, puede finalizar el proceso de verificación de cuenta si visita /verify.html en el dominio del sitio web e introduce el código de verificación que se le ha enviado por correo electrónico. Tenga en cuenta que el correo electrónico de verificación podría estar en la carpeta de spam. Para las implementaciones reales, se recomienda configurar el grupo de usuarios para utilizar Amazon Simple Email Service a fin de enviar correos electrónicos desde un dominio propio.
     2. Si ha utilizado una dirección de correo electrónico ficticia, debe confirmar manualmente el usuario a través de la consola de Cognito.
        1. En la consola de  Amazon Cognito, seleccione el grupo de usuarios WildRydes.
        2. En la pestaña Usuarios, debería aparecer el usuario correspondiente a la dirección de correo electrónico que envió a través de la página de registro. Elija dicho nombre de usuario para ver la página de detalles correspondiente.
        3. En el menú desplegable Acciones, seleccione Confirmar cuenta para finalizar el proceso de creación de la cuenta.
        4. En la ventana emergente Confirmar cuenta para el usuario, seleccione Confirmar.
  5. 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 correo electrónico y la contraseña que introdujo durante el paso de registro.
  6. Si el proceso se desarrolla correctamente, se le redirigirá a /ride.html. Debería aparecer una notificación de que la API no está configurada.
     Importante: Copie y guarde el token de autenticación para crear el autorizador del grupo de usuarios de Amazon Cognito en el siguiente módulo.