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 kết, cũng như giao diện người dùng được lưu trữ để xử lý 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:

Chạy generator này@aws/nx-plugin:ts#website#auth

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

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

Xây dựng lệnh của bạn5

projectBắt buộc

cognitoDomain

allowSignup

false

iac

inheritcdkterraform

preferInstallDependencies

true

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

Tùy chọn

Tùy chọn của generator5 tùy chọn

projectBắt buộcstring

Thư mục gốc của website.

cognitoDomainstring

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.

allowSignupbooleanMặc định: false

Có cho phép tự đăng ký hay không

iacenumMặc định: 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.

inheritcdkterraform

preferInstallDependenciesbooleanMặc định: 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ó:

Loading the diagram…

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 ở chế độ thực thi chỉ kiểm toán cho xác thực tiêu chuẩn. Ở chế độ 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á 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), sau đó cấu hình phản hồi cho từng mức độ rủi ro thông qua xác thực thích ứng:

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ị tắt 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 tắt, trong cả CDK và Terraform. Do đó, việc tắt mfaSecondFactor.sms / mfa_second_factor_sms trong khi mfa đang bật cũng sẽ tắt 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ể tắt đ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, StackProps } 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, props?: StackProps) {
    super(scope, id, props);

    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 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 Cấu hình Runtime 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 các URL dev-server cục bộ và preview của mỗi website được kết nối (ví dụ: http://localhost:4200 và http://localhost:4300 cho website đầu tiên được tạo trong workspace) để phát triển cục bộ với pool đã triển khai. Mỗi website được tạo bằng ts#website được gán các cổng riêng biệt, vì vậy một workspace có nhiều website sẽ có nhiều hơn một cặp http://localhost:<port> được cho phép ở đây.

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, StackProps } 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, props?: StackProps) {
    super(scope, id, props);

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