Tích hợp xác thực người dùng an toàn với AWS Cognito và Angular

Giới thiệu về xác thực với AWS Cognito và Angular

Việc xây dựng một hệ thống quản lý người dùng và xác thực bảo mật là nền tảng cho bất kỳ ứng dụng hiện đại nào. Khi kết hợp sức mạnh của AWS Cognito cho quản lý danh tính với khung ứng dụng web Angular, các nhà phát triển có thể tạo ra các giải pháp xác thực mạnh mẽ, có khả năng mở rộng và dễ dàng triển khai. Hướng dẫn này sẽ chỉ ra cách nhanh chóng tích hợp các tính năng đăng ký, đăng nhập và quản lý phiên người dùng vào ứng dụng Angular của bạn.

Tại sao chọn AWS Cognito kết hợp với Angular?

AWS Cognito cung cấp một bộ dịch vụ quản lý danh tính toàn diện, bao gồm các nhóm người dùng (User Pools) để quản lý đăng ký và đăng nhập, cùng với các nhóm danh tính (Identity Pools) để ủy quyền truy cập vào các tài nguyên AWS khác. Khi được kết hợp với Angular, một framework mạnh mẽ cho các ứng dụng một trang (SPA), bạn sẽ có được nhiều lợi ích:

  • Phát triển nhanh chóng: Dễ dàng triển khai các luồng xác thực tiêu chuẩn như đăng ký, đăng nhập và đặt lại mật khẩu.
  • Bảo mật mạnh mẽ: Hỗ trợ xác thực đa yếu tố (MFA), mã hóa dữ liệu và tuân thủ các tiêu chuẩn bảo mật.
  • Khả năng mở rộng: Xử lý hàng triệu người dùng mà không cần lo lắng về hạ tầng máy chủ.
  • Tích hợp bên thứ ba: Hỗ trợ xác thực qua các nhà cung cấp như Google, Facebook, Amazon, và Apple.
  • Kiến trúc Serverless: Xây dựng hệ thống xác thực hoàn toàn phi máy chủ, giảm chi phí vận hành.

Chuẩn bị môi trường phát triển

Trước khi bắt đầu, hãy đảm bảo rằng bạn đã cài đặt các công cụ sau trên máy:

  • Node.js (kèm theo npm)
  • Angular CLI
  • AWS CLI
  • Git

Các bước thiết lập dự án ban đầu

Để nhanh chóng bắt đầu, bạn có thể tạo một dự án Angular mới và tích hợp các thư viện AWS:

1. Tạo dự án Angular và cài đặt thư viện

Sử dụng Angular CLI để tạo một ứng dụng mới và sau đó cài đặt các thư viện cần thiết cho AWS Amplify (thư viện client-side được khuyên dùng để tương tác với Cognito):

ng new ten-ung-dung-cognito --routing --style=scss
cd ten-ung-dung-cognito
npm install aws-amplify aws-amplify-angular

2. Cài đặt các thư viện phụ thuộc khác (nếu cần)

Nếu dự án của bạn có các thư viện phụ thuộc khác, chạy lệnh sau để cài đặt chúng:

npm install

3. Khởi chạy ứng dụng cục bộ

Sử dụng Angular CLI để khởi động máy chủ phát triển:

npm start

Ứng dụng sẽ khả dụng tại địa chỉ http://localhost:4200 (hoặc một cổng khác tùy cấu hình mặc định của Angular CLI).

Cấu hình tài nguyên AWS

Bạn cần cấu hình tài nguyên AWS Cognito. Quá trình này có thể được thực hiện thủ công qua AWS Console hoặc tự động thông qua AWS Amplify CLI.

Tạo tài nguyên AWS tự động với AWS Amplify CLI

AWS Amplify CLI giúp bạn dễ dàng thiết lập các dịch vụ backend, bao gồm xác thực. Từ thư mục gốc của dự án Angular, chạy các lệnh sau:

amplify add auth
amplify push

Các lệnh này sẽ hướng dẫn bạn thiết lập một User Pool và Identity Pool với các cấu hình mong muốn.

Cấu hình biến môi trường thủ công

Sau khi tạo User Pool và Identity Pool (dù bằng Amplify CLI hay qua AWS Console), bạn sẽ nhận được các ID cần thiết. Cấu hình chúng trong file môi trường của Angular, ví dụ src/environments/environment.ts:

export const appConfiguration = {
  production: false,
  awsConfig: {
    region: 'ap-southeast-1', // Thay thế bằng khu vực AWS của bạn (ví dụ: us-east-1, ap-southeast-1)
    userPoolId: 'ap-southeast-1_xxxxxxxxX', // ID User Pool của bạn
    appClientId: 'yyyyyyyyyyyyyyy',      // Client ID ứng dụng của bạn
    identityPoolId: 'ap-southeast-1:zzzzzzzz-zzzz-zzzz-zzzz-zzzzzzzzzzzz' // ID Identity Pool
  }
};

Đảm bảo sử dụng các giá trị chính xác cho môi trường sản xuất trong src/environments/environment.prod.ts và không lưu trữ thông tin nhạy cảm trực tiếp trong mã nguồn.

Các thành phần xác thực chính

Một ứng dụng Angular tích hợp Cognito thường sẽ có các thành phần (component) riêng biệt cho từng chức năng xác thực:

  • Đăng nhập: Component xử lý thông tin đăng nhập của người dùng và gọi API Cognito.
  • Đăng ký: Component cho phép người dùng mới tạo tài khoản và xác minh email/điện thoại.
  • Quên mật khẩu: Component để đặt lại mật khẩu thông qua email hoặc số điện thoại.
  • Xác thực đa yếu tố (MFA): Component để xử lý các bước xác thực phụ như nhập mã OTP.

Các component này sẽ sử dụng AWS Amplify Client SDK để tương tác với AWS Cognito và quản lý trạng thái xác thực trong ứng dụng Angular.

Triển khai ứng dụng Angular

Sau khi phát triển và kiểm thử, bạn có thể triển khai ứng dụng Angular của mình lên AWS.

Triển khai lên Amazon S3 (cho ứng dụng tĩnh)

Đây là phương pháp phổ biến và tiết kiệm chi phí cho các SPA. Đầu tiên, xây dựng ứng dụng của bạn cho môi trường sản xuất, sau đó đồng bộ hóa các tệp đã biên dịch lên S3 bucket:

npm run build --prod
aws s3 sync dist/ten-ung-dung-cognito s3://[TEN_S3_BUCKET_CUA_BAN]/ --delete

Đảm bảo bucket S3 của bạn được cấu hình để phục vụ nội dung web tĩnh và cho phép truy cập công khai nếu cần.

Triển khai lên AWS Elastic Beanstalk (cho ứng dụng có backend hoặc phức tạp hơn)

Nếu ứng dụng Angular của bạn tích hợp chặt chẽ với một backend Node.js hoặc yêu cầu một môi trường máy chủ hoàn chỉnh, Elastic Beanstalk là một lựa chọn tốt:

git add .
git commit -m "Phiên bản sẵn sàng triển khai lên Beanstalk"
eb deploy
eb open

Bạn sẽ cần có AWS Elastic Beanstalk CLI được cấu hình và một môi trường Beanstalk đã được tạo.

Lưu ý quan trọng

  • Luôn sử dụng cấu hình môi trường sản xuất (environment.prod.ts) khi triển khai thực tế và tránh đưa các khóa truy cập AWS vào mã nguồn client-side.
  • Việc tạo và sử dụng các tài nguyên AWS có thể phát sinh chi phí. Hãy kiểm tra bảng giá AWS Cognito và các dịch vụ liên quan để hiểu rõ về chi phí.
  • Tham khảo tài liệu chính thức của AWS Amplify để có hướng dẫn chi tiết về việc tích hợp sâu hơn, quản lý phiên và xử lý các trường hợp nâng cao.

Thẻ: AWS Cognito angular Xác thực Quản lý người dùng AWS Amplify

Đăng vào ngày 23 tháng 9 lúc 23:07

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn