[Phần 2] Xây dựng RESTful API hoàn chỉnh với AWS Lambda + Cognito + MySQL

thuongnn
5 min readMay 19, 2019

--

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 CognitoAWS 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 CognitoAWS 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

Authentication with AWS Cognito

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.

Lựa chọn region: us-east-2, ấn Enter để tiếp tục

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.

Màn hình tạo tài khoản IAM (Identity and Access Management)

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 IDSecret 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

developers.facebook.com
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

Màn hình đăng nhập
Màn hình Home.js

Kết thúc

Vậy là đã hoàn thiện xong trang đăng nhập sử dụng AWS CognitoAWS 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

--

--

thuongnn
thuongnn

Written by thuongnn

An engineer who is young, talented, creative, passionate in working, and always puts effort into self-improving knowledge and skills in the IT field.