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
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