Tài liệu tham khảo về API iframe trung gian

Trang tài liệu tham khảo này mô tả API iframe trung gian, được dùng để nhúng lời nhắc Một lần chạm vào các trang web bằng iframe.

Hãy xem phần Tích hợp tính năng Đăng nhập bằng một lần nhấn bằng iframe để biết thêm thông tin về cách sử dụng iframe trung gian.

Tải Thư viện JavaScript Iframe trung gian

Đặt đoạn mã sau vào bất kỳ trang HTML nào mà bạn muốn Google One Tap hiển thị:

<script src="https://accounts.google.com/gsi/intermediate"></script>

HTML API

Bạn có thể tải iframe trung gian bằng cách thêm một phần tử HTML có thuộc tính ID được đặt thành g_id_intermediate_iframe. Hãy xem đoạn mã ví dụ sau:

<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
     data-src="https://example.com/onetap_iframe.html">
</div>

Phần tử có giá trị nhận dạng "g_id_intermediate_iframe"

Bạn có thể đặt các thuộc tính dữ liệu iframe trung gian trong mọi phần tử hiển thị hoặc không hiển thị, chẳng hạn như <div><span>. Yêu cầu duy nhất là bạn phải đặt mã nhận dạng phần tử thành g_id_intermediate_iframe. Đừng đặt mã nhận dạng này trên nhiều phần tử.

Bảng sau đây liệt kê các thuộc tính dữ liệu cùng với nội dung mô tả:

Thuộc tính
data-src URI của iframe trung gian Một lần chạm
data-done Một phương thức gọi lại JavaScript sẽ được kích hoạt khi UX Một lần nhấn hoàn tất.

data-src

Thuộc tính này là URI của iframe trung gian của tính năng Đăng nhập một lần. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
chuỗi data-src="https://example.com/onetap_iframe.html"

data-done

Thuộc tính này là một phương thức callback JavaScript được kích hoạt khi UX Một lần nhấn hoàn tất.

Theo mặc định, trang nội dung sẽ được tải lại khi UX Một lần chạm hoàn tất. Bạn có thể ghi đè hành vi mặc định bằng cách cung cấp lệnh gọi lại hoàn tất của riêng mình. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
Chức năng Không bắt buộc data-done="onOneTapSuccess"

API JavaScript

Bạn có thể tải iframe trung gian bằng cách gọi một phương thức JavaScript.

Phương thức: google.accounts.id.initializeIntermediate

Phương thức google.accounts.id.initializeIntermediate tải iframe trung gian dựa trên đối tượng cấu hình. Hãy xem ví dụ về mã sau đây của phương thức:

google.accounts.id.initializeIntermediate(IntermediateConfig)

Ví dụ về mã sau đây triển khai phương thức google.accounts.id.initializeIntermediate bằng hàm onload:

<script>
  window.onload = function () {
    google.accounts.id.initializeIntermediate({
      src: 'https://example.com/intermediate'
    });
  };
</script>

Loại dữ liệu: IntermediateConfig

Bảng sau đây liệt kê các trường cùng với nội dung mô tả:

Trường
src URI của iframe trung gian Một lần chạm
done Một phương thức gọi lại JavaScript sẽ được kích hoạt khi UX Một lần chạm là một.

src

Trường này là URI của iframe trung gian Một lần chạm. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
chuỗi src: "https://example.com/onetap_iframe.html"

xong

Trường này là phương thức gọi lại JavaScript sẽ được kích hoạt khi UX Một lần nhấn hoàn tất.

Theo mặc định, trang nội dung sẽ được tải lại khi UX Một lần chạm hoàn tất. Bạn có thể ghi đè hành vi mặc định bằng cách cung cấp lệnh gọi lại hoàn tất của riêng mình. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
Chức năng Không bắt buộc done: onOneTapSuccess