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à để tuỳ chỉnh hình dạng, kích thước, văn bản và giao diện của nút.

Nút đăng nhập dành riêng cho bạn.

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 cách sử dụng Mã thông báo web JSON (JWT). Để biết thông tin 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 phần Cách hoạt động. Bài viết Tìm hiểu về nút được cá nhân hoá xem xét các điều kiện và trạng thái khác nhau ảnh hưởng đến cách nút hiển thị 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:

Hiển thị 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 này trên trang đăng nhập:

HTML

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

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></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 sẽ hiển thị dưới dạng nút Đăng nhập bằng Google. Nút này được tuỳ 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à tính năng Một lần chạm của Google One trên cùng một trang, hãy xoá data-auto_prompt="false". Điều này được đề xuất để giảm phiền hà và cải thiện tỷ lệ đăng nhập.

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

JavaScript

Kết xuất nút đăng nhập bằng JavaScript, trả JWT về trình xử lý gọi lại JavaScript của trình duyệt.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></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 tham số đầu tiên cho renderButton sẽ hiển thị dưới dạng Nút Đăng nhập bằng Google. Trong ví dụ này, buttonDiv được dùng để kết xuất nút trên trang. Nút được tuỳ chỉnh bằng cách sử dụng các thuộc tính được chỉ định trong tham số thứ hai thành renderButton.

Để giảm thiểu sự phiền hà cho 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 cho việc sử dụng nút để đăng ký hoặc đăng nhập.

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

Ngôn ngữ của nút

Ngôn ngữ của nút được tự động xác định theo mặc định của trình duyệt hoặc lựa chọn ưu tiên của người dùng trong phiên hoạt động trên Google. Bạn cũng có thể chọn ngôn ngữ theo cách thủ công bằng cách thêm tham số hl và mã ngôn ngữ vào src khi tải thư viện và bằng cách thêm data-locale tùy chọn hoặc tham số ngôn ngữ data-locale trong HTML hoặc locale trong JavaScript.

HTML

Đoạn mã sau đây cho biết cách hiển thị ngôn ngữ của nút bằng tiếng Pháp bằng cách thêm tham số hl vào URL thư viện ứng dụng và bằng cách đặt tham số Thuộc tính data-locale đối với tiếng Pháp:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

JavaScript

Đoạn mã sau đây cho biết cách hiển thị ngôn ngữ của nút bằng tiếng Pháp bằng cách thêm tham số hl vào URL thư viện ứng dụng và gọi phương thức Phương thức google.accounts.id.renderButton có tham số locale được đặt thành Tiếng Pháp:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

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

Sau khi người dùng đồng ý, Google sẽ trả về thông tin xác thực Mã thông báo web JSON (JWT) được gọi là mã thông báo nhận dạng cho trình duyệt của người dùng hoặc trực tiếp đến đ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 HTML hay JavaScript và liệu bạn có sử dụng chế độ UX bật lên hay chuyển hướ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 một cửa sổ bật lên. Đây là thường mang lại 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 cách sử dụng:

HTML

Bạn có thể đặt:

  • data-callback để trả về JWT về trình xử lý gọi lại, hoặc
  • data-login_uri để Google trực tiếp gửi JWT đến thông tin đăng nhập của bạn bằng cách sử dụng yêu cầu POST.

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

JavaScript

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

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

Chế độ chuyển hướng

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

Khi kết xuất nút bằng cách sử dụng:

  • HTML có thể đặt data-login_uri thành URI của điểm cuối đăng nhập.
  • JavaScript (không bắt buộc) đặ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 giá trị hiện tại .

URI điểm cuối đăng nhập

Sử dụng HTTPS và URI tuyệt đối khi thiết lập data-login_uri hoặc login_uri. Ví dụ: https://example.com/path.

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

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