Configura un ejemplo de aplicación React de una sola página

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 JavaScript basada en 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 de la página de autenticación inicial de la aplicación que crearás.

El procedimiento de creación de un grupo de usuarios permite configurar un grupo de usuarios que funciona con la aplicación de ejemplo. Puede omitir este paso si tiene 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: no está seleccionada la opción Hacer que el nombre de usuario distinga mayúsculas de minúsculas.

• No se requiere la autenticación multifactorial (MFA). MFAcumplimiento: opcional MFA.

• Su grupo de usuarios verifica los atributos para la confirmación del perfil de usuario con un mensaje de correo electrónico. Atributos a verificar: envíe un mensaje de correo electrónico, verifique 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 su grupo de usuarios. Registro automático: está seleccionada la opción Habilitar el registro automático.

• El cliente de la 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.

Crear un grupo de usuarios

Crear un nuevo grupo de usuarios

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

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 identidad (IdPs) 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 los 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 ningún requisito de nombre de usuario adicional.

   3. Mantén todas las demás opciones como predeterminadas y selecciona Siguiente.

5. En Configurar los requisitos de seguridad, puede elegir su política de contraseñas, los requisitos de autenticación multifactorial (MFA) y las opciones de recuperación de la cuenta 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. Para la política de contraseñas, confirme que el modo de política de contraseñas esté establecido en los valores predeterminados de Cognito.

   2. En Autenticación multifactorial, para aplicarla, seleccione MFAOpcional. MFA

   3. Para ver MFAlos métodos, selecciona Aplicaciones y SMS mensajes autenticadores.

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

   5. Mantenga todas las demás opciones como predeterminadas y seleccione Siguiente.

6. En Configurar la experiencia de registro, puede determinar cómo verificarán sus identidades los nuevos usuarios cuando se registren como nuevos usuarios y qué atributos deben ser obligatorios u opcionales durante el proceso de registro de los 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 tu grupo de usuarios. Esto está pensado para los fines de la aplicación de ejemplo, pero aplique esta configuración con precaución en los entornos de producción.

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

   3. Confirme que los atributos a verificar estén configurados en Enviar mensaje de correo electrónico, verificar dirección de correo electrónico.

   4. En Verificar los cambios de atributos, confirme que estén seleccionadas las opciones predeterminadas: se selecciona Conservar el valor del atributo original cuando hay una actualización pendiente y los valores de los atributos activos cuando hay una actualización pendiente se establece en Dirección de correo electrónico.

   5. En Atributos obligatorios, confirme que los atributos obligatorios basados en selecciones anteriores muestren el correo electrónico.

      importante

      Para esta aplicación de ejemplo, el grupo de usuarios no debe establecer phone_number como atributo obligatorio. Si se muestra el número de teléfono como atributo obligatorio, revise y actualice las opciones anteriores:

      • Opcional: solo MFA el correo electrónico es el método de entrega de los mensajes de recuperación de cuentas de usuario

      • Envía un mensaje de correo electrónico, verifica la dirección de correo electrónico para que Attributes la verifique

   6. Mantenga todas las demás opciones como predeterminadas y seleccione Siguiente.

7. En Configurar la entrega de mensajes, puede configurar la integración con Amazon Simple Email Service y Amazon Simple Notification Service para enviar correos electrónicos y SMS mensajes a sus usuarios para que se registrenMFA, confirmen y recuperen la cuenta. Para obtener más información, consulte Configuración de correo electrónico para grupos de usuarios de Amazon Cognito y SMSconfiguración de mensajes 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 de bajo volumen de correo electrónico es suficiente para probar la aplicación. Puedes realizar la devolución después de verificar una dirección de correo electrónico con Amazon Simple Email Service (AmazonSES) y seleccionar Enviar correo electrónico con Amazon SES.

   2. Para SMS, selecciona Crear un nuevo IAM rol e introduce un nombre para IAM el rol. Esto crea un rol que otorga permisos a Amazon Cognito para enviar SMS mensajes.

   3. Mantenga todas las demás opciones como predeterminadas y seleccione Siguiente.

8. En Integrate your app, puedes asignar un nombre a tu grupo de usuarios, configurar la interfaz de usuario alojada y crear un cliente de aplicación. Para obtener más información, consulte Agregue un cliente de aplicaciones 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 selecciones Usar la interfaz de usuario alojada en Cognito.

   3. En Cliente de aplicación inicial, confirme que el tipo de aplicación esté configurado como Cliente público.

   4. En Secreto de cliente, confirma 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. Añádalo ALLOW_USER_PASSWORD_AUTH a la lista de flujos de autenticación.

   7. Mantenga todas las demás opciones como predeterminadas y seleccione Siguiente.

9. Revise sus opciones en la pantalla Revisar y crear y modifique las selecciones según sea necesario. Cuando esté satisfecho con la configuración del grupo de usuarios, elija Crear grupo de usuarios para continuar.

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

11. En Descripción general del grupo de usuarios, anote su ID de grupo de usuarios. Proporcionarás esta cadena cuando crees tu aplicación de ejemplo.

12. Elija la pestaña Integración de aplicaciones y busque la sección de análisis y clientes de aplicaciones. Selecciona tu nuevo cliente de aplicaciones. Anote su 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 JSON web de grupos de usuarios (JWTs)

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 está 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 TCP puerto 5173 de un navegador web.

Para crear un ejemplo de aplicación web de React

1. Inicia sesión en tu entorno de desarrollador y navega hasta el directorio principal de tu aplicación.

   cd ~/path/to/project/folder/

2. Crea un nuevo servicio de React.

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

3. Clona la carpeta del cognito-developer-guide-react-example proyecto desde el repositorio AWS de ejemplos de código 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. Navegue hasta el src directorio de su proyecto.

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

5. Edita config.json y reemplaza los siguientes valores:

   1. YOUR_AWS_REGIONSustitúyalos por un Región de AWS código. Por ejemplo: us-east-1.

   2. YOUR_COGNITO_USER_POOL_IDSustitúyalo por el ID del grupo de usuarios que designaste para las pruebas. Por ejemplo: us-east-1_EXAMPLE. El grupo de usuarios debe estar en el Región de AWS que ingresó en el paso anterior.

   3. YOUR_COGNITO_APP_CLIENT_IDSustitúyalo por el ID del cliente de la aplicación que designaste para la prueba. Por ejemplo: 1example23456789. El cliente de la 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 que no sealocalhost, edite package.json y cambie la línea "dev": "vite", a"dev": "vite --host 0.0.0.0",.

7. Instala tu aplicación.

   npm install

8. Inicie la aplicación.

   npm run dev

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

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

11. Recupera el código de confirmación de tu mensaje de correo electrónico. Introduce 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 para desarrolladores de React con Amazon Lightsail

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

Con Lightsail, puede crear rápidamente una pequeña instancia de servidor que venga preconfigurada con los requisitos previos para esta aplicación de ejemplo. Puede acceder 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.

Para crear una instancia de Lightsail para esta aplicación de ejemplo

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

2. Elija Crear instancia.

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

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

5. En Identifique su instancia, asigne un nombre descriptivo a su 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 Conectar mediante. SSH

8. Se abre una SSH sesión en una ventana del navegador. Ejecute node -v y npm -v para confirmar que la instancia se aprovisionó 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.