使用亚马逊 Cognito 和 Ampli AWS fy 用户界面对现有 React 应用程序用户进行身份验证 - AWS Prescriptive Guidance
摘要先决条件和限制架构工具最佳实践操作说明故障排除相关资源其他信息

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

使用亚马逊 Cognito 和 Ampli AWS fy 用户界面对现有 React 应用程序用户进行身份验证

由 Daniel Kozhemyako 创作 () AWS

摘要

此模式展示了如何使用 AWS Amplify用户界面库和 Amazon Cognito 用户池向现有的前端 React 应用程序添加身份验证功能。

该模式使用 Amazon Cognito 为应用程序提供身份验证、授权和用户管理。它还使用 A mplify UI 中的组件，这是一个开源库，可将的功能扩展 AWS Amplify 到用户界面 (UI) 开发。Authenticator UI 组件管理登录会话，并运行连接云的工作流程，通过 Amazon Cognito 对用户进行身份验证。

实现此模式后，用户可使用以下任何凭证登录：

  • 用户名和密码

  • 社交身份提供商，例如 Apple、Facebook、Google 和 Amazon

  • 兼容 SAML 2.0 或兼容 OpenID Connect () OIDC 的企业身份提供商

注意

要创建自定义身份验证 UI 组件，可以在无头模式下运行 Authenticator UI 组件。

先决条件和限制

先决条件

限制

  • 此模式仅适用于 React Web 应用程序。

  • 此模式使用预先构建的 Amplify UI 组件。该解决方案不包括实现自定义 UI 组件所需步骤。

产品版本

  • Amplify UI 6.1.3 或更高版本（第 1 代）

  • Amplify 6.0.16 或更高版本（第 1 代）

架构

目标架构

下图显示了一种架构，该架构使用 Amazon Cognito 对 React 网络应用程序的用户进行身份验证。

Amazon Cognito 对 React 网络应用程序的用户进行身份验证。

工具

AWS 服务

  • Amazon Cognito 为您的 Web 和移动应用程序提供身份验证、授权和用户管理。

其他工具

  • Amplify UI 是一个开源用户界面库，它提供了可以连接到云端的可自定义组件。

  • Node.js 是一个事件驱动的 JavaScript 运行时环境，专为构建可扩展的网络应用程序而设计。

  • npm 是在 Node.js 环境中运行的软件注册表，用于共享或借用软件包以及管理私有软件包的部署。

最佳实践

如果您正在构建新应用程序，我们建议您使用第二代 Amplify。

操作说明

任务描述所需技能

创建用户池。

创建 Amazon Cognito 用户池。配置用户池的登录选项和安全要求以适应您的用例。

应用程序开发人员

添加应用程序客户端。

配置用户池应用程序客户端。您的应用程序需要使用此客户端才能与 Amazon Cognito 用户池进行交互。

应用程序开发人员
任务描述所需技能

安装依赖项。

要安装 aws-amplify 和 @aws-amplify/ui-react 软件包，请从应用程序的根目录运行以下命令：

npm i @aws-amplify/ui-react aws-amplify
应用程序开发人员

配置用户池。

根据以下示例，创建一个aws-exports.js文件并保存在该src文件夹中。该文件应包含以下信息：

  • AWS 区域 你的 Amazon Cognito 用户池所在的

  • 亚马逊 Cognito 用户池 ID

  • 应用程序客户端 ID

// replace the user pool region, id, and app client id details
const awsmobile = {
    "aws_project_region": "put_your_region_here",
    "aws_cognito_region": "put_your_region_here",
    "aws_user_pools_id": "put_your_user_pool_id_here",
    "aws_user_pools_web_client_id": "put_your_user_pool_app_id_here"
}

export default awsmobile;
应用程序开发人员

导入与配置 Amplify 服务。

  1. 在应用程序的入口点文件（例如App.js）中，通过输入以下代码行来导入和加载该aws-exports.js文件：

    import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';

  2. 根据以下示例，使用文件配置 Amplify 客户端：aws-exports.js

    // Configure Amplify in index file or root file
Amplify.configure({ ...awsExports });

    有关更多信息，请参阅 Amplify 文档中的配置 Amplify 类别。

应用程序开发人员

添加身份验证器 UI 组件。

若要显示 Authenticator UI 组件，请在应用程序的入口点文件 (App.js) 中添加以下代码行：

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
注意

示例代码片段导入了Authenticator用户界面组件和 Amplify UI styles.css 文件，这是使用该组件的预构建主题时所必需的。

U Authenticator I 组件提供两个返回值：

  • 用户详情

  • 一个可以调用以注销用户的函数

请参见以下示例组件：

function App() {
    return (
        <Authenticator>
            {({ signOut, user }) => (
                <div>
                    <p>Welcome {user.username}</p>
                    <button onClick={signOut}>Sign out</button>
                </div>
            )}
        </Authenticator>
    );
}
注意

有关示例App.js文件，请参阅此模式的 “其他信息” 部分。

应用程序开发人员

（可选）检索会话信息。

用户通过身份验证后，您可从 Amplify 客户端检索有关其会话的数据。例如，您可以从用户的会话中检索 JSON Web 令牌 (JWT)，以便可以对来自其会话到后端的请求进行身份验证API。

参见以下请求标头示例，其中包含JWT：

import { fetchAuthSession } from 'aws-amplify/auth';
(await fetchAuthSession()).tokens?.idToken?.toString();
应用程序开发人员

故障排除

事务解决方案

新用户无法注册此应用程序。

如下所示，请确保您的 Amazon Cognito 用户池已配置为允许用户注册加入用户池：

  • 登录 AWS Management Console，然后打开 Amazon Cognito 控制台。

  • 在左侧导航窗格中，选择用户池。

  • 从列表中选择您的用户池。

  • 在常规设置下，选择策略。

  • 选择允许用户自己注册。

从 v5 升级到 v6 后，身份验证组件停止运行。

该Auth类别已移至函数方法，并在 Amplify v6 中命名了参数。现在，必须APIs直接从aws-amplify/auth路径导入函数。有关更多信息，请参阅 Amplify 文档中的从 v5 迁移到 v6。

相关资源

其他信息

该App.js文件应包含以下代码：

import './App.css';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
import { fetchAuthSession } from 'aws-amplify/auth';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
Amplify.configure({ ...awsExports });
let token = (await fetchAuthSession()).tokens?.idToken?.toString();
function App() {
  return (
      <Authenticator>
        {({ signOut, user }) => (
            <div>
              <p>Welcome {user.username}</p>
                <p>Your token is: {token}</p>
              <button onClick={signOut}>Sign out</button>
            </div>
        )}
      </Authenticator>
  );
}

export default App;