Bài viết Câu hỏi About RongvangIT
profile Pic
0
0

Đăng ngày:

  78 Lượt xem

Cách Sử Dụng AWS Cognito Để Xác Thực Người Dùng

Amazon CognitoNext.js

Khi bạn đang xây dựng các ứng dụng phức tạp, một tính năng có vẻ đơn giản nhưng khó khăn để triển khai có thể là: xác thực người dùng.

Mặc dù một số ứng dụng có thể không cần nó tùy thuộc vào trường hợp sử dụng của chúng, nhưng nhiều ứng dụng lại cần. Bạn có thể mất rất nhiều thời gian xây dựng một mô-đun xác thực để cung cấp một trải nghiệm an toàn cho người dùng của bạn và bảo vệ dữ liệu và quyền riêng tư của họ. Tuy nhiên, bạn cũng có thể tách nó ra thành một dịch vụ riêng biệt như AWS Cognito.

Theo trang web Amazon Cognito,

Amazon Cognito giúp bạn triển khai quản lý danh tính và quản lý quyền truy cập khách hàng (CIAM) vào ứng dụng web và di động của bạn.

Nói một cách ngắn gọn, AWS Cognito được thiết kế để đơn giản hóa việc triển khai xác thực và ủy quyền người dùng. Với Cognito, bạn có thể tập trung vào việc xây dựng chức năng chính của ứng dụng của bạn, trong khi giảm bớt sự phức tạp của quản lý người dùng cho dịch vụ.

Trong bài hướng dẫn này, chúng ta sẽ đào sâu vào thế giới của AWS Cognito bằng cách tạo một User Pool AWS Cognito cho xác thực người dùng. Bạn sẽ thấy cách đọc dữ liệu từ AWS Cognito và hiển thị nó trong một ứng dụng NextJS đơn giản.

Dưới đây là một bản demo nhanh về ứng dụng mà chúng ta sẽ xây dựng. Tôi sẽ tập trung nhiều hơn vào AWS Cognito hơn là NextJS, vì bạn có thể di chuyển dịch vụ này với bất kỳ framework UI nào bạn muốn. Tuy nhiên, bạn vẫn có thể lấy mã nguồn đầy đủ của kho NextJS từ đây.

AWS Cognito integrated with NextJS app

AWS Cognito User Pool là gì

User Pool AWS Cognito là một dịch vụ thư mục người dùng được quản lý đầy đủ cho phép bạn tạo và quản lý một nhóm người dùng cho ứng dụng của bạn.

User Pools cung cấp một loạt các tính năng giúp bạn xử lý quá trình đăng ký người dùng, đăng nhập và khôi phục tài khoản một cách mượt mà.

Lợi ích của User Pool AWS Cognito

Dễ tích hợp

Cognito User Pools tích hợp mượt mà với các nền tảng và frameworks ứng dụng khác nhau, bao gồm ứng dụng web, di động và server-side, làm cho nó linh hoạt cho các trường hợp sử dụng khác nhau.

Xác thực Người dùng An toàn

User Pools hỗ trợ nhiều phương thức xác thực, bao gồm email và mật khẩu, đăng nhập xã hội (như Google, Facebook hoặc Amazon) và xác thực đa yếu tố. Điều này đảm bảo tính an toàn cho việc xác thực người dùng.

Đăng Ký và Quản lý Người dùng

User Pools đơn giản hóa quy trình đăng ký người dùng bằng cách cung cấp các trang đăng ký có thể tùy chỉnh và xác minh email. Nó cũng cung cấp các tính năng tự phục vụ của người dùng như đặt lại mật khẩu và quản lý hồ sơ, giảm gánh nặng cho phía backend của ứng dụng.

Tính mở rộng và Hiệu suất

AWS xử lý các khía cạnh về tính mở rộng và hiệu suất của nhóm người dùng, cho phép bạn mạnh mẽ xử lý hàng triệu người dùng mà không cần lo lắng về triển khai cơ sở hạ tầng hoặc tối ưu hiệu suất.

Cách Tạo User Pool AWS Cognito

Hãy đào sâu vào quá trình tạo một User Pool AWS Cognito theo bước từng bước.

Đăng nhập vào AWS Management Console

Đăng nhập vào AWS Management Console bằng thông tin đăng nhập của bạn.

AWS Cognito Service

Tìm kiếm “Cognito” trong thanh tìm kiếm của AWS Management Console và mở dịch vụ Cognito. Bạn sẽ thấy một trang như dưới đây:

Bảng điều khiển AWS Cognito

Tạo User Pool

Nhấp vào nút “Tạo User Pool”. Bạn sẽ thấy hai loại nhà cung cấp. Một là Cognito user pool sẽ được chọn mặc định và cung cấp xác thực thông thường bằng email và mật khẩu. Loại khác là Federated identity providers sẽ cho phép người dùng đăng nhập bằng danh tính xã hội như Facebook, Google và các loại khác.

Để giữ nó đơn giản, tôi chỉ chọn Cognito user pool và chọn Tên người dùng và Email cho tùy chọn đăng nhập

AWS Cognito - Cấu hình tùy chọn đăng nhập

Configure message delivery

Cấu hình các thiết lập mong muốn của bạn, chẳng hạn như chính sách mật khẩu, xác thực đa yếu tố, các phương thức MFA và phục hồi tài khoản người dùng.

AWS Cognito - Đặt chính sách mật khẩu và MFA

AWS Cognito - Đặt phục hồi tài khoản người dùng

Configure sign-up experience

Cấu hình trải nghiệm đăng ký dựa trên nhu cầu của bạn. Bạn có thể đặt các thuộc tính yêu cầu và thuộc tính tùy chỉnh sẽ được hiển thị cho người dùng trên trang Đăng ký. Những dữ liệu đó sẽ được lưu trữ trong nhóm người dùng Cognito.

Configure message delivery

Bạn sẽ muốn chọn nhà cung cấp email là “SES” cho các ứng dụng sản xuất. Vì đây là một bản demo, tôi chọn tùy chọn “Gửi email với Cognito”.

AWS Cognito - Cấu hình giao diện gửi tin nhắn

Integrate your app

Cung cấp một tên duy nhất cho nhóm người dùng của bạn. Chọn tùy chọn “Sử dụng UI do Cognito cung cấp” để sử dụng giao diện người dùng do AWS cung cấp.

AWS Cognito - Tích hợp ứng dụng
Chọn loại miền mong muốn của bạn. Để sử dụng miền tùy chỉnh, bạn phải cung cấp một bản ghi DNS và chứng chỉ AWS Certificate Manager.

AWS Cognito - Chọn loại miền
Bước tiếp theo là khởi tạo ứng dụng khách. Ứng dụng khách này đại diện cho ứng dụng của bạn và cho phép nó tương tác với nhóm người dùng. Cấu hình các thiết lập ứng dụng khách, bao gồm các phạm vi OAuth được phép và URL gọi lại. Trong trường hợp của chúng ta ở đây, nó sẽ là http://locahost:3000, vì chúng ta sẽ chỉ chạy trên máy cục bộ của mình.

Nhập tên “App client name”. Bạn cần cung cấp URL gọi lại của trang web của bạn. Sau xác thực, người dùng sẽ được chuyển hướng đến URL này.

Chúng ta phải truy vấn dịch vụ Cognito để lấy chi tiết người dùng. Để làm điều này, chúng ta cần một mã bí mật khách hàng. Chọn tùy chọn “Generate a client secret”.

Khám phá tất cả các tùy chọn khác trên trang và cấu hình chúng dựa trên nhu cầu của bạn. Tôi hy vọng chúng là dễ hiểu tự nhiên. Nếu bạn không hiểu bất kỳ tùy chọn nào, chỉ để chúng như lựa chọn mặc định.

AWS Cognito - Tạo một mã bí mật khách hàng

Xem xét và Tạo

Cuối cùng, một trang xem xét sẽ hiển thị nơi bạn có thể xem xét tất cả cấu hình của mình. Nhấp vào “Tạo nhóm người dùng” để tạo nhóm người dùng của bạn.

Chúng ta đã hoàn thành một nửa. Chúng ta đã tạo thành công User Pool của mình.

Tùy chỉnh Giao diện Người dùng Được Lưu Trữ

Để tùy chỉnh trang đăng nhập của bạn, nhấp vào nhóm người dùng bạn vừa tạo và nhấp vào tab “App Integration”.

AWS Cognito - Tab tích hợp ứng dụng

Định vị Tùy chỉnh UI được Lưu trữ và nhấp vào nút “Edit”. Bạn có thể tải logo và CSS tùy chỉnh của mình và nó sẽ được áp dụng trên trang Đăng ký và Đăng nhập.

AWS Cognito - Tùy chỉnh giao diện người dùng được lưu trữ
Bạn có thể xem giao diện người dùng được lưu trữ với tùy chỉnh của bạn bằng cách xây dựng URL sau, với các thông số cụ thể cho nhóm người dùng của bạn, và nhập nó vào trình duyệt:

https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url>

Bạn có thể lấy tất cả dữ liệu từ bảng điều khiển.

Nhấn vào URL. Nếu bạn không thấy trang đăng nhập được tải lên và thay vào đó là một trang lỗi, đừng hoảng loạn. Những thay đổi bạn đã thực hiện trên bảng điều khiển có thể mất vài phút để có sẵn.

Trang đăng nhập
Vì chúng ta không có tài khoản nào được tạo, hãy thử đăng ký. AWS Cognito xử lý mọi phiền toái về việc gửi email xác nhận, yêu cầu người dùng thiết lập MFA, và vân vân.

Trang đăng ký

AWS Cognito - Xác nhận Email

AWS Cognito - MFA
Hy vọng rằng khi nhấn nút “Sign in”, bạn sẽ được chuyển đến một trang lỗi. Bạn có biết tại sao không? Bởi vì chúng ta chưa có client của mình chạy. Nếu bạn chú ý đến URL, bạn sẽ thấy đang ở http://localhost:3000.

Nhưng, đây là thời điểm phù hợp để kiểm tra xem tích hợp của chúng ta có đúng không. Hãy mở bảng điều khiển User pool và xem xem người dùng mới đăng ký của chúng ta có xuất hiện không.

AWS Cognito - Bảng người dùng
Công việc tuyệt vời! Người dùng đầu tiên của chúng ta đã xuất hiện trên bảng điều khiển. Bây giờ hãy lấy thông tin người dùng từ Cognito bằng cách sử dụng NextJS.

Cách Lấy Thông Tin Người Dùng từ AWS Cognito bằng NextJS

Để lấy dữ liệu từ Cognito, chúng ta sẽ sử dụng các API được Cognito cung cấp. Đầu tiên, chúng ta cần lấy mã thông báo truy cập bằng cách sử dụng Token endpoint và sử dụng mã thông báo truy cập đó để lấy thông tin người dùng bằng User Info endpoint.
Để theo dõi cùng tôi, bạn có thể sử dụng kho mã nguồn này chứa mã nguồn mẫu NextJS.

Sao chép kho mã nguồn, cài đặt các phụ thuộc bằng cách nhập lệnh yarn install và chạy ứng dụng bằng cách nhập lệnh yarn dev.

Khi bạn hoàn thành, bạn sẽ đến trang này sau khi nhấn vào http://localhost:3000:

Welcome

Nếu bạn tuân theo quy trình đăng ký / đăng nhập giống như chúng tôi đã làm ở trên, bạn sẽ được chuyển hướng đến trang trên.

Gửi yêu cầu POST đến Điểm kết thúc Token của AWS Cognito

Yêu cầu Mẫu:

POST https://mydomain.auth.us-east-1.amazoncognito.com/oauth2/token&Content-Type='application/x-www-form-urlencoded'&Authorization=Basic ZGpjOTh1M2ppZWRtaTI4M2V1OTI4OmFiY2RlZjAxMjM0NTY3ODkw                            
&grant_type=authorization_code&client_id=1example23456789&code=AUTHORIZATION_CODE&redirect_uri=com.myclientapp://myclient/redirect

Token endpoin yêu cầu các thông số sau:

  • Domain name : Điều này có thể được tìm thấy trong user pool của Cognito, và trong tab App Integration, bạn có thể tìm thấy Tên miền.
  • Client ID và Client Secret : Ở phía dưới trang đó, tìm danh sách ứng dụng và nhấp vào ứng dụng mà bạn đã tạo. Bạn có thể thấy Client ID và Client Secret.
  • Authorization Code (Mã ủy quyền) : Đây là một mã nằm trong URL chúng ta được chuyển hướng đến. (Xem ảnh dưới đây)

AWS Cognito - Mã ủy quyền
Hãy viết mã để có được mã ủy quyền.

Mở file index.tsx và thêm mã sau:

import { useSearchParams } from "next/navigation";
...
...
export default function Home() {
const searchParams = useSearchParams();
const code = searchParams.get("code");
...

Tạo một tệp .env.local trong thư mục gốc của dự án và thêm các thông tin xác thực sau vào:

NEXT_PUBLIC_COGNITO_CLIENT_ID=<cognito_client_id>
NEXT_PUBLIC_COGNITO_CLIENT_SECRET=<cognito_client_secret>
NEXT_PUBLIC_COGNITO_DOMAIN=<cognito_domain>

Bây giờ thêm useEffect với đoạn mã sau vào:

import axios from 'axios';

...

export default function Home() {
  const searchParams = useSearchParams();
  const code = searchParams.get("code");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  useEffect(() => {
    if (!code) return;
    const clientID = process.env.NEXT_PUBLIC_COGINTO_CLIENT_ID || "";
    const clientSecret = process.env.NEXT_PUBLIC_COGNITO_CLIENT_SECRET || "";
    const cognitoDomain = process.env.NEXT_PUBLIC_COGNITO_DOMAIN || "";
    const credentials = `${clientID}:${clientSecret}`;
    const base64Credentials = Buffer.from(credentials).toString("base64");
    const basicAuthorization = `Basic ${base64Credentials}`;
    const headers = {
      "Content-Type": "application/x-www-form-urlencoded",
      Authorization: basicAuthorization,
    };
    const data = new URLSearchParams();
    let token = "";
    data.append("grant_type", "authorization_code");
    data.append("client_id", clientID);
    data.append("code", code);
    data.append("redirect_uri", "http://localhost:3000");
    axios
      .post(
        `${cognitoDomain}/oauth2/token`,
        data,
        { headers }
      )
      .then((res) => {
        if (res.status != 200) return;
        token = res?.data?.access_token;
        const userInfoHeaders = {
          Authorization: "Bearer " + token,
        };
        axios
          .get(
            `${cognitoDomain}/oauth2/userInfo`,
            { headers: userInfoHeaders }
          )
          .then((userInfo) => {
            if (userInfo.status != 200) return;
            setName(userInfo.data?.username);
            setEmail(userInfo.data?.email);
          });
      });
  }, [code]);

...
...

Chúng ta làm gì trong mã trên?

Trước hết chúng ta cần lấy mã thông báo truy cập. Mã này cần thiết để xác nhận người dùng mỗi khi họ sử dụng ứng dụng.

Để có được mã đó, chúng ta phải thực hiện một yêu cầu POST HTTP đến dịch vụ AWS Cognito đính kèm Base64 mã hóa của client id và secret của chúng ta trong Header Authorization. Ngoài ra, chúng ta phải truyền mã chúng ta nhận được từ URL khi người dùng được chuyển hướng.

Chúng ta sẽ sử dụng mã thông báo này để lấy thông tin người dùng. Chúng ta lưu trữ thông tin người dùng (tên và email) trong biến trạng thái của ứng dụng.

Chúng ta đã có tên và email của người dùng từ mã trên. Hãy hiển thị chúng trên màn hình.

...
...
<h2 className={inter.className}>Welcome to 5minslearn!</h2>
      {name && email ? (
        <>
          <h2 className={inter.className}>{name}</h2>
          <p className={inter.className}>{email}</p>
        </>
      ) : (
        <></>
      )}
...
...

Tuyệt vời. Ứng dụng của chúng ta đã hoàn toàn sẵn sàng bây giờ.

Khi bạn đăng nhập lại từ Cognito, bạn sẽ được chuyển hướng đến trang web của bạn và bạn sẽ thấy một trang với tên và email của bạn (giống như ảnh dưới đây).

Nhận tên người dùng và email từ AWS Cognito bằng Next.js
Tuyệt vời - chúng ta đã thành công lấy dữ liệu từ AWS Cognito và hiển thị nó trong ứng dụng của mình.

Kết luận

Trong bài hướng dẫn này, bạn đã học cách xây dựng xác thực người dùng bằng cách tạo user pool Cognito. Bạn cũng đã thấy cách lấy dữ liệu từ Amazon Cognito bằng NextJS.

Hy vọng bạn thích đọc bài viết này! Đây là liên kết đến kho mã nguồn.

aws_pro
Đã có SAA, sẽ lấy SAP trong tương lai gần.

Bình luận

Bài viết chưa có bình luận. Hãy trở thành người bình luận đầu tiên!
Sign up for free and join this conversation.
Sign Up
If you already have a RongvangIT account Login
Danh sách thư mục
Bắt đầu ngay với RồngVàngIT - nền tảng chia sẻ kiến thức lập trình tuyệt vời cho kỹ sư Việt Nam!

Hãy đăng nhập để sử dụng hàng loạt các chức năng tuyệt vời của RồngVàngIT !

  1. 1. Bạn sẽ nhận được các bài viết phù hợp bằng chức năng theo dõi tag và người dùng.
  2. 2. Bạn có thể đọc lại các thông tin hữu ích bằng chức năng lưu trữ nội dung.
  3. 3. Chia sẻ kiến thức, đặt câu hỏi và ghi lại quá trình trưởng thành của mình cùng RồngVàngIT !
Tạo tài khoản Đăng nhập
profile Pic