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. Cài đặt Nx Console VSCode Plugin nếu bạn chưa cài đặt
2. Mở Nx Console trong VSCode
3. Nhấp Generate (UI) trong phần "Common Nx Commands"
4. Tìm kiếm @aws/nx-plugin - ts#website#auth
5. Điền các tham số bắt buộc
6. Nhấp Generate

CLI

pnpm

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

yarn

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

npm

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

bun

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

Bạn cũng có thể thực hiện chạy thử để xem những tệp nào sẽ bị thay đổi

pnpm

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

yarn

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

npm

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

bun

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

Tùy chọn

Tham số	Kiểu	Mặc định	Mô tả
project Bắt buộc	string	-	Thư mục gốc của website.
cognitoDomain	string	-	Tiền tố domain Cognito sẽ sử dụng. Nếu bỏ qua, giá trị sẽ được lấy từ npm scope và tên dự án website.
allowSignup	boolean		Có cho phép tự đăng ký hay không
iac	inherit | cdk | terraform	inherit	Nhà cung cấp IaC ưa thích. Mặc định giá trị này được kế thừa từ lựa chọn ban đầu của bạn.
preferInstallDependencies	boolean	true	Có nên cài đặt các dependencies sau khi generator chạy hay không. Đặt thành false để hoãn việc cài đặt khi chạy nhiều generator liên tiếp (việc cài đặt vẫn sẽ chạy nếu cần thiết để các generator tiếp theo có thể tính toán Nx project graph); cài đặt một lần vào cuối.

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

Dự án được tạo

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

Dự án được tạo

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ó

Kiến trúc

Generator này thêm một Amazon Cognito user pool (để đăng nhập) và một identity pool (để liên kết người dùng đã đăng nhập với thông tin xác thực IAM có phạm vi) vào kiến trúc static-website hiện có:

Bảo vệ khỏi mối đe dọa

User Pool được tạo trên gói tính năng Plus của Cognito với bảo vệ khỏi mối đe dọa được đặt ở chế độ AUDIT cho xác thực tiêu chuẩn. Ở chế độ kiểm toán, Cognito gán một mức độ rủi ro cho mỗi lần đăng nhập và ghi lại đánh giá vào CloudWatch mà không chặn người dùng.

Sau khi bạn đã quan sát các đánh giá rủi ro cho người dùng của mình, bạn có thể chuyển sang chế độ thực thi đầy đủ chức năng để tự động phản hồi các hoạt động có rủi ro (ví dụ: yêu cầu MFA hoặc chặn đăng nhập):

CDK

Đặt standardThreatProtectionMode thành StandardThreatProtectionMode.FULL_FUNCTION trong packages/common/constructs/src/core/user-identity.ts.

Terraform

Đặt advanced_security_mode thành ENFORCED trong khối user_pool_add_ons trong packages/common/terraform/src/core/user-identity/identity/identity.tf.

Web Application Firewall (WAF)

Theo mặc định, User Pool được liên kết với AWS WAFv2 Web ACL sử dụng các nhóm quy tắc được quản lý AWSManagedRulesCommonRuleSet và AWSManagedRulesKnownBadInputsRuleSet. Bạn có thể tắt tính năng này nếu muốn quản lý Web ACL của riêng mình hoặc không yêu cầu:

CDK

new UserIdentity(this, 'Identity', { enableWaf: false });

Terraform

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

  enable_waf = false
}

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.

Giữ lại vai trò SMS

User Pool được hỗ trợ bởi một vai trò IAM mà Cognito sử dụng để gửi tin nhắn SMS. Chính sách xóa của vai trò này phản ánh chính sách của User Pool — theo mặc định UserPool của CDK sử dụng RemovalPolicy.RETAIN, vì vậy khi chạy cdk destroy, cả User Pool và vai trò SMS của nó đều được giữ lại và sẽ cần được dọn dẹp thủ công nếu không còn cần thiết nữa.

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.

Xóa localhost callback URLs cho production

User Pool client được tạo cho phép URL phân phối CloudFront của bạn làm OAuth callback/logout URL, cộng với http://localhost:4200 và http://localhost:4300 để phát triển cục bộ với pool đã triển khai.

Khuyến nghị xóa các http://localhost callback/logout URLs cho các stage production, giữ danh sách cho phép chỉ giới hạn ở các origin ứng dụng thực của bạn.

CDK

Chỉnh sửa callback/logout URLs trong packages/common/constructs/src/core/user-identity.ts.

Terraform

Chỉnh sửa callback_urls/logout_urls trong packages/common/terraform/src/core/user-identity/identity/identity.tf.

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 "asset_bucket" {
  source = "../../common/terraform/src/core/asset-bucket"
}

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

  asset_bucket_name = module.asset_bucket.bucket_name
}

# 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}/*"
      }
    ]
  })
}