Xác thực Website React

Generator Xác thực Website React thêm 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 cơ sở hạ tầng CDK hoặc Terraform để tạo Cognito User Pool và Identity Pool liên quan, cũng như một hosted UI để xử lý các luồng đăng nhập người dùng, và tích hợp nó 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:

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

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

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ẽ tìm 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 Main authentication component
  • main.tsx Updated to instrument the CognitoAuth component

Cơ sở hạ tầng

Vì generator này cung cấp infrastructure as code dựa trên iac 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 for infrastructure specific to a project/generator

      • …
    • Thư mụccore/ Generic constructs which are reused by constructs in app

      • …
    • index.ts Entry point exporting constructs from app
  • project.json Project build targets and configuration

Generated Project

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 for infrastructure specific to a project/generator

      • …
    • Thư mụccore/ Generic modules which are reused by modules in app

      • …
  • project.json Project build targets and configuration

Generated Project

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ẽ tìm thấy mã cơ sở hạ tầng sau được tạo dựa trên iac bạn đã chọn:

CDK

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

  • Thư mụccore

    • user-identity.ts Construct which defines the user pool and identity pool

Terraform

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

  • Thư mụccore

    • Thư mụcuser-identity

      • main.tf Module wrapper for the identity configuration
      • Thư mụcidentity

        • identity.tf Core identity infrastructure including Cognito User Pool and Identity Pool
      • Thư mụcadd-callback-url

        • add-callback-url.tf Module for adding callback URLs to existing user pool clients

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 hoạt động 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.

Xác thực đa yếu tố (MFA)

Theo mặc định, người dùng phải cấu hình MFA (mã SMS hoặc mật khẩu một lần dựa trên thời gian) trước khi họ có thể đăng nhập. Bạn có thể làm cho MFA là tùy chọn, tắt hoàn toàn hoặc hạn chế các phương thức yếu tố thứ hai có sẵn:

CDK

import { Mfa } from 'aws-cdk-lib/aws-cognito';

new UserIdentity(this, 'Identity', {
  mfa: Mfa.OPTIONAL,
  mfaSecondFactor: { sms: false, otp: true },
});

mfa chấp nhận Mfa.OFF / Mfa.OPTIONAL / Mfa.REQUIRED. mfaSecondFactor.sms và mfaSecondFactor.otp bật hoặc tắt từng phương thức yếu tố thứ hai một cách độc lập; chúng không có hiệu lực khi mfa là Mfa.OFF. Đặt mfa: Mfa.REQUIRED với cả hai phương thức bị vô hiệu hóa sẽ bị từ chối tại thời điểm synth, vì không ai có thể hoàn thành đăng nhập.

Terraform

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

  mfa = "OPTIONAL"
  mfa_second_factor_sms = false
  mfa_second_factor_otp = true
}

mfa chấp nhận "OFF" / "OPTIONAL" / "ON". mfa_second_factor_sms và mfa_second_factor_otp bật hoặc tắt từng phương thức yếu tố thứ hai một cách độc lập; chúng không có hiệu lực khi mfa là "OFF".

SMS MFA được liên kết với xác minh số điện thoại

Cognito từ chối xác minh số điện thoại dựa trên SMS trừ khi SMS cũng là một phương thức MFA được bật bất cứ khi nào MFA không bị tắt, trong cả CDK và Terraform. Do đó, việc vô hiệu hóa mfaSecondFactor.sms / mfa_second_factor_sms trong khi mfa đang bật cũng vô hiệu hóa xác minh số điện thoại dựa trên SMS cho user pool.

Web Application Firewall (WAF)

Theo mặc định, User Pool được liên kết với một 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ể vô hiệu hóa điều 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
}

EC2MetaDataSSRF_QUERYARGUMENTS được đặt thành Count

Quy tắc này đánh dấu các địa chỉ loopback trong tham số truy vấn là các nỗ lực SSRF, điều này sẽ chặn đăng nhập cục bộ vì Hosted UI nhận một redirect_uri là localhost. Do đó, nó được đặt thành Count trong khi các URL callback cục bộ được cấu hình — các kết quả khớp vẫn được ghi lại và mọi quy tắc khác đều chặn. Xóa các URL callback cục bộ để khôi phục nó về Block.

Sử dụng Cơ sở hạ tầng

CDK

Bạn sẽ cần thêm cơ sở 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 Runtime Configuration cần thiết để đảm bảo rằng website của bạn có thể trỏ đến Cognito User Pool chính xác để xác thực.

Giữ lại vai trò SMS

User Pool được hỗ trợ bởi một vai trò IAM mà Cognito đảm nhận để gửi tin nhắn SMS. Chính sách xóa của vai trò phản ánh User Pool — theo mặc định, UserPool của CDK sử dụng RemovalPolicy.RETAIN, vì vậy khi 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.

Terraform

Bạn sẽ 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 Runtime Configuration cần thiết để đảm bảo rằng website của bạn có thể trỏ đến Cognito User Pool chính xác để xác thực.

Xóa URL callback localhost cho môi trường production

User Pool client được tạo cho phép URL phân phối CloudFront của bạn (và bất kỳ tên miền tùy chỉnh nào được cấu hình trên đó) làm URL callback/logout OAuth, 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 URL callback/logout http://localhost cho các giai đoạn production, giữ danh sách cho phép giới hạn ở các nguồn gốc ứng dụng thực của bạn.

CDK

Chỉnh sửa các URL callback/logout 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 truy cập để 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 chính sách IAM 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', {
      integrations: MyApi.defaultIntegrations(this).build(),
    });

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