Triển khai và kiểm tra Cognito Cross Sites

Cài Đặt Môi Trường Cognito

  1. Tạo file app/.env.local cho app1 và app2 với nội dung sau:
REACT_APP_USERPOOL_ID=YOUR_USER_POOL_ID
REACT_APP_CLIENT_ID=YOUR_CLIENT_ID

Cognito

  1. Sử dụng Create React App để thiết lập quy trình phát triển:
    • Các bước tiếp theo sẽ quen thuộc.
  2. Cài đặt và khởi chạy web1 trên cổng 3000:
cd app
npm install --force
npm start

Lưu ý: Đối với MacBook, điều chỉnh file package.json trong thư mục app như sau:

"scripts": {
  "start": "PORT=3000 && react-scripts start",
  ...
},

Cognito

  1. Cài đặt và khởi chạy web2:
cd app2
npm install --force
npm start

Cognito

  1. Sau khi khởi tạo ứng dụng web 1. Bạn truy cập vào web1 qua localhost:3000

    • Sau đó, bạn thực hiện đăng nhập, chọn SIGN IN WEB1

Cognito

  1. Trong giao diện đăng nhập vào web1 , nếu bạn chưa có tài khoản thì chọn Register a new account. Nếu đã có tài khoản thì điền đầy đủ thông tin và chọn SIGN IN

Cognito

  1. Đăng nhập thành công, giao diện giống như hình.

Cognito

  1. Sau đó truy cập vào web2 qua địa chỉ localhost:3001

    • Bạn sẽ bất ngờ vì không cần đăng nhập vào thấy giao diện web2.

Cognito

  1. Quay lại giao diện web1 và thực hiện đăng xuất bằng cách chọn SIGN OUT WEB1

Cognito

  1. Bạn thực hiện tải lại trang web2 thì không xem được giao diện web2 nữa.

Cognito