Autentique a los usuarios actuales de la aplicación React mediante Amazon Cognito y Amplify UI AWS

Creado por Daniel Kozhemyako () AWS

Entorno: producción

Tecnologías: aplicaciones web y móviles; seguridad, identidad y cumplimiento; productividad empresarial; análisis

AWSservicios: Amazon Cognito; AWS Amplify; Amazon Connect; consola de administración AWS

Resumen

Este patrón muestra cómo añadir capacidades de autenticación a una aplicación React de frontend existente mediante una biblioteca de AWS Amplify interfaz de usuario y un grupo de usuarios de Amazon Cognito.

El patrón utiliza Amazon Cognito para proporcionar autenticación, autorización y administración de usuarios a la aplicación. También utiliza un componente de Amplify UI, una biblioteca de código abierto que amplía las capacidades del desarrollo de la interfaz de AWS Amplify usuario (UI). El componente de interfaz de usuario de Authenticator administra las sesiones de inicio de sesión y ejecuta el flujo de trabajo conectado a la nube que autentica a los usuarios a través de Amazon Cognito.

Tras implementar este patrón, los usuarios pueden iniciar sesión con cualquiera de las siguientes credenciales:

• Nombre de usuario y contraseña

• Proveedores de identidad social, como Apple, Facebook, Google y Amazon

• Proveedores de identidad empresarial compatibles con SAML 2.0 o con OpenID Connect () OIDC

Nota: Para crear un componente de interfaz de usuario de autenticación personalizado, puede ejecutar el componente de interfaz de usuario de Authenticator en modo headless.

Requisitos previos y limitaciones

Requisitos previos 

• Un activo Cuenta de AWS

• Una aplicación web de React 18.2.0 o posterior

• Node.js y npm 6.14.4 o posterior, instalados

Limitaciones

• Este patrón se aplica únicamente a aplicaciones web React.

• Este patrón emplea un componente de Amplify UI prediseñado. La solución no abarca los pasos necesarios para implementar un componente de interfaz de usuario personalizado.

Versiones de producto

• Amplify UI 6.1.3 o posterior (Gen 1)

• Amplify 6.0.16 o posterior (Gen 1)

Arquitectura

Arquitectura de destino

El siguiente diagrama muestra una arquitectura que usa Amazon Cognito para autenticar a los usuarios de una aplicación web de React.

Herramientas

Servicios de AWS

• Amazon Cognito ofrece autenticación, autorización y administración de usuarios para aplicaciones móviles y web.

Otras herramientas

• Amplify UI es una biblioteca de interfaz de usuario de código abierto que proporciona componentes personalizables que puede conectar a la nube.

• Node.js es un entorno de JavaScript ejecución basado en eventos diseñado para crear aplicaciones de red escalables.

• npm es un registro de software que se ejecuta en un entorno Node.js y se utiliza para compartir o tomar prestados paquetes y administrar la implementación de paquetes privados.

Prácticas recomendadas

Si estás creando una aplicación nueva, te recomendamos que utilices Amplify Gen 2.

Epics

Crear un grupo de usuarios de Amazon Cognito

Tarea	Descripción	Habilidades requeridas
Cree un grupo de usuarios.	Crear un grupo de usuarios de Amazon Cognito. Configure las opciones de inicio de sesión y los requisitos de seguridad del grupo de usuarios para que se adapten a su caso de uso.	Desarrollador de aplicaciones
Agregar un cliente de aplicación.	Configure un cliente de aplicación para un grupo de usuarios. Este cliente es necesario para que la aplicación interactúe con el grupo de usuarios de Amazon Cognito.	Desarrollador de aplicaciones

Integre su grupo de usuarios de Amazon Cognito con el componente de interfaz de usuario de Authenticator

Tarea	Descripción	Habilidades requeridas
Instale las dependencias.	Para instalar los paquetes aws-amplify y @aws-amplify/ui-react, ejecute el comando siguiente desde el directorio raíz de la aplicación: npm i @aws-amplify/ui-react aws-amplify	Desarrollador de aplicaciones
Configure el grupo de usuarios.	Según el siguiente ejemplo, cree un aws-exports.js archivo y guárdelo en la src carpeta. El archivo debe incluir la siguiente información: Región de AWS en el que se encuentra su grupo de usuarios de Amazon Cognito ID de grupo de usuarios de Amazon Cognito ID de cliente de la aplicación // replace the user pool region, id, and app client id details const awsmobile = { "aws_project_region": "put_your_region_here", "aws_cognito_region": "put_your_region_here", "aws_user_pools_id": "put_your_user_pool_id_here", "aws_user_pools_web_client_id": "put_your_user_pool_app_id_here" } export default awsmobile;	Desarrollador de aplicaciones
Importe y configure el servicio Amplify.	En el archivo de punto de entrada de la aplicación (por ejemplo,App.js), importe y aws-exports.js cárguelo introduciendo las siguientes líneas de código: import { Amplify } from 'aws-amplify'; import awsExports from './aws-exports'; Según el siguiente ejemplo, configure el cliente Amplify mediante el aws-exports.js archivo: // Configure Amplify in index file or root file Amplify.configure({ ...awsExports }); Para obtener más información, consulte Configurar las categorías de Amplify en la documentación de Amplify.	Desarrollador de aplicaciones
Agregue el componente de interfaz de usuario de Authenticator.	Para mostrar el componente de interfaz de usuario de Authenticator, añada las siguientes líneas de código al archivo de punto de entrada de la aplicación (App.js): import { Authenticator } from '@aws-amplify/ui-react'; import '@aws-amplify/ui-react/styles.css'; Nota: El fragmento de código de ejemplo importa el componente de Authenticator interfaz de usuario y el archivo styles.css de Amplify UI, que es necesario cuando se utilizan los temas prediseñados del componente. El componente de Authenticator interfaz de usuario proporciona dos valores de retorno: Detalles del usuario Una función que se puede invocar para cerrar la sesión del usuario Vea el siguiente ejemplo de componente: function App() { return ( <Authenticator> {({ signOut, user }) => ( <div> <p>Welcome {user.username}</p> <button onClick={signOut}>Sign out</button> </div> )} </Authenticator> ); } Nota: Para ver un ejemplo de un archivo App.js, consulte la sección de información adicional de este patrón.	Desarrollador de aplicaciones
(Opcional) Recupere la información de la sesión.	Una vez autenticado un usuario, puede recuperar sus datos de sesión del cliente Amplify. Por ejemplo, puedes recuperar el token JSON web (JWT) de la sesión de un usuario para autenticar las solicitudes de su sesión en un servidor. API Consulta el siguiente ejemplo de un encabezado de solicitud que incluye: JWT import { fetchAuthSession } from 'aws-amplify/auth'; (await fetchAuthSession()).tokens?.idToken?.toString();	Desarrollador de aplicaciones

Resolución de problemas

Problema	Solución
Los usuarios nuevos no pueden registrarse en la aplicación.	De la siguiente manera, asegúrese de que su grupo de usuarios de Amazon Cognito esté configurado para permitir que los usuarios se registren ellos mismos para formar parte del grupo de usuarios: Inicie sesión en la AWS Management Console consola de Amazon Cognito y ábrala. En el panel de navegación izquierdo, elija Grupos de usuarios. Elija su grupo de usuario de la lista. En General Settings (Configuración general), elija Policies (Políticas). Seleccione Permitir que los usuarios se registren por sí mismos.
El componente de autenticación dejó de funcionar tras la actualización de la v5 a la v6.	La Auth categoría ha pasado a un enfoque funcional y ha denominado parámetros en Amplify v6. Ahora debe importar el funcional APIs directamente desde la aws-amplify/auth ruta. Para obtener más información, consulte Migrar de la v5 a la v6 en la documentación de Amplify.

Recursos relacionados

• Introducción a Amazon Cognito (sitio web)AWS

• Cree una nueva aplicación de React (documentación de React)

• ¿Qué es Amazon Cognito? (documentación de Amazon Cognito)

• Biblioteca de interfaz de usuario Amplify (documentación de Amplify)

Información adicional

El App.js archivo debe contener el siguiente código:

import './App.css';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
import { fetchAuthSession } from 'aws-amplify/auth';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
Amplify.configure({ ...awsExports });
let token = (await fetchAuthSession()).tokens?.idToken?.toString();
function App() {
  return (
      <Authenticator>
        {({ signOut, user }) => (
            <div>
              <p>Welcome {user.username}</p>
                <p>Your token is: {token}</p>
              <button onClick={signOut}>Sign out</button>
            </div>
        )}
      </Authenticator>
  );
}

export default App;