设置一个 React 单页应用程序示例 - Amazon Cognito
创建应用程序创建 Lightsail 开发者环境
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

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

设置一个 React 单页应用程序示例

在本教程中，您将创建一个 React 单页应用程序，您可以在其中测试用户注册、确认和登录。React 是一个 JavaScript基于 Web 和移动应用程序的库，侧重于用户界面 (UI)。此示例应用程序演示了 Amazon Cognito 用户池的一些基本功能。如果您已经有使用 React 开发 Web 应用程序的经验，请从中下载示例应用程序 GitHub。

以下屏幕截图显示了您要创建的应用程序中的初始身份验证页面。

基于 React 的示例 Web 应用程序的注册页面屏幕截图。

创建用户池过程为您设置了一个与示例应用程序配合使用的用户池。如果您的用户池满足以下要求，则可以跳过此步骤：

  • 用户可以使用自己的电子邮件地址登录。Cognito 用户池登录选项：电子邮件。

  • 用户名不区分大小写。用户名要求：未选择 “将用户名区分大小写”。

  • 不需要多因素身份验证 (MFA)。MFA 执法：可选 M FA。

  • 您的用户池通过电子邮件验证用于确认用户配置文件的属性。要验证的属性：发送电子邮件、验证电子邮件地址。

  • 电子邮件是唯一的必填属性。必填属性：电子邮件。

  • 用户可以在您的用户池中自行注册。自行注册：选中 “启用自助注册”。

  • 您的初始应用程序客户端是允许使用用户名和密码登录的公共客户端。应用程序类型：公共客户端，身份验证流程：ALLOW_USER_PASSWORD_AUTH。

创建新的用户池

  1. 转到 Amazon Cognito 控制台。如果出现提示，请输入您的 Amazon 凭据。

  2. 选择 “创建用户池” 按钮。您可能需要从左侧导航窗格中选择 “用户池” 才能显示此选项。

  3. 在页面右上角，选择 Create a user pool（创建用户池）以开启用户池创建向导。

  4. 在 “配置登录体验” 中，您可以选择要用于此用户池的身份提供商 (IdPs)。有关更多信息，请参阅 通过第三方添加用户池登录。

    1. 在 “身份验证提供程序” 下，对于提供者类型，请确保仅选择 Cognito 用户池。

    2. 对于 Cognito 用户池登录选项，请选择用户名。不要选择任何其他用户名要求。

    3. 将所有其他选项保留为默认值，然后选择 “下一步”。

  5. 在配置安全要求中，您可以选择密码策略、多因素身份验证 (MFA) 要求和用户帐户恢复选项。有关更多信息，请参阅 使用 Amazon Cognito 用户池安全功能。

    1. 对于密码策略，请确认密码策略模式已设置为 Cognito 默认值。

    2. 在多重身份验证下，对于强制执行 MFA，请选择可选 MF A。

    3. 对于 MFA 方法，请选择身份验证器应用程序和短信。

    4. 要恢复用户帐户，请确认已选中 “启用自助服务帐户恢复”，并将用户帐户恢复消息传送方式设置为 “仅限电子邮件”。

    5. 将所有其他选项保留为默认值，然后选择 “下一步”。

  6. 在 “配置注册体验” 中，您可以确定新用户在注册为新用户时将如何验证其身份，以及在用户注册流程中哪些属性应为必填属性或可选属性。有关更多信息，请参阅 管理用户池中的用户。

    1. 确认已选中 “启用自助注册”。此设置会打开您的用户池，让互联网上的任何人都可以注册。这是为示例应用程序而设计的，但在生产环境中应谨慎应用此设置。

    2. 在 Cognito 辅助验证和确认下，确认已选中 “允许 Cognito 自动发送消息进行验证和确认” 复选框。

    3. 确认 “要验证的属性” 设置为 “发送电子邮件，验证电子邮件地址”。

    4. 在 “验证属性更改” 下，确认已选择默认选项：选中 “待更新时保留原始属性值”，“待更新时处于活动状态” 属性值设置为 “电子邮件地址”。

    5. 在 “必填属性” 下，确认基于先前选择的必填属性显示电子邮件。

      重要

      对于此示例应用程序，您的用户池不得将 phone_number 设置为必填属性。如果 phone_n umber 显示为必填属性，请查看并更新您之前的选择：

      • 可选 MFA，仅限电子邮件用于用户账户恢复消息的传送方式

      • 发送电子邮件，验证要验证的属性的电子邮件地址

    6. 将所有其他选项保留为默认值，然后选择 “下一步”。

  7. 在配置消息传送中，您可以配置与亚马逊简单电子邮件服务和亚马逊简单通知服务的集成，向您的用户发送电子邮件和短信，用于注册、账户确认、MFA 和账户恢复。有关更多信息，请参阅 Amazon Cognito 用户池的电子邮件设置 和 Amazon Cognito 用户池的短信设置。

    1. 对于电子邮件提供商，选择使用 Cognito 发送电子邮件，然后使用 Amazon Cognito 提供的默认电子邮件发件人。此低电子邮件量设置足以进行应用程序测试。在使用亚马逊简单电子邮件服务 (Amazon SES) 验证电子邮件地址并选择 “使用亚马逊 SES 发送电子邮件” 后，您可以返回。

    2. 对于 SMS，请选择创建新的 IAM 角色并输入 I AM 角色名称。这将创建一个向 Amazon Cognito 授予发送短信权限的角色。

    3. 将所有其他选项保留为默认值，然后选择 “下一步”。

  8. 在集成您的应用程序中，您可以命名用户池、配置托管用户界面和创建应用程序客户端。有关更多信息，请参阅 添加带有托管 UI 的应用程序客户端。示例应用程序不使用托管 UI。

    1. 在用户池名称下，输入用户池名称。

    2. 不要选择 “使用 Cognito 托管的用户界面”。

    3. 在 “初始应用程序客户端” 下，确认应用程序类型已设置为 “公共客户端”。

    4. 在 “客户密钥” 下，确认已选中 “不生成客户机密钥”。

    5. 输入应用程序客户端名称。

    6. 展开高级应用程序客户端设置。ALLOW_USER_PASSWORD_AUTH添加到身份验证流程列表中。

    7. 将所有其他选项保留为默认值，然后选择 “下一步”。

  9. 在 “查看并创建” 屏幕中查看您的选择，并根据需要修改任何选择。如果您对用户池配置感到满意，请选择创建用户池以继续。

  10. 在用户池页面中，选择您的新用户池。

  11. 在 “用户池概述” 下，记下您的用户池 ID。在创建示例应用程序时，您将提供此字符串。

  12. 选择 “应用程序集成” 选项卡，然后找到 “应用程序客户端和分析” 部分。选择您的新应用程序客户端。记下您的客户端 ID。

创建应用程序

要构建此应用程序，必须设置开发人员环境。开发人员环境要求是：

  1. Node.js 已安装并更新。

  2. 节点包管理器 (npm) 已安装并更新至至少版本 10.2.3。

  3. 可以在网络浏览器中通过 TCP 端口 5173 访问该环境。

创建示例 React Web 应用程序

  1. 登录您的开发人员环境并导航到应用程序的父目录。

    cd ~/path/to/project/folder/

  2. 创建一个新的 React 服务。

    npm create vite@latest frontend-client -- --template react-ts

  3. 从上的 Amazon 代码示例存储库中克隆cognito-developer-guide-react-example项目文件夹 GitHub。

    cd ~/some/other/path
    git clone https://github.com/awsdocs/aws-doc-sdk-examples.git
    cp -r ./aws-doc-sdk-examples/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example/frontend-client ~/path/to/project/folder/frontend-client

  4. 导航到项目中的src目录。

    cd ~/path/to/project/folder/frontend-client/src

  5. 编辑config.ts并替换以下值：

    1. YOUR_AWS_REGION用 Amazon Web Services 区域 代码替换。例如：us-east-1。

    2. YOUR_COGNITO_USER_POOL_ID替换为您指定用于测试的用户池的 ID。例如：us-east-1_EXAMPLE。用户池必须位于您在 Amazon Web Services 区域 上一步中输入的。

    3. YOUR_COGNITO_APP_CLIENT_ID替换为您指定用于测试的应用程序客户端的 ID。例如：1example23456789。应用程序客户端必须位于上一步中的用户池中。

  6. 如果要从以外的 IP 访问示例应用程序localhost，请编辑该行package.json并将其更改"dev": "vite",为"dev": "vite --host 0.0.0.0",。

  7. 安装您的应用程序。

    npm install

  8. 启动应用程序。

    npm run dev

  9. 在 Web 浏览器中访问该应用程序，网址为http://localhost:5173或http://[IP address]:5173。

  10. 使用有效的电子邮件地址注册新用户。

  11. 从您的电子邮件中检索确认码。在应用程序中输入确认码。

  12. 使用您的用户名和密码登录。

使用 Amazon Lightsail 创建 React 开发者环境

开始使用此应用程序的一种快速方法是使用 Amazon Lightsail 创建虚拟云服务器。

借助 Lightsail，您可以快速创建一个小型服务器实例，该实例已预先配置了此示例应用程序的先决条件。您可以使用基于浏览器的客户端通过 SSH 连接到您的实例，并通过公有或私有 IP 地址连接到 Web 服务器。

为此示例应用程序创建 Lightsail 实例

  1. 前往 Lightsail 控制台。如果出现提示，请输入您的 Amazon 凭据。

  2. 选择创建实例。

  3. 在 “选择平台” 中，选择 Linux/Unix。

  4. 在 “选择蓝图” 中，选择 Node.js。

  5. 在 “识别您的实例” 下，为您的开发环境指定一个友好的名称。

  6. 选择创建实例。

  7. Lightsail 创建您的实例后，将其选中，然后从 “连接” 选项卡中选择 “使用 SSH 连接”。

  8. SSH 会话将在浏览器窗口中打开。运行node -vnpm -v并确认您的实例已配置了 Node.js 且最低的 npm 版本为 10.2.3。

  9. 继续配置你的 React 应用程序。