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 của bạn. 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 xin phép bằng OAuth, lấy mã ứng dụng khách và tải thư viện ứng dụng khách.

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

Kết xuất câu lệnh

Đặ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 Đăng nhập bằng một lần nhấn, trả thông tin đăng nhập JWT về một đ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 gửi đến điểm cuối đăng nhập cùng với mã nhận dạng do Google phát hành.

Bạn có thể dùng thuộc tính data-skip_prompt_cookie và cookie để kiểm soát việc lời nhắc Đăng nhập bằng một lần nhấn có xuất hiện trong các trang HTML tĩnh hay không. Bạn không thể thay đổi nội dung của các trang này. Nếu bạn đặt cookie được chỉ định, lời nhắc sẽ không xuất hiện.

Sử dụng thuộc tính data-context (không bắt buộc) để thay đổi văn bản được dùng trong tiêu đề lời nhắc. 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 Đăng nhập bằng 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 One Tap, trả thông tin xác thực JWT về trình xử lý lệnh 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 lời nhắc.

Sử dụng trường context (không bắt buộc) để thay đổi văn bản dùng trong tiêu đề của lời nhắc. 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 Đăng nhập bằng 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.

Để xem danh sách đầy đủ các lựa chọn về dữ liệu, hãy xem idConfiguration tham chiếu.

Trạng thái của câu lệnh

Sử dụng hàm callback JavaScript để theo dõi thông báo trạng thái giao diện người dùng của lời nhắc.

Thông báo được gửi vào những thời điểm sau:

  • Thời điểm hiển thị: Thời điểm này xảy ra sau khi phương thức prompt() được gọi. Thông báo này chứa một giá trị boolean cho biết giao diện người dùng có hiển thị hay không.

  • Khoảnh khắc bị bỏ qua: Trường hợp này xảy ra khi lời nhắc Đăng nhập bằng một lần nhấn bị đóng do tính năng tự động huỷ, huỷ theo cách thủ công hoặc khi Google không phát hành được thông tin đăng nhập, chẳng hạn như khi phiên đã chọn bị đăng xuất khỏi Google.

    Trong trường hợp này, bạn nên tiếp tục với các nhà cung cấp danh tính tiếp theo (nếu có).

  • Thời điểm bị loại bỏ: Trường hợp này xảy ra khi Google truy xuất thành công một thông tin đăng nhập hoặc người dùng muốn dừng quy trình truy xuất thông tin đăng nhập. 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 thời điểm bị bỏ qua.

HTML

Sử dụng thuộc tính data-moment_callback để chỉ định một 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>

Để giúp 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 đăng nhập hiện có. Bạn có thể muố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 của bạn làm 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à câu lệnh

Nút Đăng nhập bằng Google và lời nhắc Một lần chạm có thể xuất hiện 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 Một lần chạm bằng cách thêm cả phần tử g_id_onload và g_id_signin.

<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 nút Đăng nhập bằng một lần nhấn

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

Để đảm bảo người dùng cuối nhìn thấy tất cả thông tin được 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ể xuất hiện trong một số trường hợp.

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

Phản hồi về thông tin đăng nhập

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

Lệnh gọi lại JS

Dùng HTML hoặc JavaScript để định cấu hình một 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 sẽ giải mã JWT và in một số trường mã thông báo nhận dạng ra 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ả thông tin xác thực về đ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.

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'
});