Trang này được dịch bởi Cloud Translation API.

Hiển thị Google One Tap
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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 hiển thị tính năng Một lần nhấ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.

Sử dụng thuộc tính data-context để thay đổi văn bản được dùng trong tiêu đề câu lệnh. Ví dụ: data-context: "signup" thay đổi "Đăng nhập vào" thành "Đăng ký vào".

Theo mặc định, lời nhắc Một lần nhấn sẽ tự động đóng nếu người dùng nhấp vào bên ngoài lời nhắc. Bạn có thể tắt hành vi này nếu đặt thuộc tính data-cancel_on_tap_outside thành false.

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

Sử dụng trường context để thay đổi văn bản dùng trong tiêu đề câu lệnh. Ví dụ: context: 'signup' thay đổi "Đăng nhập vào" thành "Đăng ký vào".

Theo mặc định, lời nhắc Một lần nhấn sẽ tự động đóng nếu người dùng nhấp vào bên ngoài lời nhắc. Bạn có thể tắt hành vi này nếu đặt thuộc tính cancel_on_tap_outside thành false.

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

Sử dụng hàm callback JavaScript để nghe thông báo trạng thái giao diện người dùng.

Thông báo được gửi cho những khoảnh khắc sau:

Thời điểm hiển thị: Điều này xảy ra sau khi phương thức prompt() được gọi. Thông báo chứa một giá trị boolean cho biết giao diện người dùng có hiển thị hay không.
Thời điểm bỏ qua: Điều này xảy ra khi lời nhắc Một lần chạm bị đóng do thao tác huỷ tự động, huỷ thủ công hoặc khi Google không phát hành được thông tin xác thực, chẳng hạn như khi phiên đã chọn đã đăng xuất khỏi Google.

Trong trường hợp này, bạn nên tiếp tục với trình cung cấp danh tính tiếp theo (nếu có).
Thời điểm đóng: Điều này xảy ra khi Google truy xuất thành công thông tin xác thực hoặc người dùng muốn dừng quy trình truy xuất thông tin xác thực. Ví dụ: khi người dùng bắt đầu nhập tên người dùng và mật khẩu vào hộp thoại đăng nhập, bạn có thể gọi phương thức google.accounts.id.cancel() để đóng lời nhắc Một lần nhấn và kích hoạt một khoảnh khắc đóng.

Cảnh báo: Khi một khoảnh khắc bị loại bỏ, đừng thử bất kỳ nhà cung cấp danh tính nào tiếp theo.

HTML

Sử dụng thuộc tính data-moment_callback để chỉ định hàm gọi lại JavaScript. Bạn cần có trình xử lý gọi lại để nhận thông báo.

<html>
  <head>
    <script>
      function continueWithNextIdp(notification) {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
          // try Next provider if One Tap is not displayed or skipped
        }
      }
    </script>
  </head>
  <body>
    ...
    <div id="g_id_onload"
      data-client_id="YOUR_GOOGLE_CLIENT_ID"
      data-login_uri="https://your.domain/your_login_endpoint"
      data-moment_callback="continueWithNextIdp"
    </div>
    ...
  </body>
</html>

Để tạo điều kiện cho người dùng đăng nhập hoặc đăng ký, bạn có thể giao tiếp với nhiều nhà cung cấp danh tính để tìm thông tin xác thực có sẵn. Bạn nên biết trạng thái giao diện người dùng của lời nhắc để có thể gọi nhà cung cấp danh tính tiếp theo.

JavaScript

Truyền trình xử lý gọi lại dưới dạng tham số đến google.accounts.id.prompt, ở đâ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.

Phản hồi thông tin xác thực

Phản hồi thông tin xác thực bao gồm một JWT do Google ký. Phản hồi được trả về trình duyệt bằng cách sử dụng hàm gọi lại JavaScript hoặc trả về nền tảng của bạn thông qua lệnh chuyển hướng đến điểm cuối đăng nhập.

Lệnh gọi lại JS

Sử dụng HTML hoặc JavaScript để định cấu hình lệnh gọi lại.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-callback="YOUR_CALLBACK_HANDLER"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  callback: 'YOUR_CALLBACK_HANDLER'
});

Ví dụ: handleCredentialResponse giải mã JWT và in một số trường mã thông báo nhận dạng vào bảng điều khiển.

<script>
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: handleCredentialResponse
  });

  function handleCredentialResponse(response) {
    const responsePayload = decodeJwtResponse(response.credential);

    console.log("ID: " + responsePayload.sub);
    console.log('Full Name: ' + responsePayload.name);
    console.log('Given Name: ' + responsePayload.given_name);
    console.log('Family Name: ' + responsePayload.family_name);
    console.log("Image URL: " + responsePayload.picture);
    console.log("Email: " + responsePayload.email);
  }

  function decodeJwtResponse(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);
  }
</script>

Chuyển hướng

Để trả về thông tin xác thực cho điểm cuối đăng nhập của nền tảng, hãy thêm URL vào chế độ cài đặt URI chuyển hướng được uỷ quyền của ứng dụng web OAuth 2.0.

Sử dụng HTML hoặc JavaScript để định cấu hình URI chuyển hướng.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-ux_mode="redirect"
  data-login-uri="YOUR_LOGIN_URI"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  ux_mode: 'redirect',
  login_uri: 'YOUR_LOGIN_URI'
});

Hiển thị Google One Tap Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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

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

HTML

JavaScript

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

HTML

JavaScript

Nút và lời nhắc

HTML

JavaScript

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

Phản hồi thông tin xác thực

Lệnh gọi lại JS

HTML

JavaScript

Chuyển hướng

HTML

JavaScript

Hiển thị Google One Tap
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.