Configuración de una aplicación de ejemplo de una sola página de React

En este tutorial, creará una aplicación React de una sola página en la que podrá probar el registro, la confirmación y el inicio de sesión de los usuarios. React es una biblioteca basada en JavaScript para aplicaciones web y móviles, que se centra en la interfaz de usuario (UI). Esta aplicación de ejemplo muestra algunas funciones básicas de los grupos de usuarios de Amazon Cognito. Si ya tiene experiencia en el desarrollo de aplicaciones web con React, descargue la aplicación de ejemplo desde GitHub.

La siguiente captura de pantalla es la página de autenticación inicial de la aplicación que va a crear.

El procedimiento de creación de un grupo de usuarios permite configurar un grupo de usuarios que funcione con la aplicación de ejemplo. Puede omitir este paso si dispone de un grupo de usuarios que cumpla los siguientes requisitos:

• Los usuarios pueden iniciar sesión con su dirección de correo electrónico. Opciones de inicio de sesión del grupo de usuarios de Cognito: correo electrónico.

• Los nombres de usuario no distinguen entre mayúsculas y minúsculas. Requisitos de nombre de usuario: la opción Establecer que el nombre de usuario distinga entre mayúsculas y minúsculas no debe estar seleccionada.

• La autenticación multifactor (MFA) no es obligatoria. Cumplimiento de MFA: MFA opcional.

• El grupo de usuarios verifica los atributos para la confirmación del perfil de usuario mediante un mensaje de correo electrónico. Atributos a verificar: Enviar mensaje de correo electrónico, verificar la dirección de correo electrónico.

• El correo electrónico es el único atributo obligatorio. Atributos obligatorios: correo electrónico.

• Los usuarios pueden registrarse ellos mismos en el grupo de usuarios. Autorregistro: la opción Habilitar el registro automático debe estar seleccionada.

• El cliente de aplicación inicial es un cliente público que permite iniciar sesión con un nombre de usuario y una contraseña. Tipo de aplicación: Cliente público, Flujos de autenticación: ALLOW_USER_PASSWORD_AUTH.

Creación de un grupo de usuarios

Creación de un grupo de usuarios nuevo

1. Vaya a la consola de Amazon Cognito. Si se le solicita, escriba sus credenciales de AWS.

2. Pulse el botón Crear grupo de usuarios. Es posible que tenga que seleccionar Grupos de usuarios en el panel de navegación izquierdo para que aparezca esta opción.

3. En la esquina superior derecha de la página, elija Create a User Pool (Crear un grupo de usuarios).

4. En Configurar la experiencia de inicio de sesión, puede elegir los proveedores de identidades (IdP) que utilizará con este grupo de usuarios. Para obtener más información, consulte Agregar inicio de sesión de grupo de usuarios a través de un tercero.

   1. En Proveedores de autenticación, para Tipos de proveedores, asegúrese de que solo esté seleccionado el grupo de usuarios de Cognito.

   2. Para ver las Opciones de inicio de sesión del grupo de usuarios de Cognito, elija Nombre de usuario. No seleccione nada más en Requisitos de nombre de usuario.

   3. Conserve como valor predeterminado todas las demás opciones y luego elija Siguiente.

5. En Configurar requisitos de seguridad, elija la política de contraseñas, los requisitos de autenticación multifactor (MFA) y las opciones de recuperación de cuentas de usuario. Para obtener más información, consulte Uso de las características de seguridad de los grupos de usuarios de Amazon Cognito.

   1. En Política de contraseñas, confirme que el Modo de política de contraseñas esté establecido en Valores predeterminados de Cognito.

   2. En Autenticación multifactor, para Cumplimiento de MFA, elija MFA opcional.

   3. En Métodos de MFA, seleccione Aplicaciones de autenticación y Mensaje SMS.

   4. En Recuperación de cuenta de usuario, confirme que esté seleccionada la opción Habilitar la recuperación automática de cuentas y que el método de entrega de los mensajes de recuperación de la cuenta de usuario esté configurado como Solo correo electrónico.

   5. Conserve como valor predeterminado todas las demás opciones y luego elija Siguiente.

6. En Configurar la experiencia de registro, puede determinar cómo los nuevos usuarios verificarán sus identidades al registrarse como usuario nuevo y qué atributos deben ser obligatorios u opcionales en el flujo de registro de usuarios. Para obtener más información, consulte Administración de usuarios en el grupo de usuarios.

   1. Confirme que esté seleccionada la opción Habilitar el registro automático. Esta configuración permite que cualquier usuario de Internet se registre en su grupo de usuarios. Esta opción está pensada para los fines de la aplicación de ejemplo, pero aplíquela con precaución en los entornos de producción.

   2. En Verificación y confirmación asistidas por Cognito, compruebe que esté seleccionada la casilla de verificación Permitir que Cognito envíe mensajes automáticamente para verificar y confirmar.

   3. Confirme que Atributos a verificar esté definido en Enviar mensaje de correo electrónico, verificar la dirección de correo electrónico.

   4. En Verificación de cambios de atributo, confirme que estén seleccionadas las opciones predeterminadas: la opción Conservar el valor del atributo original cuando hay una actualización pendiente debe estar seleccionada y la opción Valores de atributos activos cuando hay una actualización pendiente debe estar establecida en Dirección de correo electrónico.

   5. En Atributos obligatorios, confirme que Atributos obligatorios basados en selecciones anteriores muestre correo electrónico.

      importante

      Para esta aplicación de ejemplo, el grupo de usuarios no debe establecer phone_number como atributo obligatorio. En caso de que phone_number figure como atributo obligatorio, revise y actualice las opciones que ha elegido anteriormente:

      • MFA opcional, Solo correo electrónico para Método de entrega de mensajes de recuperación de cuentas de usuario

      • Enviar mensaje de correo electrónico, verificar la dirección de correo electrónico para Atributos a verificar

   6. Conserve como valor predeterminado todas las demás opciones y luego elija Siguiente.

7. En Configuración de entrega de mensajes, puede configurar la integración con Amazon Simple Email Service y Amazon Simple Notification Service para enviar mensajes de correo electrónico y SMS a los usuarios para su registro, confirmación de cuenta, MFA y recuperación de cuentas. Para obtener más información, consulte Configuración de correo electrónico para grupos de usuarios de Amazon Cognito y Configuración de mensajes SMS para grupos de usuarios de Amazon Cognito.

   1. En Proveedor de correo electrónico, elija Enviar correo electrónico con Cognito y utilice el remitente de correo electrónico predeterminado que proporciona Amazon Cognito. Esta configuración para poco volumen de correo electrónico es suficiente para probar la aplicación. Puede volver una vez que haya verificado una dirección de correo electrónico con Amazon Simple Email Service (Amazon SES) y haya elegido Enviar correo electrónico con Amazon SES.

   2. Para SMS, seleccione Crear un nuevo rol de IAM e introduzca un nombre de rol de IAM. Esto crea un rol que otorga permisos a Amazon Cognito para enviar mensajes SMS.

   3. Conserve como valor predeterminado todas las demás opciones y luego elija Siguiente.

8. En Integrar su aplicación, asigne un nombre al grupo de usuarios, configure la interfaz de usuario alojada y cree un cliente de aplicación. Para obtener más información, consulte Adición de un cliente de aplicación con la interfaz de usuario alojada. Las aplicaciones de ejemplo no utilizan la interfaz de usuario alojada.

   1. En Nombre del grupo de usuarios, introduzca un Nombre de grupo de usuarios.

   2. No seleccione Usar la interfaz de usuario alojada de Cognito.

   3. En Cliente de aplicación inicial, confirme que Tipo de aplicación esté definido como Cliente público.

   4. En Secreto de cliente, confirme que esté seleccionada la opción No generar un secreto de cliente.

   5. Introduzca un nombre de cliente de aplicación.

   6. Amplíe la configuración avanzada del cliente de la aplicación. Agregue ALLOW_USER_PASSWORD_AUTH a la lista de Flujos de autenticación.

   7. Conserve como valor predeterminado todas las demás opciones y luego elija Siguiente.

9. Revise los opciones de la pantalla Revisar y crear y modifique las selecciones según precise. Cuando la configuración del grupo de usuarios le parezca adecuada, elija Crear grupo de usuarios para continuar.

10. En la página Grupos de usuarios, elija el nuevo grupo de usuarios.

11. En Información general sobre el grupo de usuarios, tome nota de su ID de grupo de usuarios. Proporcionará esta cadena cuando cree la aplicación de ejemplo.

12. Elija la pestaña Integración de aplicaciones y busque la sección Clientes de aplicaciones y análisis. Seleccione el nuevo cliente de aplicación. Tome nota del ID de cliente.

Recursos relacionados

• Grupos de usuarios de Amazon Cognito

• Flujo de autenticación de los grupos de usuarios

• Descripción de los tokens web JSON (JWT) de los grupos de usuarios

Crear una aplicación

Para crear esta aplicación, debe configurar un entorno de desarrollador. Los requisitos del entorno de desarrollador son:

1. Node.js debe estar instalado y actualizado.

2. El administrador de paquetes de nodos (npm) está instalado y actualizado al menos a la versión 10.2.3.

3. Se puede acceder al entorno en el puerto TCP 5173 de un navegador web.

Creación de una aplicación web React de ejemplo

1. Inicie sesión en su entorno de desarrollador y desplácese hasta el directorio principal de su aplicación.

   cd ~/path/to/project/folder/

2. Cree un nuevo servicio de React.

   npm create vite@latest frontend-client -- --template react-ts

3. Clone la carpeta del proyecto cognito-developer-guide-react-example desde del repositorio de ejemplos de código de AWS en GitHub.

   cd ~/some/other/path

   git clone https://github.com/awsdocs/aws-doc-sdk-examples.git

   cp -r ./aws-doc-sdk-examples/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example/frontend-client ~/path/to/project/folder/frontend-client

4. Vaya al directorio src de su proyecto.

   cd ~/path/to/project/folder/frontend-client/src

5. Edite config.json y reemplace los siguientes valores:

   1. Reemplace YOUR_AWS_REGION por un código de Región de AWS. Por ejemplo: us-east-1.

   2. Sustituya YOUR_COGNITO_USER_POOL_ID por el ID del grupo de usuarios que ha designado para las pruebas. Por ejemplo: us-east-1_EXAMPLE. El grupo de usuarios tiene que estar en la Región de AWS que ha introducido en el paso anterior.

   3. Sustituya YOUR_COGNITO_APP_CLIENT_ID por el ID del cliente de aplicación que ha designado para las pruebas. Por ejemplo: 1example23456789. El cliente de aplicación debe estar en el grupo de usuarios del paso anterior.

6. Si quiere acceder a la aplicación de ejemplo desde una IP distinta a localhost, edite package.json y cambie la línea "dev": "vite", a "dev": "vite --host 0.0.0.0",.

7. Instale la aplicación.

   npm install

8. Inicie la aplicación.

   npm run dev

9. Acceda a la aplicación mediante un navegador web en http://localhost:5173 o http://[IP address]:5173.

10. Registre un nuevo usuario con una dirección de correo electrónico válida.

11. Tome el código de confirmación de su mensaje de correo electrónico. Introduzca el código de confirmación en la aplicación.

12. Inicie sesión con su nombre de usuario y contraseña.

Creación de un entorno de desarrollador de React con Amazon Lightsail

Una forma rápida de empezar con esta aplicación es crear un servidor en la nube virtual con Amazon Lightsail.

Con Lightsail, puede crear rápidamente una pequeña instancia de servidor que esté preconfigurada con los requisitos previos para esta aplicación de ejemplo. Puede conectarse mediante SSH a su instancia con un cliente basado en un navegador y conectarse al servidor web desde una dirección IP pública o privada.

Creación de una instancia de Lightsail para esta aplicación de ejemplo

1. Vaya a la consola de Lightsail. Si se le solicita, escriba sus credenciales de AWS.

2. Elija Crear instancia.

3. En Seleccione una plataforma, elija Linux/Unix.

4. En Seleccione un plan, elija Node.js.

5. En Identifique su instancia, asigne un nombre descriptivo al entorno de desarrollo.

6. Elija Crear instancia.

7. Una vez que Lightsail haya creado la instancia, selecciónela y, en la pestaña Conectar, elija Conectarse a través de SSH.

8. Se abre una sesión de SSH en una ventana del navegador. Ejecute node -v y npm -v para confirmar que la instancia se haya aprovisionado con Node.js y la versión npm mínima de 10.2.3.

9. Continúe con la configuración de la aplicación React.