本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。
使用 AWS Amplify 创建 React 应用程序，并使用 Amazon Cognito 添加身份验证
由 Rishi Singla (AWS) 创建
摘要
此模式演示了如何使用 AWS Amplify 创建基于 React 的应用程序，以及如何使用 Amazon Cognito 为前端添加身份验证。AWS Amplify 由一组工具(开源框架、可视化开发环境、控制台)和服务(网络应用程序和静态网站托管)组成，用于加速 AWS 上移动和网络应用程序的开发。
先决条件和限制
先决条件
产品版本
架构
目标技术堆栈
AWS Amplify
Amazon Cognito
操作说明
| Task | 描述 | 所需技能 |
|---|
安装 Amplify CLI | Amplify CLI 是一个统一的工具链，用于为您的 React 应用程序创建 Amazon Web Services Cloud 服务。若要安装 Amplify CLI，请运行： npm install -g @aws-amplify/cli
如果有新的主要版本可用，npm 将通知您。如果是这样，请使用以下命令升级您的 npm 版本： npm install -g npm@9.8.0
其中 9.8.0 指的是您要安装的版本。 | 应用程序开发人员 |
| Task | 描述 | 所需技能 |
|---|
创建 React 应用程序。 | 若要创建新的 React 应用程序，请使用命令： npx create-react-app amplify-react-application
其中 ampify-react-application 是应用程序的名称。 应用程序创建成功后，您将看到提示信息： Success! Created amplify-react-application
将为 React 应用程序创建一个包含多个子文件夹的目录。 | 应用程序开发人员 |
在本地计算机上启动应用程序。 | 转到上一步中创建的目录 amplify-react-application 并运行以下命令： amplify-react-application% npm start
这将在您的本地计算机上启动 React 应用程序。 | 应用程序开发人员 |
| Task | 描述 | 所需技能 |
|---|
配置 Amplify 以连接到您的 Amazon Web Services account。 | 通过运行以下命令配置 Amplify： amplify-react-application % amplify configure
Amplify CLI 要求您按照以下步骤设置对您的 Amazon Web Services account 的访问权限： 登录您的 AWS 管理员账户。 指定您要使用的 AWS 区域。 创建具有编程访问权限的 AWS Identity and Access Management（AWS IAM）用户，并将 AdministratorAccess-Amplify 权限策略附加给该用户。 复制访问密钥 ID 和秘密访问密钥。 在终端中输入这些详细信息。 创建配置文件名称或使用默认配置文件。
这种情况需要具有编程访问权限和长期证书的 IAM 用户，这会带来安全风险。为帮助减轻这种风险，我们建议仅向这些用户提供执行任务所需的权限，并在不再需要这些用户时将其移除。必要时可以更新访问密钥。有关更多信息，请参阅《IAM 用户指南》中的 更新访问密钥。 这些步骤在终端中显示如下。 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.
有关这些步骤的更多信息，请参阅 Amplify 开发人员中心中的文档。 | 常规 AWS，应用程序开发人员 |
| Task | 描述 | 所需技能 |
|---|
初始化 Amplify。 | 要在新目录中初始化 Amplify，请运行： amplify init
Amplify 会提示您输入项目名称和配置参数 指定所有参数，然后按 Y 以使用指定的配置初始化项目。 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
选择在上一步中创建的配置文件。这些资源将部署到您创建的 Amplify 项目中的 dev 环境中。 要确认资源已创建，您可以打开 AWS Amplify 控制台并查看用于创建资源的 AWS CloudFormation 模板和详细信息。 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
| 应用程序开发人员，常规 AWS |
| Task | 描述 | 所需技能 |
|---|
添加身份验证 | 您可以使用 amplify add <category> 命令添加诸如用户登录或后端 API 之类的功能。在此步骤中，您将使用该命令添加身份验证。 Amplify 提供包含 Amazon Cognito、前端库和嵌入式身份验证器 UI 组件的后端身份验证服务。功能包括用户注册、用户登录、多重身份验证、用户注销和无密码登录。您还可以通过与 Amazon、Google 和 Facebook 等联合身份提供商集成来对用户进行身份验证。Amplify 身份验证类别与其他 Amplify 类别（如 API、分析和存储）无缝集成，因此您可以为经过身份验证和未经身份验证的用户定义授权规则。 若要为 React 应用配置身份验证，请运行以下命令： amplify-react-application1 % amplify add auth
这将显示以下信息和提示。您可以根据您的业务和安全需求选择适当的配置。 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.
举一个简单的例子，选择默认配置，然后选择用户的登录机制（在本例中为电子邮件）： How do you want users to be able to sign in?
Username
❯ Email
Phone Number
Email or Phone Number
I want to learn more.
绕过高级设置完成身份验证资源的添加： Do you want to configure advanced settings? (Use arrow keys)
❯ No, I am done.
Yes, I want to make some additional changes.
构建您的本地后端资源，并在云中进行配置： amplify-react-application1 % amplify push
此命令会对您账户中的 Congito 用户池进行适当更改。 按 Y 使用配置auth资源 CloudFormation。 这将配置以下资源： 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
您还可以使用 AWS Cognito 控制台查看这些资源(查找 Cognito 用户池和身份池)。 此步骤使用 Cognito 用户池和身份池配置更新 React 应用程序的 src 文件夹中的 aws-exports.js 文件。
| 应用程序开发人员，常规 AWS |
| Task | 描述 | 所需技能 |
|---|
更改 App.js 文件。 | 在 src 文件夹中，打开并修订 App.js 文件。修改后的文件应如下所示： { 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);
| 应用程序开发人员 |
导入 React 程序包。 | App.js 文件导入了两个 React 程序包。使用命令安装这些程序包：
amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react
| 应用程序开发人员 |
| Task | 描述 | 所需技能 |
|---|
启动应用程序。 | 在本地计算机上启动 React 应用程序： amplify-react-application1 % npm start
| 应用程序开发人员，常规 AWS |
检查身份验证。 | 检查应用程序是否提示输入身份验证参数。（在我们的示例中，我们已将电子邮件配置为登录方式。） 前端用户界面应提示您输入登录凭证，并提供用于创建账户的选项。 您还可以配置 Amplify 构建流程，将后端添加为持续部署工作流的一部分。然而，此模式不涵盖该选项。 | 应用程序开发人员，常规 AWS |
相关资源
