Xác thực Website React

Generator Xác thực Website React thêm tính năng xác thực vào website React của bạn bằng cách sử dụng Amazon Cognito.

Generator này cấu hình hạ tầng CDK hoặc Terraform để tạo Cognito User Pool và Identity Pool liên quan, cũng như giao diện người dùng được lưu trữ để xử lý luồng đăng nhập của người dùng và tích hợp với website React của bạn.

Cách sử dụng

Thêm Xác thực vào Website React của bạn

Bạn có thể thêm xác thực vào website React của mình theo hai cách:

VSCode

1. Install the Nx Console VSCode Plugin if you haven't already
2. Open the Nx Console in VSCode
3. Click Generate (UI) in the "Common Nx Commands" section
4. Search for @aws/nx-plugin - ts#react-website#auth
5. Fill in the required parameters
6. Click Generate

CLI

pnpm

pnpm nx g @aws/nx-plugin:ts#react-website#auth

yarn

yarn nx g @aws/nx-plugin:ts#react-website#auth

npm

npx nx g @aws/nx-plugin:ts#react-website#auth

bun

bunx nx g @aws/nx-plugin:ts#react-website#auth

You can also perform a dry-run to see what files would be changed

pnpm

pnpm nx g @aws/nx-plugin:ts#react-website#auth --dry-run

yarn

yarn nx g @aws/nx-plugin:ts#react-website#auth --dry-run

npm

npx nx g @aws/nx-plugin:ts#react-website#auth --dry-run

bun

bunx nx g @aws/nx-plugin:ts#react-website#auth --dry-run

Tùy chọn

Parameter	Type	Default	Description
project Required	string	-	The root directory of the React website.
cognitoDomain Required	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.

Kết quả của Generator

Bạn sẽ thấy các thay đổi sau trong website React của mình:

• Thư mụcsrc

  • Thư mụccomponents

    • Thư mụcCognitoAuth

      • index.tsx Component xác thực chính
  • main.tsx Được cập nhật để tích hợp component CognitoAuth

Hạ tầng

Vì generator này cung cấp infrastructure as code dựa trên iacProvider bạn đã chọn, nó sẽ tạo một dự án trong packages/common bao gồm các CDK constructs hoặc Terraform modules liên quan.

Dự án infrastructure as code chung được cấu trúc như sau:

CDK

• Thư mụcpackages/common/constructs

  • Thư mụcsrc

    • Thư mụcapp/ Constructs cho infrastructure cụ thể của một dự án/generator

      • …
    • Thư mụccore/ Constructs chung được tái sử dụng bởi các constructs trong app

      • …
    • index.ts Entry point xuất các constructs từ app
  • project.json Các build targets và cấu hình của dự án

Ghi chú

Dự án này được tạo bằng generator ts#project và do đó cấu hình các build targets giống nhau.

Terraform

• Thư mụcpackages/common/terraform

  • Thư mụcsrc

    • Thư mụcapp/ Terraform modules cho infrastructure cụ thể của một dự án/generator

      • …
    • Thư mụccore/ Modules chung được tái sử dụng bởi các modules trong app

      • …
  • project.json Các build targets và cấu hình của dự án

Ghi chú

Dự án này được tạo bằng generator terraform#project và do đó cấu hình các build targets giống nhau.

Bạn cũng sẽ thấy mã hạ tầng sau được tạo dựa trên iacProvider bạn đã chọn:

CDK

• Thư mụcpackages/common/constructs/src

  • Thư mụccore

    • user-identity.ts Construct định nghĩa user pool và identity pool

Terraform

• Thư mụcpackages/common/terraform/src

  • Thư mụccore

    • Thư mụcuser-identity

      • main.tf Module wrapper cho cấu hình identity
      • Thư mụcidentity

        • identity.tf Hạ tầng identity cốt lõi bao gồm Cognito User Pool và Identity Pool
      • Thư mụcadd-callback-url

        • add-callback-url.tf Module để thêm callback URLs vào user pool clients hiện có

Sử dụng Hạ tầng

CDK

Bạn cần thêm hạ tầng user identity vào stack của mình, khai báo nó trước website:

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');
  }
}

Construct UserIdentity tự động thêm Cấu hình Runtime cần thiết để đảm bảo rằng website của bạn có thể trỏ đến đúng Cognito User Pool cho xác thực.

Terraform

Bạn cần thêm module user identity và đảm bảo website của bạn phụ thuộc vào nó:

packages/infra/src/main.tf

# Deploy user identity first to add to runtime config
module "user_identity" {
  source = "../../common/terraform/src/core/user-identity"
}

# Deploy website after identity to include runtime config
module "my_website" {
  source = "../../common/terraform/src/app/static-websites/my-website"

  providers = {
    aws.us_east_1 = aws.us_east_1
  }

  # Ensure identity is deployed first to add to runtime config
  depends_on = [module.user_identity]
}

Module user identity tự động thêm Cấu hình Runtime cần thiết để đảm bảo rằng website của bạn có thể trỏ đến đúng Cognito User Pool cho xác thực.

Cấp Quyền Truy cập cho Người dùng Đã xác thực

Để cấp cho người dùng đã xác thực quyền thực hiện các hành động nhất định, chẳng hạn như cấp quyền gọi API, bạn có thể thêm các câu lệnh IAM policy vào vai trò đã xác thực của identity pool:

CDK

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');
  }
}

Terraform

packages/infra/src/main.tf

module "user_identity" {
  source = "../../common/terraform/src/core/user-identity"
}

module "my_api" {
  source = "../../common/terraform/src/app/apis/my-api"
}

# Add permissions for authenticated users to invoke Fast API
resource "aws_iam_role_policy" "authenticated_fast_api_invoke" {
  name = "authenticated-user-invoke-my-api"
  role = module.user_identity.authenticated_role_name

  policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Effect = "Allow"
        Action = [
          "execute-api:Invoke"
        ]
        Resource = "${module.my_api.api_execution_arn}/*"
      }
    ]
  })
}