Conceitos básicos da AWS

Crie uma aplicação React

Crie uma aplicação Web simples usando o AWS Amplify

Módulo 3: adicionar autenticação

Neste módulo, você usará as bibliotecas e a CLI do Amplify para configurar e adicionar autenticação a seu aplicativo.

Introdução

O próximo recurso a ser adicionado é a autenticação. Neste módulo, você aprenderá como autenticar um usuário com as bibliotecas e a CLI do Amplify utilizando o Amazon Cognito, um serviço de identidade de usuários gerenciado.

Você aprenderá também como usar a biblioteca de componentes da interface de usuário do Amplify para estruturar todo o fluxo de autenticação de um usuário, permitindo que os usuários se cadastrem, façam login e redefinam suas senhas, com apenas algumas linhas de código.

O que você aprenderá

  • Instalar bibliotecas do Amplify
  • Criar e implantar um serviço de autenticação
  • Configurar o aplicativo React para incluir autenticação

Conceitos principais

Bibliotecas do Amplify – As bibliotecas do Amplify permitem interagir com os serviços da AWS de uma aplicação móvel ou Web.

Autenticação – Em software, autenticação é o processo de verificação e gerenciamento da identidade de um usuário, usando um serviço de autenticação ou API.

 Tempo para a conclusão

10 minutos

 Serviços usados

Implementação

  • Instalar as bibliotecas do Amplify

    Precisaremos de 2 bibliotecas do Amplify para este projeto. A biblioteca aws-amplify principal contém todas as APIs do cliente para interação com os vários serviços da AWS com os quais trabalharemos, e a biblioteca @aws-amplify/ui-react contém componentes da interface de usuário específicos da estrutura de trabalho. Instale essas bibliotecas na raiz do projeto.

    npm install aws-amplify @aws-amplify/ui-react
  • Criar o serviço de autenticação

    Para criar o serviço de autenticação, use a CLI do 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.
  • Implantar o serviço de autenticação

    Agora que o serviço de autenticação foi configurado localmente, podemos implantá-lo executando o comando push do Amplify:

    amplify push --y
  • Configurar o projeto React com os recursos do Amplify

    A CLI criou e continuará a atualizar um arquivo chamado aws-exports.js, localizado no diretório src do nosso projeto. Usaremos este arquivo para informar o projeto do React sobre os diferentes recursos da AWS, disponíveis em nosso projeto do Amplify.

    Para configurar o aplicativo com esses recursos, abra o src/index.js e adicione o código abaixo à última importação:

    import Amplify from 'aws-amplify';
    import config from './aws-exports';
    Amplify.configure(config);
    
  • Adicione o fluxo de autenticação no App.js

    Depois, abra o src/App.js e atualize-o com o seguinte 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);
    

    Neste componente, usamos o componente withAuthenticator. Esse componente estruturará todo o fluxo de autenticação do usuário, permitindo que eles se cadastrem, façam login, redefinam senhas e confirmem o login para a autenticação multifator (MFA). Usamos também o componente AmplifySignOut, que renderizará o botão Sign Out (Sair).

  • Executar o aplicativo localmente

    Em seguida, execute o aplicativo para visualizar o novo fluxo de autenticação que o protege:

    npm start
    Front End Sign In Screen Module 3

    Aqui você pode tentar se cadastrar, o que automaticamente fará seu login. Depois de fazer login, você verá o botão Sign out (Sair), que encerrará a sessão do usuário e reiniciará o fluxo de autenticação.

  • Implantar as alterações no ambiente ativo

    Implante as alterações no GitHub para iniciar uma nova compilação no console do Amplify:

    git add .
    git commit -m “added auth”
    git push origin master
    

Conclusão

Você acaba de adicionar a autenticação de usuários ao seu aplicativo, com apenas algumas linhas de código! No próximo módulo, adicionaremos uma API ao aplicativo.

Este módulo foi útil?

Agradecemos a sua atenção
Gostaríamos de saber do que você gostou.
Desculpe por ter desapontado
Encontrou algo desatualizado, confuso ou incorreto? Envie seus comentários para nos ajudar a melhorar este tutorial.

Adicionar GraphQL