本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 使用 AWS Amplify 创建 React 应用程序，并使用 Amazon Cognito 添加身份验证
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito"></a>

*Rishi Singla，Amazon Web Services*

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

此模式演示了如何使用 AWS Amplify 创建基于 React 的应用程序，以及如何使用 Amazon Cognito 为前端添加身份验证。AWS Amplify 由一组工具(开源框架、可视化开发环境、控制台)和服务(网络应用程序和静态网站托管)组成，用于加速 AWS 上移动和网络应用程序的开发。

## 先决条件和限制
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-prereqs"></a>

**先决条件**
+ 一个有效的 Amazon Web Services account
+ 计算机上已安装 [Node.js](https://nodejs.org/en/download/) 和 [npm](https://www.npmjs.com/get-npm)

**产品版本**
+ Node.js 版本 10.x 或更高版本（要验证您的版本，请在终端窗口中运行 `node -v`）
+ npm 6.x 或更高版本（要验证您的版本，请在终端窗口中运行 `npm -v`）

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

**目标技术堆栈**
+ AWS Amplify
+ Amazon Cognito

## 工具
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-tools"></a>
+ [Amplify 命令行界面（CLI）](https://docs.amplify.aws/cli/)
+ [Amplify Libraries](https://docs.amplify.aws/lib/q/platform/react-native/)（开源客户端库）
+ [Amplify Studio](https://docs.amplify.aws/console/)（可视化界面）

## 操作说明
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-epics"></a>

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


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 安装 Amplify CLI | Amplify CLI 是一个统一的工具链，用于为您的 React 应用程序创建 Amazon Web Services Cloud 服务。若要安装 Amplify CLI，请运行：<pre>npm install -g @aws-amplify/cli</pre>如果有新的主要版本可用，npm 将通知您。如果是这样，请使用以下命令升级您的 npm 版本：<pre>npm install -g npm@9.8.0</pre>其中 9.8.0 指的是您要安装的版本。 | 应用程序开发人员 | 

### 创建 React 应用程序
<a name="create-a-react-app"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 创建 React 应用程序。 | 若要创建新的 React 应用程序，请使用命令：<pre>npx create-react-app amplify-react-application</pre>其中 `ampify-react-application` 是应用程序的名称。应用程序创建成功后，您将看到提示信息：<pre>Success! Created amplify-react-application</pre>将为 React 应用程序创建一个包含多个子文件夹的目录。 | 应用程序开发人员 | 
| 在本地计算机上启动应用程序。 | 转到上一步中创建的目录 `amplify-react-application` 并运行以下命令：<pre>amplify-react-application% npm start</pre>这将在您的本地计算机上启动 React 应用程序。 | 应用程序开发人员 | 

### 配置 Amplify CLI
<a name="configure-the-amplify-cli"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 配置 Amplify 以连接到您的 Amazon Web Services account。 | 通过运行以下命令配置 Amplify：<pre>amplify-react-application % amplify configure</pre>Amplify CLI 要求您按照以下步骤设置对您的 Amazon Web Services account 的访问权限：[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html)此场景需要 IAM 用户具有编程访问权限和长期凭证，这会带来安全风险。为帮助减轻这种风险，我们建议仅向这些用户提供执行任务所需的权限，并在不再需要这些用户时将其移除。必要时可以更新访问密钥。有关更多信息，请参阅 *IAM 用户指南*中的[更新访问密钥](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html#Using_RotateAccessKey)。这些步骤在终端中显示如下。<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>有关这些步骤的更多信息，请参阅 Amplify 开发人员中心中的[文档](https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli)。 | 常规 AWS，应用程序开发人员 | 

### 初始化 Amplify
<a name="initialize-amplify"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 初始化 Amplify。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | 应用程序开发人员，常规 AWS | 

### 向前端添加身份验证
<a name="add-authentication-to-the-frontend"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 添加身份验证 | 您可以使用 `amplify add <category>` 命令添加诸如用户登录或后端 API 之类的功能。在此步骤中，您将使用该命令添加身份验证。Amplify 提供包含 Amazon Cognito、前端库和嵌入式身份验证器 UI 组件的后端身份验证服务。功能包括用户注册、用户登录、多重身份验证、用户注销和无密码登录。您还可以通过与 Amazon、Google 和 Facebook 等联合身份提供商集成来对用户进行身份验证。Amplify 身份验证类别与其他 Amplify 类别（如 API、分析和存储）无缝集成，因此您可以为经过身份验证和未经身份验证的用户定义授权规则。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | 应用程序开发人员，常规 AWS | 

### 更改 App.js 文件
<a name="change-the-app-js-file"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 更改 App.js 文件。 | 在 `src` 文件夹中，打开并修订 `App.js` 文件。修改后的文件应如下所示：<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> | 应用程序开发人员 | 
| 导入 React 程序包。 | `App.js` 文件导入了两个 React 程序包。使用命令安装这些程序包：<pre>amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react</pre> | 应用程序开发人员 | 

### 启动 React 应用程序并检查身份验证
<a name="launch-the-react-app-and-check-authentication"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 启动应用程序。 | 在本地计算机上启动 React 应用程序：<pre>amplify-react-application1 % npm start</pre> | 应用程序开发人员，常规 AWS | 
| 检查身份验证。 | 检查应用程序是否提示输入身份验证参数。（在我们的示例中，我们已将电子邮件配置为登录方式。）前端用户界面应提示您输入登录凭证，并提供用于创建账户的选项。您还可以配置 Amplify 构建流程，将后端添加为持续部署工作流的一部分。然而，此模式不涵盖该选项。 | 应用程序开发人员，常规 AWS | 

## 相关资源
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-resources"></a>
+ [入门](https://docs.npmjs.com/getting-started)（npm 文档）
+ [创建独立 Amazon Web Services account](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html)（Amazon Web Services account 管理文档） 
+ [AWS Amplify 文档](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)
+ [Amazon Cognito 文档](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html)