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
    Front End Sign In Screen Module 3

    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.

¿Este módulo le resultó útil?

Gracias
Indíquenos lo que le gustó.
Cerrar
Lamentamos haberlo decepcionado
¿Hay información desactualizada, confusa o inexacta? Ayúdenos a mejorar este tutorial con sus comentarios.
Cerrar