Dự án trên AWS

Dựng ứng dụng web hiện đại

Triển khai một ứng dụng web, kết nối với cơ sở dữ liệu và phân tích hành vi của người dùng

Mô-đun 4: Thiết lập đăng ký người dùng

Trong mô-đun này, bạn sẽ thiết lập đăng ký người dùng trên trang web để bạn có thể ghi lại thông tin của người dùng cụ thể.

Tổng quan

Để thêm những khía cạnh quan trọng hơn vào trang web Mythical Mysfits như cho phép người dùng bỏ phiếu cho mysfit yêu thích và nhận nuôi một mysfit, trước hết chúng ta cần cho người dùng đăng ký trên trang web. Để cho phép đăng ký và xác thực người dùng trang web, chúng ta sẽ tạo Nhóm người dùng trong AWS Cognito - dịch vụ quản lý danh tính người dùng được quản lý toàn phần.

Sau đó, để đảm bảo chỉ người dùng đã đăng ký và được cấp quyền có thể thích và nhận nuôi mysfit trên trang web, chúng ta sẽ triển khai REST API với Amazon API Gateway để API nằm trước NLB. Amazon API Gateway cũng là một dịch vụ được quản lý và cung cấp các chức năng REST API dùng ngay thường hay được yêu cầu như chấm dứt SSL, yêu cầu cấp phép, điều tiết, các giai đoạn và quản lý phiên bản API cùng nhiều chức năng khác.

Bạn sẽ tiếp tục sử dụng AWS CLI để triển khai tài nguyên cần thiết trên AWS.

Sơ đồ kiến trúc

sơ đồ kiến trúc thiết lập đăng ký người dùng

 Thời gian hoàn thành

60 phút

Hướng dẫn thực hiện

  • A: Tạo Nhóm người dùng Cognito

    Để tạo Nhóm người dùng Cognito lưu trữ tất cả khách truy cập Mythical Mysfits, hãy thực thi lệnh CLI sau để tạo nhóm người dùng tên là MysfitsUserPool và chỉ rõ rằng tất cả người dùng đã đăng ký với nhóm này sẽ tự động được xác minh địa chỉ email qua email xác nhận trước khi trở thành người dùng được xác nhận.

    aws cognito-idp create-user-pool --pool-name MysfitsUserPool --auto-verified-attributes email

    Sao chép phản hồi từ lệnh trên, trong đó có ID duy nhất cho nhóm người dùng mà bạn sẽ cần sử dụng trong các bước sau. VD: Id: us-east-1_ab12345YZ)

    B: Tạo máy khách nhóm người dùng Cognito

    Tiếp theo, để tích hợp trang web frontend với Cognito, chúng ta phải tạo một Máy khách nhóm người dùng mới cho nhóm người dùng này. Điều này tạo ra mã định danh máy khách duy nhất cho phép trang web của chúng ta được quyền gọi API chưa xác thực trong cognito nơi người dùng trang web có thể đăng nhập và đăng ký vào nhóm người dùng Mythical Mysfits. Để tạo máy khách mới bằng AWS CLI cho nhóm người dùng bên trên, chạy lệnh sau (thay giá trị --user-pool-id bằng id bạn sao chép bên trên):

    aws cognito-idp create-user-pool-client --user-pool-id REPLACE_ME --client-name MysfitsUserPoolClient
  • Tiếp theo, hãy chú ý đến việc tạo RESTful API mới ở trước dịch vụ Flask hiện có, để chúng ta có thể thực hiện yêu cầu xác thực trước khi NLB nhận được bất kỳ yêu cầu nào. Chúng ta sẽ thực hiện với Amazon API Gateway, như đã mô tả trong phần tổng quan về mô-đun.

    Để API Gateway tích hợp riêng với NLB, chúng ta sẽ đặt cấu hình Liên kết VPC API Gateway cho phép API của API Gateway trực tiếp tích hợp với các dịch vụ web backend được lưu trữ riêng bên trong VPC. Lưu ý: Vì mục đích của bài hướng dẫn thực hành này, chúng ta đã tạo NLB có thể truy cập trên internet để có thể trực tiếp gọi NLB trong các mô-đun trước đó. Nhờ vậy, kể cả khi chúng ta sẽ yêu cầu token Cấp phép trong API sau mô-đun này, NLB sẽ vẫn thực sự mở công khai sau API của API Gateway.

    Trong tình huống thực tế, bạn nên tạo NBL nội bộ từ đầu (hoặc tạo cân bằng tải nội bộ mới để thay thế cái hiện có), khi biết rằng API Gateway sẽ là chiến lược cho hoạt động cấp phép API qua Internet. Nhưng để tiết kiệm thời gian, chúng ta sẽ sử dụng NLB có thể truy cập công khai mà chúng ta đã tạo.

    Tạo Liên kết VPC cho REST API sắp tới bằng lệnh CLI sau (bạn sẽ cần thay giá trị đã nêu bằng ARN cân bằng tải đã lưu khi tạo NLB ở mô-đun 2):

    aws apigateway create-vpc-link --name MysfitsApiVpcLink --target-arns REPLACE_ME_NLB_ARN > ~/environment/api-gateway-link-output.json

    Lệnh trên sẽ tạo tệp có tên api-gateway-link-output.json chứa id cho Liên kết VPC được tạo. Lệnh cũng sẽ tạo ra trạng thái PENDING, tương tự như dưới đây.

    Quá trình tạo sẽ mất khoảng 5-10 phút, bạn có thể sao chép id từ tệp này và tiếp tục sang bước sau.

    {
        "status": "PENDING",
        "targetArns": [
            "YOUR_ARN_HERE"
        ],
        "id": "abcdef1",
        "name": "MysfitsApiVpcLink"
    }

    Khi đã tạo liên kết VPC, chúng ta có thể chuyển sang tạo REST API thực sự bằng Amazon API Gateway.

    B. Tạo REST API bằng Swagger

    REST API MythicalMysfits của bạn được xác định bằng **Swagger**, một framework nguồn mở phổ biến để mô tả API qua JSON. Định nghĩa Swagger này của API nằm ở `~/environment/aws-modern-applicaiton-workshop/module-4/aws-cli/api-swagger.json`. Mở tệp này và bạn sẽ thấy REST API cùng tất cả tài nguyên, phương pháp và cấu hình được định nghĩa bên trong.

    Có một số vị trí trong tệp JSON này cần được cập nhật để bao gồm các tham số cụ thể cho Nhóm người dùng Cognito cũng như Network Load Balancer của bạn.

    Đối tượng `securityDefinitions` trong định nghĩa API cho biết chúng ta đã thiết lập cơ chế cấp phép anapiKey bằng tiêu đề Cấp phép. Bạn sẽ để ý thấy AWS đã cung cấp phần mở rộng tùy chỉnh cho Swagger bằng cách sử dụng tiền tố `x-amazon-api-gateway-`, những phần mở rộng này là nơi có thể thêm chức năng cụ thể của API Gateway vào tệp swagger thông thường nhằm tận dụng các chức năng cụ thể của API Gateway.

    CTRL-F trong toàn tệp để tìm kiếm các vị trí khác nhau của `REPLACE_ME` và đợi thông số cụ thể của bạn. Sau khi chỉnh sửa xong, lưu tệp và thực thi lệnh AWS CLI sau:  

    aws apigateway import-rest-api --parameters endpointConfigurationTypes=REGIONAL --body file://~/environment/aws-modern-application-workshop/module-4/aws-cli/api-swagger.json --fail-on-warnings

    Sao chép phản hồi của lệnh này và lưu giá trị `id` cho bước tiếp theo:

    {
        "name": "MysfitsApi",
        "endpointConfiguration": {
            "types": [
                "REGIONAL"
            ]
        },
        "id": "abcde12345",
        "createdDate": 1529613528
    }
    C: Triển khai API

    Giờ API đã được tạo nhưng vẫn chưa được triển khai ở đâu. Để triển khai API, đầu tiên chúng ta phải tạo phần triển khai và nêu rõ phần triển khai này ở trước **giai đoạn** nào. Giai đoạn là tham chiếu có tên tới phần triển khai, là kết xuất nhanh của API.

    Bạn sử dụng Giai đoạn để quản lý và tối ưu hóa một phần triển khai cụ thể. Ví dụ: Bạn có thể thiết lập cài đặt giai đoạn để cho phép lưu trữ trên bộ nhớ đệm, tùy chỉnh điều tiết yêu cầu, đặt cấu hình ghi nhật ký, định nghĩa biến giai đoạn hoặc đính kèm bản phát hành canary để kiểm tra. Chúng ta sẽ gọi giai đoạn của mình là `prod`. Để tạo phần triển khai cho giai đoạn prod, thực thi lệnh CLI sau:

    aws apigateway create-deployment --rest-api-id REPLACE_ME_WITH_API_ID --stage-name prod

    Nhờ đó, REST API có thể Cấp phép người dùng sẽ được triển khai và sẵn dùng trên Internet... nhưng ở đâu?! API sẵn dùng tại vị trí sau:

    https://REPLACE_ME_WITH_API_ID.execute-api.REPLACE_ME_WITH_REGION.amazonaws.com/prod

    Sao chép phần bên trên, thay thế các giá trị phù hợp và thêm `/mysfits` vào cuối URI. Nhập vào thanh địa chỉ trình duyệt, bạn sẽ thấy phản hồi JSON Mysfits một lần nữa. Nhưng chúng ta vừa thêm một số chức năng như nhận nuôi và thích mysfit mà backend dịch vụ Flask vẫn chưa triển khai.

    Vậy thì tiếp theo, hãy xử lý việc này.

    Trong khi các nội dung cập nhật dịch vụ được tự động đẩy qua quy trình CI/CD, hãy tiếp tục sang bước sau.

  • A: Cập nhật backend dịch vụ Flask

    Để đáp ứng chức năng mới nhằm xem Hồ sơ Mysfit, thích và nhận nuôi chúng, chúng ta phải thêm mã Python cập nhật vào dịch vụ web Flask backend.

    Hãy ghi đè các tệp này lên nền tảng mã hiện có và đẩy chúng vào kho lưu trữ:

    cd ~/environment/MythicalMysfitsService-Repository/
    cp -r ~/environment/aws-modern-application-workshop/module-4/app/* .
    git add .
    git commit -m "Update service code backend to enable additional website features."
    git push

    Trong khi các nội dung cập nhật dịch vụ được tự động đẩy qua quy trình CI/CD, hãy tiếp tục sang bước sau.

    B: Cập nhật trang web Mythical Mysfits trong S3

    Mở phiên bản mới của tệp index.html Mythical Mysfits mà chúng ta sắp đẩy sang Amazon S3, tệp này nằm ở: ~/environment/aws-modern-application-workshop/module-4/app/web/index.html Trong tệp index.html mới này, bạn có thể thấy mã HTML và JavaScript bổ sung được dùng để thêm trải nghiệm đăng ký và đăng nhập người dùng.

    Mã này tương tác với SDK JavaScript AWS Cognito để hỗ trợ quản lý đăng ký, xác thực và cấp phép cho mọi lệnh gọi API có yêu cầu.

    Trong tệp này, thay thế các chuỗi REPLACE_ME bên trong dấu nháy đơn bằng OutputValues bạn đã sao chép ở trên và lưu tệp:

    before-replace2

    Ngoài ra, đối với quy trình đăng ký người dùng, bạn có 2 tệp HTML khác để chèn các giá trị này vào. register.html và confirm.html. Chèn các giá trị đã sao chép vào chuỗi REPLACE_ME trong cả các tệp này nữa.

    Giờ hãy sao chép các tệp HTML này cùng với SDK JavaScript Cognito vào bộ chứa S3 lưu trữ nội dung trang web Mythical Mysfits để các tính năng mới được phát hành trực tuyến.

    aws s3 cp --recursive ~/environment/aws-modern-application-workshop/module-4/web/ s3://YOUR-S3-BUCKET/

    Làm mới trang web Mythical Mysfits trong trình duyệt của bạn để xem chức năng mới hoạt động!

    Mô-đun 4 kết thúc tại đây.

Cuối cùng, ghi lại hành vi người dùng