Trong mô-đun này, bạn sẽ tạo nhóm người dùng Amazon Cognito để quản lý tài khoản của người dùng. Bạn sẽ triển khai các trang cho phép khách hàng đăng ký làm người dùng mới, xác minh địa chỉ email của họ và đăng nhập vào trang web.

Serverless_Web_App_LP_assets-03

Khi người dùng truy cập trang web của bạn, trước tiên họ sẽ đăng ký tài khoản người dùng mới. Nhằm mục đích của hội thảo này, chúng ta sẽ chỉ yêu cầu họ cung cấp địa chỉ email và mật khẩu để đăng ký. Tuy nhiên, bạn có thể cấu hình Amazon Cognito để yêu cầu các thuộc tính bổ sung trong ứng dụng của riêng mình.

Sau khi người dùng gửi đăng ký, Amazon Cognito sẽ gửi email xác nhận kèm theo mã xác minh đến địa chỉ mà họ cung cấp. Để xác nhận tài khoản, người dùng sẽ quay lại trang web của bạn và nhập địa chỉ email và mã xác minh họ nhận được. Bạn cũng có thể xác nhận tài khoản người dùng bằng bảng điều khiển Amazon Cognito nếu muốn sử dụng địa chỉ email giả để kiểm tra.

Sau khi người dùng có tài khoản được xác nhận (sử dụng quy trình xác minh email hoặc xác nhận thủ công thông qua bảng điều khiển), họ sẽ có thể đăng nhập. Khi người dùng đăng nhập, họ nhập tên người dùng (hoặc email) và mật khẩu. Sau đó, hàm JavaScript giao tiếp với Amazon Cognito, xác thực bằng giao thức Mật khẩu bảo mật từ xa (SRP) và nhận lại một bộ JSON Web Token (JWT). JWT chứa các thông báo về danh tính người dùng và sẽ được sử dụng trong mô-đun tiếp theo để xác thực với API RESTful mà bạn xây dựng với Amazon API Gateway.

Thời gian hoàn thành mô-đun: 30 phút

Dịch vụ được sử dụng: Amazon Cognito

Mẫu CloudFormation: Nếu bạn muốn chuyển sang mô-đun tiếp theo, bạn có thể khởi chạy một trong các mẫu AWS CloudFormation này trong cùng khu vực mà bạn đã sử dụng trong Mô-đun 1.

Khu vực Mẫu CloudFormation
Miền Đông Hoa Kỳ (Bắc Virginia) Khởi chạy ngăn xếp >
Miền Đông Hoa Kỳ (Ohio) Khởi chạy ngăn xếp >
Miền Tây Hoa Kỳ (Oregon) Khởi chạy ngăn xếp >
Châu Âu (Frankfurt) Khởi chạy ngăn xếp >
Châu Âu (Ireland) Khởi chạy ngăn xếp >
Châu Âu (London) Khởi chạy ngăn xếp >
Châu Á Thái Bình Dương (Tokyo) Khởi chạy ngăn xếp >
Châu Á Thái Bình Dương (Seoul) Khởi chạy ngăn xếp >
Châu Á Thái Bình Dương (Sydney) Khởi chạy ngăn xếp >
Châu Á Thái Bình Dương (Mumbai) Khởi chạy ngăn xếp >
Serverless_Web_App_LP_assets-17

Hướng dẫn khởi chạy CloudFormation

  1. Chọn liên kết Khởi chạy ngăn xếp bên trên để chọn khu vực mong muốn.

  2. Chọn Tiếp theo trên trang Lựa chọn mẫu.

  3. Cung cấp tên bộ chứa trang web của bạn từ mô-đun 1 cho Tên bộ chứa trang web (ví dụ: wildrydes-yourname) và chọn Tiếp theo.

    Lưu ý: Bạn phải ghi đúng tên bộ chứa mà bạn đã sử dụng trong mô-đun trước. Nếu bạn cung cấp tên bộ chứa không tồn tại hoặc bạn không có quyền ghi vào bộ chứa, ngăn xếp CloudFormation sẽ thất bại trong khi tạo.

  4. Trên trang Tùy chọn, giữ nguyên mọi tùy chọn mặc định và chọn Tiếp theo.

  5. Trên trang Xem lại, đánh dấu chọn hộp để xác nhận CloudFormation sẽ tạo các tài nguyên IAM và chọn Tạo.

    Mẫu này sử dụng tài nguyên tùy chỉnh để tạo nhóm người dùng và máy khách Amazon Cognito cũng như tạo tệp cấu hình với các chi tiết cần thiết để kết nối với nhóm người dùng này và tải nó lên bộ chứa trang web của bạn. Mẫu sẽ tạo một vai trò cung cấp quyền truy nhập để tạo các tài nguyên này và tải tệp cấu hình lên bộ chứa của bạn.

  6. Đợi ngăn xếp wildrydes-webapp-2 đạt trạng thái CREATE_COMPLETE.

  7. Làm theo các bước được nêu trong Bước 4. Kiểm tra việc thực hiện của bạn, để xác nhận rằng bạn đã sẵn sàng chuyển sang mô-đun tiếp theo.


Làm theo hướng dẫn từng bước bên dưới để tạo nhóm người dùng. Nhấp vào số của từng bước để mở rộng phần.

  • Bước 1. Tạo nhóm người dùng Amazon Cognito

    Amazon Cognito cung cấp hai cơ chế khác nhau để xác thực người dùng. Bạn có thể sử dụng Nhóm người dùng Cognito để thêm chức năng đăng ký và đăng nhập vào ứng dụng của mình hoặc sử dụng Nhóm nhận dạng Cognito để xác thực người dùng thông qua các nhà cung cấp nhận dạng xã hội như Facebook, Twitter hoặc Amazon, bằng các giải pháp nhận dạng SAML hoặc bằng cách sử dụng hệ thống nhận dạng riêng của bạn. Đối với mô-đun này, bạn sẽ sử dụng nhóm người dùng làm backend cho các trang đăng ký và đăng nhập được cung cấp.


    1. Từ Bảng điều khiển AWS, nhấp vàoDịch vụ, sau đó lựa chọn Cognito trong Dịch vụ di động.
    2. Chọn Quản lý nhóm người dùng của bạn.
    3. Chọn Tạo nhóm người dùng
    4. Cung cấp tên cho nhóm người dùng của bạn, chẳng hạn như WildRydes, sau đó lựa chọn Xem lại mặc định
    5. Trên trang xem lại, nhấp vào Tạo nhóm.
    6. Ghi lại Id nhóm trên trang chi tiết Nhóm của nhóm người dùng bạn mới.
  • Bước 2. Thêm ứng dụng vào nhóm người dùng của bạn

    Từ bảng điều khiển Amazon Cognito, lựa chọn nhóm người dùng của bạn, sau đó chọn phần Máy khách ứng dụng. Thêm máy khách ứng dụng mới và đảm bảo tùy chọn Tạo bí mật máy khách được bỏ chọn. Bí mật máy khách hiện không được hỗ trợ với JavaScript SDK. Nếu bạn tạo ứng dụng với một bí mật được tạo, hãy xóa nó và tạo ứng dụng mới với cấu hình đúng.


    1. Từ trang Chi tiết nhóm cho nhóm người dùng của bạn, lựa chọn Máy khách ứng dụng từ phần Cài đặt chung bên trái trong thanh điều hướng.
    2. Chọn Thêm máy khách ứng dụng.
    3. Đặt tên cho máy khách ứng dụng, ví dụ như WildRydesWebApp.
    4. Bỏ chọn tùy chọn Tạo bí mật máy khách. Bí mật máy khách hiện không được hỗ trợ để sử dụng với các ứng dụng dựa trên trình duyệt.
    5. Chọn Tạo máy khách ứng dụng.
    6. Ghi lại Id máy khách ứng dụng cho ứng dụng mới được tạo.
  • Bước 3. Cập nhật cấu hình trang web

    Tệp /js/config.js chứa các cài đặt cho ID nhóm người dùng, ID máy khách ứng dụng và Khu vực. Cập nhật tệp này với các cài đặt từ nhóm người dùng và ứng dụng mà bạn đã tạo ở các bước trước rồi tải tệp trở lại vùng lưu trữ của bạn.


    a. Từ máy cục bộ của bạn, hãy mở tệp `wild-ryde-site/js/config.js` trong một trình soạn thảo văn bản tùy thích.

    b. Cập nhật phần cognito với các giá trị chính xác cho nhóm người dùng và ứng dụng mà bạn vừa tạo.

    Bạn có thể tìm thấy giá trị của userPoolId trên trang thông tin chi tiết về Nhóm của bảng điều khiển Amazon Cognito sau khi chọn nhóm người dùng vừa tạo.
    Bạn có thể tìm thấy giá trị của userPoolClientId bằng cách chọn Máy khách ứng dụng từ thanh điều hướng bên trái. Sử dụng giá trị trong trường Id máy khách ứng dụng cho ứng dụng mà bạn vừa tạo trong phần trước.

    Giá trị của khu vực phải là mã Khu vực AWS nơi bạn tạo nhóm người dùng. Ví dụ: us-east-1 cho Khu vực Bắc Virginia hoặc us-west-2 cho Khu vực Oregon. Nếu không chắc chắn nên sử dụng mã nào, bạn có thể tìm giá trị ARN nhóm trên trang chi tiết Nhóm. Mã Khu vực là phần ngay sau arn:aws:cognito-idp: của ARN.

    Tệp config.js cập nhật sẽ như thế này. Lưu ý rằng các giá trị thực cho tệp của bạn sẽ khác:

    window._config = {
        cognito: {
            userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb
            userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
            region: 'us-west-2' // e.g. us-east-2
        },
        api: {
            invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
        }
    };

    d. Lưu tệp đã chỉnh sửa và đẩy tệp đó sang kho lưu trữ Git để tự động triển khai tệp đó lên Bảng điều khiển Amplify.

    $ git push
  • Bước 4. Kiểm tra quá trình thực hiện của bạn


    1. Truy cập /register.html trong tên miền trang web, hoặc chọn nút Sẵn sàng chạy! trên trang chủ trang web của bạn.
    2. Hoàn thành mẫu đăng ký và chọn Chạy. Bạn có thể sử dụng email của mình hoặc nhập email giả. Hãy đảm bảo chọn mật khẩu có chứa ít nhất một chữ cái viết hoa, một chữ số và một ký tự đặc biệt. Đừng quên mật khẩu bạn đã nhập để dùng sau này. Bạn sẽ thấy thông báo xác nhận rằng người dùng của bạn đã được tạo.
    3. Xác nhận người dùng mới của bạn bằng một trong hai phương pháp sau.
    4. Nếu đã sử dụng địa chỉ email mà bạn kiểm soát, bạn có thể hoàn tất quy trình xác minh tài khoản bằng cách truy cập /verify.html trong tên miền trang web của bạn và nhập mã xác minh được gửi qua email cho bạn. Xin lưu ý, email xác minh có thể nằm trong thư mục thư rác. Đối với các triển khai thực sự, chúng tôi khuyên bạn nên cấu hình nhóm người dùng để sử dụng Amazon Simple Email Service để gửi email từ tên miền bạn sở hữu.
    5. Nếu đã sử dụng địa chỉ email giả, bạn phải xác nhận người dùng thủ công thông qua bảng điều khiển Cognito.
    6. Từ Bảng điều khiển AWS, nhấp vào Dịch vụ, sau đó lựa chọn Cognito trong Bảo mật, nhận dạng & tuân thủ.
    7. Chọn Quản lý nhóm người dùng của bạn
    8. Lựa chọn Nhóm người dùng WildRydes và nhấp vào Người dùng và nhóm trong thanh điều hướng bên trái.
    9. Bạn sẽ thấy một người dùng tương ứng với địa chỉ email bạn đã gửi qua trang đăng ký. Chọn tên người dùng đó để xem trang chi tiết người dùng.
    10. Chọn Xác nhận người dùng để hoàn tất quá trình tạo tài khoản.
    11. Sau khi xác nhận người dùng mới bằng cách sử dụng trang /verify.html hoặc bảng điều khiển Cognito, hãy truy cập /signin.html và đăng nhập bằng địa chỉ email và mật khẩu bạn đã nhập trong bước đăng ký.
    12. Nếu thành công, bạn sẽ được chuyển hướng đến /ride.html. Bạn sẽ thấy thông báo cho biết API không được cấu hình.
    successful-login