Trang này được dịch bởi Cloud Translation API.

Nút Đăng nhập bằng Google dành cho web

1. Tổng quan

Trong lớp học lập trình này, chúng ta sẽ tạo một trang web để người dùng đăng nhập. Bạn sẽ sử dụng thư viện JavaScript Dịch vụ nhận dạng của Google để hiển thị và tuỳ chỉnh nút Đăng nhập bằng Google.

Kiến thức bạn sẽ học được

Cách thêm nút Đăng nhập bằng Google vào trang web
Cách thiết lập ứng dụng web OAuth 2.0
Cách giải mã mã thông báo nhận dạng
Cách tuỳ chỉnh nút Đăng nhập bằng Google

Bạn cần có

Một trình chỉnh sửa văn bản và nơi lưu trữ trang web, các môi trường mà chúng ta sẽ đề cập trong Lớp học lập trình này:
- chạy cục bộ trong một cửa sổ dòng lệnh trên máy của bạn, hoặc
- sử dụng một nền tảng như Glitch.
Chọn môi trường mà bạn cảm thấy thoải mái nhất.
Một dự án trên Google Cloud. Bạn có thể sử dụng dự án hiện có hoặc tạo một dự án mới. Tài khoản và dự án trên Google Cloud Platform đều miễn phí.
Kiến thức cơ bản về HTML, CSS, JavaScript và Chrome DevTools (hoặc công cụ tương đương).

Vì vậy, hãy bắt đầu.

2. Tạo trang đăng nhập

Hãy thêm mẫu mã này vào một tệp có tên là index.html. Bạn có thể thực hiện việc này trên máy của mình bằng trình chỉnh sửa văn bản mà bạn yêu thích hoặc trên một nền tảng như Glitch.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://accounts.google.com/gsi/client" async></script>

    <script>
      function decodeJWT(token) {

        let base64Url = token.split(".")[1];
        let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
        let jsonPayload = decodeURIComponent(
          atob(base64)
            .split("")
            .map(function (c) {
              return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
            })
            .join("")
        );
        return JSON.parse(jsonPayload);
      }

      function handleCredentialResponse(response) {

        console.log("Encoded JWT ID token: " + response.credential);

        const responsePayload = decodeJWT(response.credential);

        console.log("Decoded JWT ID token fields:");
        console.log("  Full Name: " + responsePayload.name);
        console.log("  Given Name: " + responsePayload.given_name);
        console.log("  Family Name: " + responsePayload.family_name);
        console.log("  Unique ID: " + responsePayload.sub);
        console.log("  Profile image URL: " + responsePayload.picture);
        console.log("  Email: " + responsePayload.email);
      }
    </script>
  </head>
  <body>
    <!-- g_id_onload contains Google Identity Services settings -->
    <div
      id="g_id_onload"
      data-auto_prompt="false"
      data-callback="handleCredentialResponse"
      data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
    ></div>
    <!-- g_id_signin places the button on a page and supports customization -->
    <div class="g_id_signin"></div>
  </body>
</html>

Mã này là sự kết hợp giữa HTML và JavaScript, mã này thực hiện một số việc sau:

định cấu hình thư viện Dịch vụ nhận dạng của Google bằng g_id_onload,
hiển thị nút Đăng nhập bằng Google bằng cách sử dụng g_id_signin,
thêm một trình xử lý hàm callback JavaScript có tên là handleCredentialResponse để nhận thông tin đăng nhập của người dùng từ Google, và
hàm decodeJWT để chuyển đổi thông tin xác thực Mã thông báo web JSON (JWT) thành JSON thuần tuý.

Có thể data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" sẽ hoạt động không ổn định.

Hiện tại, bạn chỉ cần bỏ qua phần này, chúng ta sẽ quay lại phần này sau.

3. Phân phát trang web

Chúng ta sẽ thảo luận về 2 môi trường để phân phát index.html cho trình duyệt:

chạy một máy chủ web cục bộ trên máy của bạn
một nền tảng từ xa như Glitch.

Chọn chế độ bạn cảm thấy phù hợp nhất. Sau khi thiết lập, chúng tôi sẽ sử dụng URL này để định cấu hình một ứng dụng web OAuth.

Trên máy của bạn

Đảm bảo bạn đã cài đặt Python3 trên hệ thống. Quy trình thiết lập sẽ khác nhau tuỳ theo hệ điều hành và nền tảng. Hãy bắt đầu với Thiết lập và sử dụng Python nếu bạn cần cài đặt Python trên máy.

Khởi động máy chủ web Python trong thư mục chứa index.html:

$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Giờ đây, máy chủ web đang lắng nghe các kết nối trên cổng 8000 và sẵn sàng phân phát trang đăng nhập của bạn. URL là

http://localhost:8000

Từ một nền tảng phát triển web

Nếu đã chọn chỉnh sửa và lưu trữ trang đăng nhập bằng Glitch (hoặc một nền tảng tương đương), bạn sẽ có thể mở index.html trong ngăn xem trước hoặc thẻ trình duyệt mới.

Thông thường, URL bạn sẽ sử dụng là tên dự án mà bạn đã nhập khi thiết lập dự án glich.com. Ví dụ: nếu dự án Glitch của bạn có tên là gis-example thì URL sẽ là https://gis-example.glitch.me. Dĩ nhiên, bạn sẽ chọn một tên dự án khác và không thể dùng lại tên này. URL là

https://<var>your-project-name</var>.glitch.me

Tải trang

Xin chờ trong giây lát...

Trước tiên, chúng ta phải tạo một ứng dụng web OAuth 2.0 và định cấu hình ứng dụng đó.

Sao chép hoặc ghi lại URL này để dùng trong bước tiếp theo.

4. Thiết lập ứng dụng OAuth chạy trên web

Hãy định cấu hình OAuth để mọi người có thể đăng nhập.

Nhấp vào đường liên kết này để tạo một ứng dụng web OAuth 2.0. Nếu cần, một trình hướng dẫn sẽ giúp bạn tạo và thiết lập Dự án Google Cloud mới.
Chọn Ứng dụng web trong trình đơn thả xuống Loại ứng dụng.
Nhấn vào nút Thêm URI trong mục Gốc JavaScript được phép
Nhập URL đang lưu trữ index.html trong Bước 3: Phân phát trang web.
Được lưu trữ trên máy cục bộ của bạn

Được lưu trữ trên một nền tảng từ xa
Nhấn vào Tạo
Sao chép mã ứng dụng mới.

Điều cuối cùng

Chúng ta cần quay lại và cập nhật index.html để sử dụng mã ứng dụng khách mới. Trong trình chỉnh sửa, hãy thay thế PUT_YOUR_WEB_CLIENT_ID_HERE bằng Mã ứng dụng khách mới. Mã ứng dụng khách có dạng như ví dụ sau: 1234567890-abc123def456.apps.googleusercontent.com.

Hãy đăng nhập!

5. Đăng nhập

Trước tiên, hãy mở bảng điều khiển dành cho nhà phát triển của trình duyệt. Mọi lỗi và thông tin đăng nhập mã thông báo nhận dạng JWT do Google trả về sẽ được ghi lại tại đây.

Nhấn nút Đăng nhập bằng Google!

Điều gì xảy ra tiếp theo có thể khác nhau một chút:

Nếu đang đăng nhập vào nhiều Tài khoản Google, bạn sẽ được nhắc chọn tài khoản bạn sẽ dùng để đăng nhập vào ứng dụng web này.
Nếu đây là lần đầu tiên bạn đăng nhập vào ứng dụng web này, thì lời nhắc đồng ý sẽ xuất hiện.

Sau khi bạn chọn một tài khoản (không bắt buộc) và đồng ý, Google sẽ phản hồi bằng một JWT. Hàm callback handleCredentialResponse chạy trong trình duyệt sẽ nhận được JWT.

Trong Lớp học lập trình này, chúng ta sẽ giải mã và in nội dung JWT. Trong một ứng dụng web sản xuất, bạn sẽ xác minh và sử dụng JWT đã giải mã để làm điều gì đó có ý nghĩa hơn, chẳng hạn như tạo một tài khoản mới trên nền tảng phụ trợ hoặc thiết lập một phiên mới cho người dùng.

6. Kiểm tra mã thông báo nhận dạng JWT

JWT được mã hoá sẽ được ghi vào nhật ký trong bảng điều khiển dành cho nhà phát triển. Sau khi giải mã JWT, một số trường mã thông báo nhận dạng thường dùng cũng được ghi vào bảng điều khiển.

Bạn có thể sử dụng các công cụ trực tuyến như jwt.io để giải mã JWT.

Ngoài ra, bạn cũng có thể dùng jq trong thiết bị đầu cuối để giải mã và xem JWT (bạn có thể cần dùng trình quản lý gói để cài đặt jq). Trước tiên, hãy dán chuỗi JWT đã mã hoá vào dấu ngoặc kép:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

rồi dùng lệnh này để giải mã

$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
  "alg": "RS256",
  "kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
  "typ": "JWT"
}
{
  "iss": "https://accounts.google.com",
  "azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "sub": "2718281828459045",
  "email": "example@example.com",
  "email_verified": true,
  "nbf": 1744645148,
  "name": "Brian Daugherty",
  "picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
  "given_name": "Brian",
  "family_name": "Daugherty",
  "iat": 1744645448,
  "exp": 1744649048,
  "jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}

Một số khoá và giá trị như email, tên và ảnh khá dễ hiểu. Các giá trị khác được dùng để xác minh JWT trước khi bạn sử dụng. Lấy thông tin người dùng từ mã nhận dạng có thêm thông tin về ý nghĩa của tất cả các trường.

7. Tuỳ chỉnh nút

Cách đặt nút đăng nhập mặc định trên một trang như sau

    <div class="g_id_signin"></div>

và bạn sẽ thấy nút này

Nhưng có thể bạn muốn thay đổi màu sắc, kích thước hoặc văn bản cho phù hợp với chủ đề của trang web.

Hãy thay đổi màu của nút thành xanh dương và thay vào đó, hãy đặt nút thành Đăng ký bằng Google.

Mở index.html, tìm phần tử g_id_signin rồi thêm các thuộc tính data-theme="filled_blue" và data-text="signup_with":

    <div
      class="g_id_signin"
      data-theme="filled_blue"
      data-text="signup_with"
    ></div>

Sau khi lưu và tải lại trang, bạn sẽ thấy một nút màu xanh dương có văn bản mới.

Bạn có thể tuỳ chỉnh thêm nút này, hãy xem các thuộc tính Dữ liệu trực quan để biết danh sách đầy đủ các lựa chọn và dùng thử trình tạo mã HTML của chúng tôi.

8. Tài nguyên khác

Xin chúc mừng!

Bạn đã thêm nút Đăng nhập bằng Google vào một trang web, định cấu hình một ứng dụng web OAuth 2.0, giải mã mã thông báo JWT ID và tìm hiểu cách tuỳ chỉnh giao diện của nút.

Các đường liên kết này có thể giúp bạn thực hiện các bước tiếp theo:

HTML API của Dịch vụ nhận dạng của Google
API JavaScript của Dịch vụ nhận dạng của Google
Cách Thiết lập tính năng Đăng nhập bằng Google cho web
Xác minh mã thông báo nhận dạng của Google
Tìm hiểu thêm về Dự án trên Google Cloud.
Phương thức xác thực danh tính trên Google

Câu hỏi thường gặp

StackOverflow