跳转到内容
@aws/nx-plugin
Blog

React 网站身份验证

React 网站身份验证生成器使用 Amazon Cognito 为您的 React 网站添加身份验证功能。

该生成器会配置 CDK 或 Terraform 基础设施，用于创建 Cognito 用户池及关联的身份池、处理用户登录流程的托管 UI，以及与 React 网站的集成。

使用方式

Section titled “使用方式”

为 React 网站添加身份验证

Section titled “为 React 网站添加身份验证”

您可以通过两种方式为 React 网站添加身份验证：

  1. 安装 Nx Console VSCode Plugin 如果您尚未安装
  2. 在VSCode中打开Nx控制台
  3. 点击 Generate (UI) 在"Common Nx Commands"部分
  4. 搜索 @aws/nx-plugin - ts#react-website#auth
  5. 填写必需参数
    • 点击 Generate

    选项参数

    Section titled “选项参数”
    参数 类型 默认值 描述
    project 必需 string - The root directory of the React website.
    cognitoDomain 必需 string - The cognito domain prefix to use
    allowSignup boolean Whether to allow self-signup
    iacProvider string Inherit The preferred IaC provider. By default this is inherited from your initial selection.

    生成器输出

    Section titled “生成器输出”

    您将在 React 网站中看到以下变更：

    • 文件夹src
      • 文件夹components
        • 文件夹CognitoAuth
          • index.tsx 主身份验证组件
      • main.tsx 更新以集成 CognitoAuth 组件

    基础设施

    Section titled “基础设施”

    由于该生成器会根据您选择的 iacProvider 以基础设施即代码的形式输出，它将在 packages/common 目录下创建一个包含相关 CDK 构造体或 Terraform 模块的项目。

    通用的基础设施即代码项目结构如下：

    • 文件夹packages/common/constructs
      • 文件夹src
        • 文件夹app/ 针对特定项目/生成器的基础设施构造体
          • …
        • 文件夹core/ 被 app 目录构造体重用的通用构造体
          • …
        • index.ts 导出 app 目录构造体的入口文件
      • project.json 项目构建目标与配置

    根据您选择的 iacProvider，您还将看到以下生成的基础设施代码：

    • 文件夹packages/common/constructs/src
      • 文件夹core
        • user-identity.ts 定义用户池和身份池的构造器

    基础设施使用

    Section titled “基础设施使用”

    您需要在堆栈中添加用户身份基础设施，并确保在网站构造器之前声明：

    packages/infra/src/stacks/application-stack.ts
    import { Stack } from 'aws-cdk-lib';
    import { Construct } from 'constructs';
    import { MyWebsite, UserIdentity } from ':my-scope/common-constructs';
    

    export class ApplicationStack extends Stack {
      constructor(scope: Construct, id: string) {
        super(scope, id);
    

        new UserIdentity(this, 'Identity');
    

        new MyWebsite(this, 'MyWebsite');
      }
    }

    UserIdentity 构造器会自动添加必要的 运行时配置，确保您的网站能正确指向 Cognito 用户池进行身份验证。

    授予认证用户访问权限

    Section titled “授予认证用户访问权限”

    要为认证用户授予执行特定操作的权限（例如允许调用 API），可以向身份池的认证角色添加 IAM 策略声明：

    packages/infra/src/stacks/application-stack.ts
    import { Stack } from 'aws-cdk-lib';
    import { Construct } from 'constructs';
    import { MyWebsite, UserIdentity, MyApi } from ':my-scope/common-constructs';
    

    export class ApplicationStack extends Stack {
      constructor(scope: Construct, id: string) {
        super(scope, id);
    

        const identity = new UserIdentity(this, 'Identity');
        const api = new MyApi(this, 'MyApi');
    

        api.grantInvokeAccess(identity.identityPool.authenticatedRole);
    

        new MyWebsite(this, 'MyWebsite');
      }
    }