Otras opciones de aplicación - Amazon Cognito
Ejemplo de SPA de ReactEjemplo de aplicación móvil de Flutter

Otras opciones de aplicación

Es posible que ya tenga una interfaz de usuario de aplicación existente que desee integrar con la autenticación de Amazon Cognito. Es posible que incluso tenga sus propias páginas de autenticación existentes con una configuración de directorio menos funcional que la de los grupos de usuarios de Amazon Cognito. Puede añadir o sustituir un componente de autenticación a una aplicación de este tipo con las integraciones de Amazon Cognito en AWS SDK para diversos lenguajes de programación. A continuación se muestran algunos ejemplos.

Si crea un grupo de usuarios para este fin en la consola de Amazon Cognito, puede que no sea necesario tener un dominio de grupo de usuarios que aloje páginas de inicio de sesión interactivas y servicios de OpenID Connect (OIDC). El proceso de creación del grupo de usuarios en la consola genera automáticamente un dominio para usted. Puede eliminar este dominio desde la pestaña Dominio de su grupo de usuarios. Otras opciones incluyen la creación programática de los recursos de Amazon Cognito para su aplicación con solicitudes de API en AWS SDK y con las opciones de configuración automática en la CLI de AWS Amplify. Para obtener más información, consulte Integración de la autenticación y la autorización de Amazon Cognito con aplicaciones web y móviles.

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.

Captura de pantalla de la página de registro de una aplicación de ejemplo web basada en React.

Para configurar esta aplicación, su grupo de usuarios debe cumplir 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.

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/

  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.

Configuración de una aplicación de ejemplo Android con Flutter

En este tutorial, creará una aplicación móvil en Android Studio en la que podrá emular un dispositivo y probar el registro, la confirmación y el inicio de sesión de los usuarios. Esta aplicación de ejemplo crea un cliente móvil básico de grupos de usuarios de Amazon Cognito para Android en Flutter. Si ya tiene experiencia en el desarrollo de aplicaciones para móviles con Flutter, descargue la aplicación de ejemplo desde GitHub.

La siguiente captura de pantalla muestra la ejecución de la aplicación en un dispositivo Android virtual.

Captura de pantalla de la página de registro de una aplicación de ejemplo de Android virtualizada.

Para configurar esta aplicación, su grupo de usuarios debe cumplir 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.

Crear una aplicación

Creación de un ejemplo de aplicación de Android

  1. Instale Android Studio y herramientas de línea de comandos.

  2. En Android Studio, instale el complemento Flutter.

  3. Cree un nuevo proyecto de Android Studio a partir del contenido del directorio cognito_flutter_mobile_app en esta aplicación de ejemplo.

    1. Edite assets/config.json y reemplace <<YOUR USER POOL ID>> y << YOUR CLIENT ID>> por los ID del grupo de usuarios y del cliente de aplicación.

  4. Instale Flutter.

    1. Agregue Flutter a la variable PATH.

    2. Acepte licencias con el siguiente comando.

      flutter doctor --android-licenses

    3. Verifique el entorno de Flutter e instale los componentes que falten.

      flutter doctor

      1. Si falta algún componente, ejecute flutter doctor -v para saber cómo solucionar el problema.

    4. Cambie al directorio del nuevo proyecto de Flutter e instale las dependencias.

      1. Ejecuta flutter pub add amazon_cognito_identity_dart_2.

    5. Ejecuta flutter pub add flutter_secure_storage.

  5. Cree un dispositivo Android virtual.

    1. En la GUI de Android Studio, cree un nuevo dispositivo con el administrador de dispositivos.

    2. En la CLI, ejecute flutter emulators --create --name android-device.

  6. Inicie el dispositivo Android virtual.

    1. En la GUI de Android Studio, seleccione el icono Play button icon with a blue triangle pointing to the right. de inicio situado junto al dispositivo virtual.

    2. En la CLI, ejecute flutter emulators --launch android-device.

  7. Inicie la aplicación en el dispositivo virtual.

    1. En la GUI de Android Studio, selecciona el icono Green play button icon representing a start or play action. de implementación.

    2. En la CLI, ejecute flutter run.

  8. Diríjase a su dispositivo virtual que se está ejecutando en Android Studio.

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

  10. 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.

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