[Phần 2] Xây dựng RESTful API hoàn chỉnh với AWS Lambda + Cognito + MySQL
AWS Cognito là một dịch vụ kiểm soát truy cập người dùng đơn giản và bảo mật, nó hỗ trợ đăng nhập thông qua các nhà cung cấp định danh mạng xã hội như Facebook, Google. Trong bài viết này mình sẽ hướng dẫn mọi người xây dựng hệ thống đăng nhập sử dụng AWS Cognito và AWS Amplify trong dự án nhé :D
Trong phần trước mình đã giới thiệu qua về kiến trúc Serverless cũng như các dịch vụ của Amazon AWS mà mình sẽ sử dụng trong series này. Ở phần này mình sẽ hướng dẫn mọi người xây dựng lớp bảo mật sử dụng AWS Cognito và AWS Amplify trong dự án, tạo một trang đăng nhập sử dụng React và trả về JWT Token. Mọi người có thể xem lại bài viết trước ở đây: https://thuongnn.me/xay-dung-restful-api-voi-serverless-famwork
Xây dựng trang đăng nhập với AWS Amplify
Mọi người mở Terminal và cài AWS Amplify CLI trước tiên:
$ npm install -g @aws-amplify/cli
$ amplify configure
Đảm bảo rằng CLI được cài ở global (-g), nếu gặp lỗi mọi người có thể xem lại bài này:
https://thuongnn.me/sua-loi-command-not-found-tren-macos-ubuntu
Mọi người chạy tiếp lệnh sau và làm theo mình:
$ amplify configure
Chạy lệnh $ amplify configure
nó sẽ tự chuyển hướng đến Amazon Console, mọi người đăng nhập với tài khoản AWS đã tạo từ trước và quay lại Terminal.
Enter tiếp để Amplify CLI tự chuyển hướng đến trang IAM (Identity and Access Management). Đây là trang quản lý người dùng cho nhà phát triển, ví dụ trong một dự án sẽ có developer, tester, devops thì IAM cho phép tạo tài khoản thành viên với những quyền hạn được cho phép.
Amplify CLI đã tự động thiết lập sẵn rồi, mọi người chỉ cần thay đổi một số thông tin như User name sau đó cứ nhấn Next để tiếp tục.
Sau khi tạo thành công tài khoản IAM, mọi người chú ý Access key ID và Secret access key copy và paste vào trong Terminal. Để khởi tạo dự án frontend React mọi người chạy lệnh sau:
$ yarn create react-app myapp
$ cd myapp
Tiếp tục chạy lệnh $ amplify init
để config amplify cho dự án và chọn những option như trong ảnh dưới:
Để liên kết đăng nhập với mạng xã hội Facebook hoặc Google thì mọi người cần phải có Application ID (đối với Facebook) và Client ID (đối với Google). Truy cập link bên dưới để tiến hành tạo và lấy Application ID, Client ID:
https://developers.facebook.com
https://developers.google.com
Tiếp tục với Terminal, chạy lệnh sau và chọn Default configuration để cài đặt Authentication cho dự án:
$ amplify add auth
Để liên kết Authentication với mạng xã hội Facebook hay Google mọi người chạy lệnh sau và làm theo mình:
$ amplify update auth
Ở những lựa chọn tiếp theo nếu nó hỏi gì mọi người cứ Enter để nó cài đặt theo mặc định nhé, nếu có chỗ nó yêu cầu Enter your redirect URL thì điền vào http://localhost:3000/
, những thông tin này mọi người có thể lên Amazon Console để thay đổi sau. Sau khi cài đặt xong mọi người chạy lệnh sau:
$ amplify push
Chờ một lúc Amplify CLI sẽ tự động tạo và cài đặt những thông tin vừa setup lên Amazon Console, sau đó mọi người lên AWS Cognito Console để kiểm tra.
OK vậy là xong, giờ cài thêm thư viện UI của Amplify vào project bằng lệnh sau trên Terminal:
$ yarn add aws-amplify aws-amplify-react
Tiếp đến mọi người mở project lên và code một chút nhé :3 Tạo file Home.js trong thư mục src
, sau khi đăng nhập xong sẽ redirect đến trang này.
Trong thư mục src
mọi người mở file App.js lên và sửa lại như sau:
Bây giờ chạy lệnh $ yarn start
lên và hưởng thụ thành quả nào :D
Kết thúc
Vậy là đã hoàn thiện xong trang đăng nhập sử dụng AWS Cognito và AWS Amplify, sau khi đăng nhập ta sẽ dùng JWT Token để truy vấn API lấy dữ liệu. Trong phần tới mình sẽ hướng dẫn mọi người sử dụng Serverless Framework để xây dựng RESTful API và thiết lập Authentication AWS Cognito với API Gateway nhé. Cảm ơn mọi người đã dành thời gian đọc bài viết này ❤
Nguồn tham khảo:
https://aws-amplify.github.io/docs