本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。
使用 AWS Amplify 创建 React 应用程序，并使用 Amazon Cognito 添加身份验证
Rishi Singla，亚马逊 Web Services
摘要
此模式演示了如何使用 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 |
相关资源
