Cảnh báo: Dữ liệu này được cung cấp theo Chính sách về dữ liệu người dùng của Google. Vui lòng xem xét và tuân thủ chính sách. Chúng tôi sẽ tạm ngưng dự án hoặc tài khoản của bạn nếu bạn không thực hiện việc này.

Hiển thị nút Đăng nhập bằng Google

Thêm nút Đăng nhập bằng Google vào trang web của bạn để cho phép người dùng đăng ký hoặc đăng nhập vào ứng dụng web của bạn. Sử dụng HTML hoặc JavaScript để hiển thị nút và thuộc tính để tùy chỉnh hình dạng, kích thước, văn bản và giao diện của nút.

Văn bản thay thế

Sau khi người dùng chọn một Tài khoản Google và đồng ý, Google sẽ chia sẻ hồ sơ người dùng đó bằng Mã thông báo web JSON (JWT). Để biết tổng quan về các bước liên quan trong quá trình đăng nhập và trải nghiệm người dùng, hãy xem Cách hoạt động. Hiểu rõ nút được cá nhân hóa xem xét các điều kiện và trạng thái khác nhau ảnh hưởng đến cách hiển thị nút cho người dùng.

Điều kiện tiên quyết

Hãy hoàn tất các bước sau trước khi thêm nút vào trang đăng nhập:

Kết xuất nút

Để hiển thị nút Đăng nhập bằng Google, bạn có thể chọn HTML hoặc JavaScript để hiển thị nút trên trang đăng nhập của mình:

HTML

Hiển thị nút đăng nhập bằng HTML, trả về JWT về điểm cuối đăng nhập của nền tảng.

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <div id="g_id_onload"
         data-client_id="YOUR_GOOGLE_CLIENT_ID"
         data-login_uri="https://your.domain/your_login_endpoint"
         data-auto_prompt="false">
      </div>
      <div class="g_id_signin"
         data-type="standard"
         data-size="large"
         data-theme="outline"
         data-text="sign_in_with"
         data-shape="rectangular"
         data-logo_alignment="left">
      </div>
  </body>
</html>

Một phần tử có lớp g_id_signin hiển thị dưới dạng nút Đăng nhập bằng Google. Nút này được tùy chỉnh theo các thông số được cung cấp trong thuộc tính dữ liệu.

Để hiển thị nút Đăng nhập bằng Google và Google One Tap trên cùng một trang, hãy xóa data-auto_prompt="false". Bạn nên sử dụng tính năng này để giảm bớt phiền hà và cải thiện tỷ lệ đăng nhập.

Để xem danh sách đầy đủ các thuộc tính dữ liệu, hãy xem trang Tài liệu tham khảo g_id_signin

JavaScript

Hiển thị nút đăng nhập bằng JavaScript, trả lại WWT cho trình xử lý lệnh gọi lại JavaScript của trình duyệt.

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <script>
        function handleCredentialResponse(response) {
          console.log("Encoded JWT ID token: " + response.credential);
        }
        window.onload = function () {
          google.accounts.id.initialize({
            client_id: "YOUR_GOOGLE_CLIENT_ID",
            callback: handleCredentialResponse
          });
          google.accounts.id.renderButton(
            document.getElementById("buttonDiv"),
            { theme: "outline", size: "large" }  // customization attributes
          );
          google.accounts.id.prompt(); // also display the One Tap dialog
        }
    </script>
    <div id="buttonDiv"></div> 
  </body>
</html>

Phần tử được chỉ định làm thông số đầu tiên cho renderButton hiển thị dưới dạng nút Đăng nhập bằng Google. Trong ví dụ này, buttonDiv được dùng để hiển thị nút trên trang. Nút này được tùy chỉnh bằng cách sử dụng các thuộc tính được chỉ định trong thông số thứ hai thành renderButton.

Để giảm thiểu sự phiền hà của người dùng, google.accounts.id.prompt() được gọi để hiển thị Một lần nhấn là giải pháp thay thế thứ hai bằng cách sử dụng nút này để đăng ký hoặc đăng nhập.

Thư viện GIS phân tích cú pháp tài liệu HTML để tìm các phần tử có thuộc tính mã nhận dạng được đặt thành g_id_onload, hoặc các thuộc tính lớp chứa g_id_signin. Nếu tìm thấy một phần tử phù hợp, nút đó cũng sẽ hiển thị bằng HTML, bất kể bạn có hiển thị nút trong JavaScript hay không. Để tránh hiển thị nút 2 lần, có thể các thông số xung đột không bao gồm các phần tử HTML khớp với những tên này trong các trang HTML.

Xử lý thông tin xác thực

Sau khi người dùng đồng ý, Google sẽ trả về thông tin đăng nhập Mã thông báo web JSON (JWT) còn gọi là mã thông báo nhận dạng đối với trình duyệt của người dùng hoặc trực tiếp tới điểm cuối đăng nhập do nền tảng của bạn lưu trữ.

Vị trí bạn chọn nhận JWT phụ thuộc vào việc bạn hiển thị nút bằng cách sử dụng HTML hay JavaScript và liệu chế độ trải nghiệm người dùng hoặc cửa sổ bật lên có được sử dụng hay không.

Việc sử dụng chế độ trải nghiệm người dùng popup sẽ thực hiện quy trình trải nghiệm người dùng đăng nhập trong cửa sổ bật lên. Đây thường là trải nghiệm ít xâm nhập hơn cho người dùng và là chế độ trải nghiệm người dùng mặc định.

Khi kết xuất nút bằng:

  • HTML mà bạn có thể đặt:

    • data-callback để trả lại JWT về trình xử lý lệnh gọi lại, hoặc
    • data-login_uri để Google gửi trực tiếp JWT đến điểm cuối đăng nhập của bạn bằng yêu cầu POST.

    Nếu bạn đặt cả hai giá trị, thì data-callback sẽ được ưu tiên hơn data-login_uri. Ví dụ: điều này có thể hữu ích khi trình xử lý lệnh gọi lại được sử dụng trong quá trình gỡ lỗi.

  • JavaScript bạn phải đặt callback, chế độ bật lên không hỗ trợ lệnh chuyển hướng khi bật nút trong JavaScript. Nếu bạn đặt chính sách này, thì login_uri sẽ bị bỏ qua.

    Xem phần xử lý phản hồi thông tin xác thực trả về. để biết thêm thông tin về việc giải mã JWT trong trình xử lý gọi lại JS.

Chế độ chuyển hướng

Việc sử dụng chế độ trải nghiệm người dùng redirect sẽ thực hiện quy trình đăng nhập bằng trải nghiệm đăng nhập bằng cách chuyển hướng toàn bộ trang của trình duyệt của người dùng và Google sẽ trả trực tiếp JWT về điểm cuối đăng nhập của bạn bằng cách sử dụng yêu cầu POST. Đây thường là trải nghiệm xâm nhập hơn cho người dùng, nhưng được coi là phương thức đăng nhập an toàn nhất.

Khi kết xuất nút bằng:

  • HTML nếu muốn đặt data-login_uri thành URI của điểm cuối đăng nhập.
  • JavaScript tùy ý đặt login_uri thành URI của điểm cuối đăng nhập.

Nếu bạn không cung cấp giá trị, Google sẽ trả về JWT về URI của trang hiện tại.

URI điểm cuối đăng nhập của bạn

Dùng HTTPS và URI tuyệt đối khi đặt data-login_uri hoặc login_uri. Ví dụ: https://example.com/path.

Chỉ cho phép HTTP khi sử dụng máy chủ cục bộ trong quá trình phát triển: http://localhost/path.

Hãy tham khảo bài viết Sử dụng mã nguồn chuyển hướng và URI chuyển hướng an toàn để biết nội dung mô tả đầy đủ về các yêu cầu và quy tắc xác thực của Google.