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
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito"></a>

*Rishi Singla, Amazon Web Services*

## Resumo
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-summary"></a>

Esse padrão demonstra como usar o AWS Amplify para criar um aplicativo baseado em React e como adicionar autenticação ao frontend usando o Amazon Cognito. AWS Amplify consiste em um conjunto de ferramentas (estrutura de código aberto, ambiente de desenvolvimento visual, console) e serviços (aplicação Web e hospedagem de site estático) para acelerar o desenvolvimento de aplicativos móveis e web na AWS. 

## Pré-requisitos e limitações
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-prereqs"></a>

**Pré-requisitos **
+ Uma conta AWS ativa
+ [Node.js](https://nodejs.org/en/download/) e [npm](https://www.npmjs.com/get-npm) instalados em sua máquina

**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
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-architecture"></a>

**Pilha de tecnologias de destino**
+ AWS Amplify
+ Amazon Cognito

## Ferramentas
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-tools"></a>
+ [Command Line Interface (CLI) do Amplify](https://docs.amplify.aws/cli/)
+ [Amplify Libraries](https://docs.amplify.aws/lib/q/platform/react-native/) (bibliotecas cliente de código aberto)
+ [Amplify Studio](https://docs.amplify.aws/console/) (interface visual)

## Épicos
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-epics"></a>

### Instale a CLI do AWS Amplify
<a name="install-aws-amplify-cli"></a>


| Tarefa | Description | Habilidades necessárias | 
| --- | --- | --- | 
| Instale a CLI do Amplify. | A CLI do Amplify é uma cadeia de ferramentas unificada para criar serviços de nuvem AWS para seu aplicativo React. Para instalar a CLI do Amplify, execute:<pre>npm install -g @aws-amplify/cli</pre>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:<pre>npm install -g npm@9.8.0</pre>onde 9.8.0 se refere à versão que você deseja instalar. | Desenvolvedor de aplicativos | 

### Crie um aplicativo React
<a name="create-a-react-app"></a>


| Tarefa | Description | Habilidades necessárias | 
| --- | --- | --- | 
| Crie um aplicativo React. | Para criar um novo aplicativo React, use o comando:<pre>npx create-react-app amplify-react-application</pre>onde `ampify-react-application` é o nome do aplicativo.Quando o aplicativo for criado com êxito, você verá a mensagem:<pre>Success! Created amplify-react-application</pre>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:<pre>amplify-react-application% npm start</pre>Isso inicia o aplicativo React na sua máquina local. | Desenvolvedor de aplicativos | 

### Configurar a CLI do Amplify
<a name="configure-the-amplify-cli"></a>


| Tarefa | Description | Habilidades necessárias | 
| --- | --- | --- | 
| Configure o Amplify para se conectar à sua conta da AWS. | Configure o Amplify executando o comando:<pre>amplify-react-application % amplify configure</pre>A CLI do Amplify solicita que você siga estas etapas para configurar o acesso à sua conta da AWS:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html)Para este cenário, são necessários usuários do IAM com 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 de chaves de acesso](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html#Using_RotateAccessKey) no *Guia de usuário do IAM*.Essas etapas aparecem no terminal da seguinte forma.<pre>Follow these steps to set up access to your AWS account:<br />Sign in to your AWS administrator account:<br />https://console.aws.amazon.com/<br />Press Enter to continue<br />Specify the AWS Region<br />? region:  us-east-1<br />Follow the instructions at<br />https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli<br />to complete the user creation in the AWS console<br />https://console.aws.amazon.com/iamv2/home#/users/create<br />Press Enter to continue<br />Enter the access key of the newly created user:<br />? accessKeyId:  ********************<br />? secretAccessKey:  ****************************************<br />This would update/create the AWS Profile in your local machine<br />? Profile Name:  new<br /><br />Successfully set up the new user.</pre>Para obter mais informações sobre essas etapas, consulte a [documentação](https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli) no Amplify Dev Center. | AWS geral, desenvolvedor de aplicativos | 

### Inicialize o Amplify
<a name="initialize-amplify"></a>


| Tarefa | Description | Habilidades necessárias | 
| --- | --- | --- | 
| Inicialize o Amplify. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | Desenvolvedor de aplicativos, AWS geral | 

### Adicione autenticação ao frontend
<a name="add-authentication-to-the-frontend"></a>


| Tarefa | Description | Habilidades necessárias | 
| --- | --- | --- | 
| Adição de autenticação. | Você pode usar o comando `amplify add <category>` para adicionar atributos como um login de usuário ou uma API de backend. 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 Amplify, como API, análise e armazenamento, para que você possa definir regras de autorização para usuários autenticados e não autenticados.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | Desenvolvedor de aplicativos, AWS geral | 

### Alterar o arquivo App.js
<a name="change-the-app-js-file"></a>


| Tarefa | Description | Habilidades necessárias | 
| --- | --- | --- | 
| Alterar o arquivo App.js. | Na pasta `src`, abra e revise o arquivo `App.js`. O arquivo modificado deve ficar assim:<pre>{  App.Js File after modifications:<br />import React from 'react';<br />import logo from './logo.svg';<br />import './App.css';<br />import { Amplify } from 'aws-amplify';<br />import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';<br />import awsconfig from './aws-exports';<br />Amplify.configure(awsconfig);<br />function App({ signOut }) {<br />  return (<br />      <div><br />      <h1>Thankyou for doing verification</h1><br />      <h2>My Content</h2><br />       <button onClick={signOut}>Sign out</button><br />    </div><br />  );<br />}<br />export default withAuthenticator(App);</pre> | Desenvolvedor de aplicativos | 
| Importe pacotes React. | O arquivo `App.js` importa dois pacotes React. Instale esses pacotes usando o seguinte comando:<pre>amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react</pre> | Desenvolvedor de aplicativos | 

### Inicie o aplicativo React e verifique a autenticação
<a name="launch-the-react-app-and-check-authentication"></a>


| Tarefa | Description | Habilidades necessárias | 
| --- | --- | --- | 
| Inicie o aplicativo. | Inicie o aplicativo na sua máquina local:<pre>amplify-react-application1 % npm start</pre> | Desenvolvedor de aplicativos, AWS geral | 
| 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, AWS geral | 

## Recursos relacionados
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-resources"></a>
+ [Conceitos básicos](https://docs.npmjs.com/getting-started) (documentação do npm)
+ [Crie uma conta autônoma da AWS](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) (documentação do AWS Account Management) 
+ [Documentação do AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)
+ [Documentação do Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html)