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à các thuộc tính để 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 được cá nhân hoá.

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

Làm theo các bước được mô tả trong phần Thiết lập để định cấu hình Màn hình đồng ý bằng OAuth, lấy mã ứng dụng và tải thư viện ứng dụng.

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

HTML

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

<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 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à Google One Tap trên cùng một trang, hãy xoá data-auto_prompt="false". Bạn nên làm như vậy để giảm sự 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

Hiển thị nút đăng nhập bằng JavaScript, trả về JWT cho 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 để hiển thị nút trên trang. Nút được tuỳ chỉnh bằng các thuộc tính được chỉ định trong tham số thứ hai cho renderButton.

Để giảm thiểu sự phiền hà cho người dùng, google.accounts.id.prompt() được gọi để hiển thị tính năng Một lần nhấn làm phương án 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 các thuộc tính lớp chứa g_id_signin. Nếu tìm thấy một phần tử khớp, nút sẽ được 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 hai lần, có thể với các tham số xung đột, đừng đưa các phần tử HTML khớp với những tên này vào trang HTML.

Ngôn ngữ của nút

Ngôn ngữ của nút được xác định tự động theo ngôn ngữ 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 Google. Bạn cũng có thể chọn ngôn ngữ theo cách thủ công bằng cách thêm thông số hl và mã ngôn ngữ vào lệnh src khi tải thư viện, đồng thời thêm thông số data-locale hoặc locale không bắt buộc 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à đặt thuộc tính data-locale thành 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 google.accounts.id.renderButton với 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òn 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 thường là trải nghiệm ít gây phiền hà hơn cho người dùng và là chế độ trải nghiệm người dùng mặc định.

Khi hiển thị nút bằng:

HTML

Bạn có thể đặt:

  • data-callback để trả về JWT cho trình xử lý gọi lại hoặc
  • data-login_uri để Google gửi JWT trực tiếp đến điểm cuối đăng nhập 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. 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 được đặt, 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ẽ được thực hiện bằng cách sử dụng tính năng chuyển hướng toàn trang của trình duyệt của 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 phạm hơn đối với người dùng, nhưng được coi là phương thức đăng nhập an toàn nhất.

Khi hiển thị nút bằng:

  • HTML có thể đặt data-login_uri thành URI của điểm cuối đăng nhập.
  • JavaScript có thể đặt login_uri thành URI của điểm cuối đăng nhập (không bắt buộc).

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

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

Sử dụng HTTPS và URI tuyệt đối khi đặt 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.

Hãy tham khảo bài viết Sử dụng nguồn gốc JavaScript 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.