Hiển thị Google One Tap

Thêm lời nhắc Đăng nhập bằng một lần nhấn 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. Sử dụng HTML và JavaScript để hiển thị và tuỳ chỉnh lời nhắc.

Đ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.

Thêm nút Đăng nhập bằng Google vào trang đăng nhập.

Kết xuất lời nhắc

Đặt một đoạn mã vào bất kỳ trang nào mà bạn muốn tính năng Một lần nhấn xuất hiện.

HTML

Hiển thị lời nhắc One Tap, trả về thông tin xác thực JWT đến điểm cuối đăng nhập.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-your_own_param_1_to_login="any_value"
   data-your_own_param_2_to_login="any_value">
</div>

Thuộc tính data-login_uri là URI của điểm cuối đăng nhập của ứng dụng web. Bạn có thể thêm các thuộc tính dữ liệu tuỳ chỉnh. Các thuộc tính này sẽ được gửi đến điểm cuối đăng nhập cùng với mã thông báo nhận dạng do Google phát hành.

Để biết danh sách đầy đủ các thuộc tính được hỗ trợ, hãy xem tài liệu tham khảo về g_id_onload.

JavaScript

Hiển thị lời nhắc Một lần nhấn, trả thông tin xác thực JWT về trình xử lý gọi lại JavaScript của trình duyệt.

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: 'YOUR_CALLBACK_HANDLER'
    });
    google.accounts.id.prompt();
  }
</script>

Để định cấu hình lời nhắc Một lần nhấn trong JavaScript, trước tiên, bạn cần gọi phương thức initialize(). Sau đó, hãy gọi phương thức prompt() để hiển thị giao diện người dùng của lời nhắc.

Để biết danh sách đầy đủ các tuỳ chọn dữ liệu, hãy xem tài liệu tham khảo về idConfiguration.

Trạng thái lời nhắc

Để nhận thông báo nhanh về trạng thái giao diện người dùng, hãy cung cấp một hàm gọi lại cho phương thức prompt().

HTML

Bạn cần có trình xử lý gọi lại JavaScript để nhận thông báo.

JavaScript

Ở đây, một hàm mũi tên được dùng để xử lý nội dung cập nhật thông báo.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  google.accounts.id.prompt((notification) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}
</script>

Nút và lời nhắc

Nút Đăng nhập bằng Google và lời nhắc Một lần chạm có thể hiển thị cùng nhau trên một trang.

HTML

Hiển thị cả nút Đăng nhập bằng Google và lời nhắc Đăng nhập bằng một lần chạm bằng cách đưa cả phần tử g_id_onload và g_id_signin vào.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

JavaScript

Hiển thị nút Đăng nhập bằng Google và lời nhắc Một lần chạm bằng cách gọi đồng thời cả hai hàm renderButton() và prompt().

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  const parent = document.getElementById('google_btn');
  google.accounts.id.renderButton(parent, {theme: "filled_blue"});
  google.accounts.id.prompt();
}
</script>

Không che tính năng Một lần nhấn

Phần này chỉ áp dụng khi FedCM bị tắt, khi FedCM được bật, trình duyệt sẽ hiển thị lời nhắc cho người dùng ở đầu nội dung trang.

Để đảm bảo người dùng cuối nhìn thấy tất cả thông tin hiển thị, Google One Tap không được bị che khuất bởi bất kỳ nội dung nào khác. Nếu không, cửa sổ bật lên có thể được kích hoạt trong một số trường hợp.

Kiểm tra kỹ bố cục trang và thuộc tính z-index của các phần tử để đảm bảo rằng Google One Tap không bị bất kỳ nội dung nào khác che khuất bất cứ lúc nào. Thay đổi luồng trải nghiệm người dùng có thể được kích hoạt ngay cả khi chỉ một pixel trong đường viền bị che khuất.