Kiểm tra với Front-end

Trong phần này, chúng ta sẽ cập nhật ứng dụng front-end để trỏ đến các API endpoint mới và kiểm tra toàn bộ luồng xác thực: Đăng ký → Xác nhận email → Đăng nhập.

Bước 1 — Lấy Invoke URL từ API Gateway

  • Mở API Gateway console.

    • Xác nhận fcaj-serverless-api xuất hiện trong danh sách.

      API Gateway - fcaj-serverless-api

    • Nhấp vào fcaj-serverless-api.

    • Nhấp vào Stages trên menu bên trái.

    • Chọn stage staging.

    • Sao chép Invoke URL (ví dụ: https://4elf7x274m.execute-api.ap-southeast-1.amazonaws.com/staging).

      API Gateway Stages - Invoke URL

Bước 2 — Cập nhật config.js với Invoke URL

  • Mở project front-end FCAJ_Workshop-Serverless trong code editor.

  • Điều hướng đến file src/config.js.

  • Thay giá trị APP_API_URL bằng Invoke URL bạn đã sao chép ở Bước 1.

    export default {
  APP_API_URL: "https://4elf7x274m.execute-api.ap-southeast-1.amazonaws.com/staging",
  DEFAULT_REGION: "ap-southeast-1"
};

    Cập nhật APP_API_URL trong config.js

Bước 3 — Build lại và Deploy Front-end

  • Trong terminal, điều hướng đến thư mục FCAJ_Workshop-Serverless và chạy các lệnh sau.

    npm run build
aws s3 rm s3://fcaj-book-shop-by-tranvix --recursive
aws s3 cp build s3://fcaj-book-shop-by-tranvix --recursive

    Chúng ta trước tiên xóa tất cả file cũ trong S3 bucket bằng aws s3 rm --recursive, sau đó upload build mới. Điều này đảm bảo không còn file cũ từ lần deploy trước.

    Kết quả npm run build

    Kết quả aws s3 rm và aws s3 cp

Bước 4 — Lấy S3 Website Endpoint

  • Mở Amazon S3 Console và tìm bucket của bạn.

    S3 Console - fcaj-book-shop-by-tranvix

  • Nhấp vào tên bucket. Xác nhận tất cả 9 object đã được upload thành công, sau đó nhấp tab Properties.

    S3 bucket Objects và tab Properties

  • Cuộn xuống phần Static website hosting và sao chép URL Bucket website endpoint.

    S3 static website endpoint

Bước 5 — Kiểm tra luồng Đăng ký

  • Mở URL Bucket website endpoint trong trình duyệt. Ứng dụng FCJ Book Store sẽ xuất hiện.

    • Nhấp vào Register ở góc trên bên phải.

      FCJ Book Store - nhấp Register

  • Tại trang FCJ Book Store - Register:

    • Nhập địa chỉ Email của bạn.

    • Nhập Password (phải đáp ứng chính sách của Cognito: tối thiểu 8 ký tự).

    • Nhập lại password vào Confirm password.

    • Nhấp Register.

    • Sử dụng địa chỉ email thực mà bạn có thể truy cập. Cognito sẽ tự động gửi mã xác nhận đến email này.

      Form đăng ký - điền thông tin và nhấp Register

  • Sau khi nhấp Register, bạn sẽ được chuyển hướng đến trang Verify Email.

    Trang Verify Email

  • Mở hộp thư email của bạn và tìm email từ no-reply@verificationemail.com với tiêu đề “Your verification code”. Sao chép mã 6 chữ số.

    Gmail - email xác nhận từ Cognito

  • Quay lại trang Verify Email:

    • Nhập mã xác nhận.

    • Nhấp Submit.

      Verify Email - nhập mã và nhấp Submit

Bước 6 — Kiểm tra luồng Đăng nhập

  • Sau khi xác nhận email, bạn sẽ được chuyển hướng đến trang FCJ Book Store - Login.

    • Nhập Email và Password của bạn.

    • Nhấp Submit.

      Form đăng nhập - nhập thông tin và nhấp Submit

  • Sau khi đăng nhập thành công, thanh điều hướng sẽ hiển thị thêm các tùy chọn: Create new book, Management và Orders — xác nhận rằng xác thực đang hoạt động từ đầu đến cuối.

    FCJ Book Store - đã đăng nhập với đầy đủ điều hướng

Chúc mừng! Bạn đã tích hợp thành công xác thực Amazon Cognito vào ứng dụng FCJ Book Store sử dụng API Gateway và Lambda function. Toàn bộ luồng — Đăng ký, Xác nhận email và Đăng nhập — hiện đang hoạt động chính xác.