Introducción a AWS

Crear una aplicación React de pila completa

Crear 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

Información general

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 Amplify IU 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.

Qué logrará

En este módulo, podrá:
  • 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

  • Necesitaremos dos bibliotecas de 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
  • 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.
  • 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
  • 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);
    
  • Luego, abra src/App.js y actualice el siguiente código:

    import logo from "./logo.svg";
    import "@aws-amplify/ui-react/styles.css";
    import {
      withAuthenticator,
      Button,
      Heading,
      Image,
      View,
      Card,
    } from "@aws-amplify/ui-react";
    
    function App({ signOut }) {
      return (
        <View className="App">
          <Card>
            <Image src={logo} className="App-logo" alt="logo" />
            <Heading level={1}>We now have Auth!</Heading>
          </Card>
          <Button onClick={signOut}>Sign Out</Button>
        </View>
      );
    }
    
    export default withAuthenticator(App);

    En este código, 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 añadido un botón de Cierre de sesión para cerrar la sesión de los usuarios.

  • Espere a que los recursos terminen de implementarse y, a continuación, ejecute la aplicación para ver el nuevo flujo de autenticación que protege la aplicación:

    npm start

    Aquí puede intentar registrarse, lo que le enviará un código de verificación a su correo electrónico. Use el código de verificación para iniciar sesión en la aplicación. Al iniciar sesión, debería ver el botón Cerrar sesión, que cierra sesión y reinicia el flujo de autenticación.

  • A continuación, debemos configurar el proceso de creación de Amplify para añadir el backend como parte del flujo de trabajo de despliegue continuo. Desde la ventana de su terminal, ejecute:

    amplify console
    ? Which site do you want to open? AWS console

    Esto abrirá la consola de Amplify. En el panel de navegación, seleccione Configuración de la creación y modifíquela para añadir la sección de backend (líneas 2 a 7 del código siguiente) a su amplify.yml. Luego de realizar las ediciones, seleccione Guardar.

    version: 1
    backend:
      phases:
        build:
          commands:
            - '# Execute Amplify CLI with the helper script'
            - amplifyPush --simple
    frontend:
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            - yarn run build
      artifacts:
        baseDirectory: build
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*

    Desplácese hacia abajo hasta Crear ajustes de imagen y elija Editar. Seleccione el menú desplegable Agregar anulación de la versión del paquete y seleccione Amplify CLI. Debería tener la versión más reciente de forma predeterminada, como se muestra en la imagen.

    A continuación, actualice su rama de frontend para que apunte al entorno de backend que acaba de crear. Debajo del nombre de la rama, elija Editar y, a continuación, apunte su rama principal al backend de ensayo que acaba de crear. Elija Guardar.

    Si ve el mensaje Configure un rol de servicio... , siga las instrucciones que se proporcionan antes de seguir configurando y adjuntando un rol de servicio a su aplicación.

  • Ahora regrese a la ventana de su terminal local e implemente los cambios en GitHub para comenzar una nueva compilación en la consola de Amplify:

    git add .
    git commit -m "added auth"
    git push origin main
    

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.

¿Le resultó útil esta página?

Agregar API y base de datos