Introducción a AWS
Cree una aplicación React
Cree una aplicación Web simple con AWS Amplify
Módulo 3: Agregar autenticación
En este módulo usará las CLI y bibliotecas de Amplify para configurar y agregar autenticación a su aplicación.
Introducción
La siguiente función que agregará es la autenticación. En este módulo, aprenderá cómo autenticar un usuario con CLI y bibliotecas de Amplify, aprovechando Amazon Cognito, un servicio de identidad de usuarios administrado.
También aprenderá a usar la biblioteca de componentes de IU de Amplify para crear un armazón en un flujo completo de autenticación de usuarios, lo que permite a los usuarios registrarse, iniciar sesión y restablecer su contraseña con solo algunas líneas de código.
Lo que aprenderá
- Instalar bibliotecas de Amplify
- Crear e implementar un servicio de autenticación
- Configurar su aplicación React para incluir la autenticación
Conceptos clave
Bibliotecas de Amplify: las bibliotecas de Amplify le permiten interactuar con los servicios de AWS desde una aplicación web o móvil.
Autenticación: en software, la autenticación es el proceso de verificar y administrar la identidad de un usuario mediante un servicio de autenticación o API.
Tiempo de realización
10 minutos
Servicios utilizados
Implementación
-
Instalar bibliotecas de Amplify
Necesitaremos 2 bibliotecas Amplify para nuestro proyecto. La biblioteca aws-amplify principal contiene todas las API del lado del cliente para interactuar con los diferentes servicios de AWS con los que trabajaremos y la biblioteca @aws-amplify/ui-react contiene componentes de IU específicas para el marco. Instale estas bibliotecas en la raíz del proyecto.
npm install aws-amplify @aws-amplify/ui-react
-
Cree el servicio de autenticación
Para crear el servicio de autenticación, use la CLI de Amplify:
amplify add auth ? Do you want to use the default authentication and security configuration? Default configuration ? How do you want users to be able to sign in? Username ? Do you want to configure advanced settings? No, I am done.
-
Implemente el servicio de autenticación
Ahora que se ha configurado el servicio de autenticación en forma local, podemos implementarlo ejecutando el comando de envío de Amplify:
amplify push --y
-
Configure el proyecto React con recursos de Amplify
La CLI ha creado y seguirá actualizando un archivo denominado aws-exports.js que se encuentra en el directorio src de nuestro proyecto. Usaremos este archivo para permitir que el proyecto React conozca los diferentes recursos de AWS que están disponibles en nuestros proyecto de Amplify.
Para configurar nuestra aplicación con estos recursos, abra src/index.js y agregue el siguiente código debajo de la última importación:
import Amplify from 'aws-amplify'; import config from './aws-exports'; Amplify.configure(config);
-
Agregue el flujo de autenticación en App.js
Luego, abra src/App.js y actualice el siguiente código:
import React from 'react'; import logo from './logo.svg'; import './App.css'; import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react' function App() { return ( <div className="App"> <header> <img src={logo} className="App-logo" alt="logo" /> <h1>We now have Auth!</h1> </header> <AmplifySignOut /> </div> ); } export default withAuthenticator(App);
En este componente hemos utilizando el componente withAuthenticator. Este componente armará un andamio de un flujo completo de autenticación de usuarios lo que permitirá que los usuarios se registren, inicien sesión, restablezcan su contraseña y confirmen el inicio de sesión para lograr una autenticación de múltiples factores (MFA). También hemos utilizado el componente AmplifySignOut que mostrará un botón de Cierre de sesión.
-
Ejecute la aplicación en forma local
Luego, ejecute la aplicación para ver el nuevo flujo de autenticación que protege a la aplicación:
npm start
Aquí, puede intentar iniciar sesión, lo que automáticamente iniciará su sesión. Cuando haya iniciado sesión, debería ver un botón de cierre de sesión que cerrará la sesión del usuario y reiniciará el flujo de autenticación.
-
Implemente los cambios en el entorno en vivo
Implemente los cambios en GitHub para iniciar una nueva creación en la consola de Amplify:
git add . git commit -m “added auth” git push origin master
Conclusión
Ahora ha agregado la autenticación del usuario a su aplicación con solo algunas líneas de código. En el siguiente módulo, agregaremos una API a su aplicación.