As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
Crie um aplicativo React usando o AWS Amplify e adicione autenticação com o Amazon Cognito
Criado por Rishi Singla () AWS
Ambiente: PoC ou piloto | Tecnologias: aplicativos web e móveis; segurança, identidade, conformidade | Workload: todas as outras workloads |
AWSserviços: AWS Amplify; Amazon Cognito |
Resumo
Esse padrão demonstra como usar o AWS Amplify para criar um aplicativo baseado em React e como adicionar autenticação ao front-end usando o Amazon Cognito. AWSO Amplify consiste em um conjunto de ferramentas (estrutura de código aberto, ambiente de desenvolvimento visual, console) e serviços (aplicativos web e hospedagem estática de sites) para acelerar o desenvolvimento de aplicativos móveis e web. AWS
Pré-requisitos e limitações
Pré-requisitos
Versões do produto
Node.js versão 10.x ou superior (para verificar sua versão, execute node -v em uma janela de terminal)
npm versão 6.x ou superior (para verificar sua versão, execute npm -v em uma janela de terminal)
Arquitetura
Pilha de tecnologias de destino
AWS Amplify
Amazon Cognito
Épicos
| Tarefa | Descrição | Habilidades necessárias |
|---|
Instale o AmplifyCLI. | O Amplify CLI é uma cadeia de ferramentas unificada para criar serviços AWS em nuvem para seu aplicativo React. Para instalar o AmplifyCLI, execute: npm install -g @aws-amplify/cli
O npm notificará você se uma nova versão principal estiver disponível. Se sim, use o comando a seguir para atualizar sua versão do npm: npm install -g npm@9.8.0
onde 9.8.0 se refere à versão que você deseja instalar. | Desenvolvedor de aplicativos |
| Tarefa | Descrição | Habilidades necessárias |
|---|
Crie um aplicativo React. | Para criar um novo aplicativo React, use o comando: npx create-react-app amplify-react-application
onde ampify-react-application é o nome do aplicativo. Quando o aplicativo for criado com êxito, você verá a mensagem: Success! Created amplify-react-application
Um diretório com várias subpastas será criado para o aplicativo React. | Desenvolvedor de aplicativos |
Inicie o aplicativo na sua máquina local. | Vá para o diretório amplify-react-application que foi criado na etapa anterior e execute o comando: amplify-react-application% npm start
Isso inicia o aplicativo React na sua máquina local. | Desenvolvedor de aplicativos |
| Tarefa | Descrição | Habilidades necessárias |
|---|
Configure o Amplify para se conectar à sua AWS conta. | Configure o Amplify executando o comando: amplify-react-application % amplify configure
O Amplify CLI solicita que você siga estas etapas para configurar o acesso à sua AWS conta: Faça login na sua conta de AWS administrador. Especifique a AWS região que você deseja usar. Crie um usuário do AWS Identity and Access Management (IAM) com acesso programático e anexe a política de AdministratorAccess-Amplify permissões ao usuário. Crie e copie o ID de chave de acesso e a chave de acesso secreta. Insira esses detalhes no terminal. Crie um nome de perfil ou use o perfil padrão.
Aviso: esse cenário exige que IAM os usuários tenham acesso programático e credenciais de longo prazo, o que representa um risco de segurança. Para ajudar a reduzir esse risco, recomendamos que você forneça a esses usuários somente as permissões necessárias para realizar a tarefa e que você os remova quando não forem mais necessários. As chaves de acesso podem ser atualizadas, se necessário. Para obter mais informações, consulte Atualização das chaves de acesso no Guia IAM do usuário. Essas etapas aparecem no terminal da seguinte forma. Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
Specify the AWS Region
? region: us-east-1
Follow the instructions at
https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli
to complete the user creation in the AWS console
https://console.aws.amazon.com/iamv2/home#/users/create
Press Enter to continue
Enter the access key of the newly created user:
? accessKeyId: ********************
? secretAccessKey: ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name: new
Successfully set up the new user.
Para obter mais informações sobre essas etapas, consulte a documentação no Amplify Dev Center. | GeralAWS, desenvolvedor de aplicativos |
| Tarefa | Descrição | Habilidades necessárias |
|---|
Inicialize o Amplify. | Para inicializar o Amplify no novo diretório, execute: amplify init
O Amplify solicita o nome do projeto e os parâmetros de configuração Especifique todos os parâmetros e pressione Y para inicializar o projeto com a configuração especificada. Project information
| Name: amplifyreactproject
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start
Selecione o perfil que você criou na etapa anterior. Os recursos serão implantados no dev ambiente do projeto Amplify que você criou. Para confirmar que os recursos foram criados, você pode abrir o console do AWS Amplify e visualizar o AWS CloudFormation modelo que foi usado para criar os recursos e os detalhes. Deploying root stack amplifyreactproject [ ====================-------------------- ] 2/4
amplify-amplifyreactproject-d… AWS::CloudFormation::Stack CREATE_IN_PROGRESS
UnauthRole AWS::IAM::Role CREATE_COMPLETE
DeploymentBucket AWS::S3::Bucket CREATE_IN_PROGRESS
AuthRole AWS::IAM::Role CREATE_COMPLETE
| Desenvolvedor de aplicativos, Geral AWS |
| Tarefa | Descrição | Habilidades necessárias |
|---|
Adição de autenticação. | Você pode usar o amplify add <category> comando para adicionar recursos como login de usuário ou back-endAPI. Nesta etapa, você usará o comando para adicionar autenticação. O Amplify fornece um serviço de autenticação de backend com o Amazon Cognito, bibliotecas de frontend e um componente de interface de usuário do Autenticador drop-in. Os atributos incluem inscrição do usuário, login do usuário, autenticação multifator, saída do usuário e login sem senha. Você também pode autenticar usuários por meio da integração com provedores de identidade federados, como Amazon, Google e Facebook. A categoria de autenticação do Amplify se integra perfeitamente a outras categorias do AmplifyAPI, como análise e armazenamento, para que você possa definir regras de autorização para usuários autenticados e não autenticados. Para configurar a autenticação para seu aplicativo React, execute o comando: amplify-react-application1 % amplify add auth
Isso exibe as informações e os prompts a seguir. Você pode escolher a configuração apropriada de acordo com seus requisitos comerciais e de segurança. Using service: Cognito, provided by: awscloudformation
The current configured provider is Amazon Cognito.
Do you want to use the default authentication and security configuration? (Use arrow keys)
❯ Default configuration
Default configuration with Social Provider (Federation)
Manual configuration
I want to learn more.
Para um exemplo simples, escolha a configuração padrão e, em seguida, selecione o mecanismo de login para usuários (nesse caso, e-mail): How do you want users to be able to sign in?
Username
❯ Email
Phone Number
Email or Phone Number
I want to learn more.
Ignore as configurações avançadas para concluir a adição de recursos de autenticação: Do you want to configure advanced settings? (Use arrow keys)
❯ No, I am done.
Yes, I want to make some additional changes.
Compile seus recursos de backend locais e provisione-os na nuvem: amplify-react-application1 % amplify push
Esse comando faz as alterações apropriadas nos grupos de usuários do Congito em sua conta. Pressione Y para configurar o auth recurso usando CloudFormation. Isso configura os seguintes recursos: UserPool AWS::Cognito::UserPool CREATE_COMPLETE
UserPoolClientWeb AWS::Cognito::UserPoolClient CREATE_COMPLETE
UserPoolClientWeb AWS::Cognito::UserPoolClient CREATE_COMPLETE
UserPoolClientRole AWS::IAM::Role CREATE_COMPLETE
UserPoolClientLambda AWS::Lambda::Function CREATE_COMPLETE
UserPoolClientLambdaPolicy AWS::IAM::Policy CREATE_COMPLETE
UserPoolClientLogPolicy AWS::IAM::Policy CREATE_IN_PROGRESS
Você também pode usar o console do AWS Cognito para visualizar esses recursos (procure grupos de usuários e grupos de identidades do Cognito). Esta etapa atualiza o arquivo aws-exports.js na pasta src do seu aplicativo React com as configurações do grupo de usuários e do banco de identidades do Cognito.
| Desenvolvedor de aplicativos, Geral AWS |
| Tarefa | Descrição | Habilidades necessárias |
|---|
Alterar o arquivo App.js. | Na pasta src, abra e revise o arquivo App.js. O arquivo modificado deve ficar assim: { App.Js File after modifications:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Amplify } from 'aws-amplify';
import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
function App({ signOut }) {
return (
<div>
<h1>Thankyou for doing verification</h1>
<h2>My Content</h2>
<button onClick={signOut}>Sign out</button>
</div>
);
}
export default withAuthenticator(App);
| Desenvolvedor de aplicativos |
Importe pacotes React. | O arquivo App.js importa dois pacotes React. Instale esses pacotes usando o seguinte comando: amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react
| Desenvolvedor de aplicativos |
| Tarefa | Descrição | Habilidades necessárias |
|---|
Inicie o aplicativo. | Inicie o aplicativo na sua máquina local: amplify-react-application1 % npm start
| Desenvolvedor de aplicativos, Geral AWS |
Verifique a autenticação. | Verifique se o aplicativo solicita parâmetros de autenticação. (Em nosso exemplo, configuramos o e-mail como método de login.) A interface de usuário do frontend deve solicitar suas credenciais de login e fornecer a opção de criar uma conta. Você também pode configurar o processo de criação do Amplify para adicionar o backend como parte de um fluxo de trabalho de implantação contínua. No entanto, esse padrão não cobre essa opção. | Desenvolvedor de aplicativos, Geral AWS |
Recursos relacionados
