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

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

Thông tin về lớp học lập trình này

subjectLần cập nhật gần đây nhất: thg 4 28, 2025
account_circleTác giả: Brian Daugherty

1. Tổng quan

Trong lớp học lập trình này, chúng ta sẽ xây dựng một trang web đơn giản để 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.

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 giá trị nhận dạng
  • Cách tuỳ chỉnh nút Đăng nhập bằng Google

Bạn cần có

  1. 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 thiết bị đầu cuối trên máy của bạn, hoặc
    • bằng một nền tảng như Lỗi phân phối.
    Hãy chọn môi trường mà bạn cảm thấy thoải mái nhất.
  2. Một dự án trên Google Cloud. Bạn có thể sử dụng dự án hiện có hoặc tạo dự án mới. Bạn có thể sử dụng miễn phí tài khoản và dự án Google Cloud Platform.
  3. Có kiến thức cơ bản về HTML, CSS, JavaScript và Công cụ của Chrome cho nhà phát triển (hoặc tương đương).

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

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

Hãy tiếp tục và thêm mã mẫu này vào tệp có tên index.html. Bạn có thể thực hiện việc này trên máy của mình bằng cách sử dụng trình chỉnh sửa văn 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à hỗn hợp của HTML và JavaScript, nó thực hiện một số việc:

  • định cấu hình thư viện Dịch vụ nhận dạng của Google này bằng g_id_onload,
  • hiển thị nút Đăng nhập bằng Google bằng g_id_signin,
  • thêm 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 đăng nhập Mã thông báo web JSON (JWT) thành tệp JSON thuần tuý.

Có thể đã xảy ra lỗi với data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE".

Bây giờ, hãy bỏ qua và quay lại sau.

3. Phân phát trang web của bạn

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

  • chạy 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.

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

Cục bộ từ máy của bạn

Đảm bảo bạn đã cài đặt Python3 trên hệ thống. Cách 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 từ phần 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/) ...

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

http://localhost:8000

Sử dụng nền tảng từ xa

Nếu đã chọn chỉnh sửa và lưu trữ trang đăng nhập bằng Lỗi phân cấp (hoặc một trình duyệt 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 bạn đã nhập khi thiết lập dự án glich.com của mình. Ví dụ: nếu dự án sự cố của bạn có tên là gis-example thì URL sẽ là https://gis-example.glitch.me. Tất nhiên, bạn sẽ chọn một tên dự án khác và không thể sử dụng lại tên này. URL là

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

Tải trang

Đợi một chú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, URL này sẽ được dùng trong bước tiếp theo.

4. Thiết lập ứng dụng web OAuth

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

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

    Được lưu trữ trên máy cục bộ của bạn

    Máy chủ của bạn

    Được lưu trữ trên một nền tảng từ xa

    Sử dụng nền tảng lưu trữ từ xa
  • Nhấn vào Tạo
  • Sao chép Mã ứng dụng khách 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 Client-ID 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 sẽ 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 trên trình duyệt của bạn. Mọi lỗi và thông tin đăng nhập mã thông báo mã 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!

Bước tiếp theo có thể khác một chút:

  • Nếu hiện đã đă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ẽ 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, một lời nhắc đồng ý sẽ hiển thị.

Sau khi chọn một tài khoản và đồng ý (không bắt buộc), Google sẽ phản hồi bằng JWT. Hàm callback handleCredentialResponse đang 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 ứng dụng web chính thức, 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 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 mã nhận dạng JWT

JWT đã mã hoá được ghi lại 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 giá trị 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, jq trong thiết bị đầu cuối của bạn cũng có thể được sử dụng để giải mã và xem JWT (bạn có thể cần phải sử dụng trình quản lý gói để cài đặt jq). Trước tiên, hãy dán chuỗi JWT được mã hoá vào dấu ngoặc kép:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

sau đó sử 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à hình ảnh phải khá dễ hiểu. Các giá trị khác sẽ được dùng để xác minh JWT trước khi bạn sử dụng. Bài viết Lấy thông tin người dùng từ mã thông báo nhận dạng có nhiều thông tin hơn về ý nghĩa của tất cả các trường.

7. Tuỳ chỉnh nút

Việc đặt nút đăng nhập mặc định trên một trang được thực hiện như sau

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

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

Nút Đăng nhập bằng Google.

Tuy nhiên, có lẽ 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 giao diện trang web của mình.

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

Mở index.html, tìm phần tử g_id_signin rồi thêm 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 kèm theo văn bản mới.

Nút Đăng ký bằng Google.

Bạn có thể tuỳ chỉnh thêm cho nút này. Hãy xem bài viết Thuộc tính dữ liệu hình ảnh để biết danh sách đầy đủ các lựa chọn.

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 ứng dụng web OAuth 2.0, giải mã mã thông báo mã JWT và tìm hiểu cách tuỳ chỉnh giao diện của nút.

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

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

bug_report Báo cáo lỗi