Tài liệu tham khảo về API JavaScript hỗ trợ iframe trung gian

Trang tài liệu tham khảo này mô tả API JavaScript hỗ trợ iframe trung gian, được tính năng Đăng nhập một lần dùng để thao tác với iframe trung gian trong trải nghiệm người dùng tiếp theo.

Hãy xem hướng dẫn Tích hợp tính năng Đăng nhập bằng một lần nhấn bằng iframe để tìm hiểu cách sử dụng iframe trung gian.

Bảng sau đây liệt kê tất cả các phương thức hiện có và hành vi của chúng.

Phương thức
verifyParentOrigin thực hiện quy trình xác minh nguồn gốc của trang mẹ
notifyParentClose thông báo cho khung mẹ rằng luồng trải nghiệm người dùng One Tap bị bỏ qua
notifyParentDone thông báo cho khung mẹ rằng quy trình trải nghiệm người dùng Đăng nhập bằng một lần nhấn đã hoàn tất
notifyParentResize thông báo cho khung mẹ để đổi kích thước iframe trung gian
notifyParentTapOutsideMode thông báo cho khung mẹ biết có huỷ iframe trung gian hay không khi người dùng nhấp vào bên ngoài iframe trung gian

Tải Thư viện JavaScript hỗ trợ iframe trung gian

Đặt đoạn mã sau vào bất kỳ trang HTML nào mà bạn muốn tải iframe trung gian:

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

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

Phương thức google.accounts.id.intermediate.verifyParentOrigin thực hiện quy trình xác minh nguồn gốc mẹ. Hãy xem ví dụ về mã sau đây của phương thức này:

google.accounts.id.intermediate.verifyParentOrigin(
    origins, verifiedCallback, verificationFailedCallback)

Ví dụ về mã sau đây cho thấy cách chỉ hiện giao diện người dùng sau khi nguồn gốc mẹ được xác minh:

<script>
  window.onload = () => {
    google.accounts.id.intermediate.verifyParentOrigin(
        "https://example.com", showUI, showError);
  };
</script>

Bảng sau đây liệt kê các tham số:

Thông số
origins Các nguồn gốc được phép nhúng iframe trung gian.
verifiedCallback Phương thức gọi lại JavaScript được kích hoạt khi nguồn gốc mẹ hiện tại được phép nhúng iframe trung gian.
verificationFailedCallback Phương thức gọi lại JavaScript được kích hoạt khi nguồn gốc mẹ hiện tại không được phép nhúng iframe trung gian.

nguồn gốc

Các nguồn gốc được phép nhúng iframe trung gian. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
chuỗi, mảng chuỗi hoặc hàm Không bắt buộc allowed_parent_origin: "https://example.com"

Bảng sau đây liệt kê các loại giá trị được hỗ trợ và nội dung mô tả của các loại giá trị đó.

Loại giá trị
string Một URI miền duy nhất. "https://example.com"
string array Một mảng URI miền. "https://news.example.com,https://local.example.com"

verifiedCallback

Trường này là một phương thức callback JavaScript được kích hoạt khi nguồn gốc mẹ hiện tại được phép nhúng iframe trung gian.

verificationFailedCallback

Trường này là một phương thức gọi lại JavaScript được kích hoạt khi nguồn gốc mẹ hiện tại không được phép nhúng iframe trung gian.

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

Phương thức google.accounts.id.intermediate.notifyParentClose sẽ thông báo cho khung mẹ đóng iframe trung gian khi quy trình trải nghiệm người dùng One Tap bị bỏ qua. Hãy xem ví dụ về mã sau đây của phương thức này:

google.accounts.id.intermediate.notifyParentClose()

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

Phương thức google.accounts.id.intermediate.notifyParentClose sẽ thông báo cho khung mẹ đóng iframe trung gian và làm mới trạng thái đăng nhập. Hãy xem ví dụ về mã sau đây của phương thức này:

google.accounts.id.intermediate.notifyParentDone()

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

Phương thức google.accounts.id.intermediate.notifyParentResize thông báo cho khung mẹ để đổi kích thước iframe trung gian. Hãy xem ví dụ về mã sau đây của phương thức này:

google.accounts.id.intermediate.notifyParentResize(height)

độ cao

Chiều cao mới tính bằng pixel. Đây là trường bắt buộc. Giá trị này phải là một số không âm.

Nếu tham số chiều cao lớn hơn 0, thì iframe trung gian sẽ được đặt thành chiều cao mới. Nếu tham số chiều cao là 0, thì iframe trung gian sẽ trở nên không hiển thị. Một iframe bị ẩn chưa đóng. Sau này, bạn có thể hiện cửa sổ này bằng một lệnh gọi phương thức đổi kích thước khác.

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

Phương thức google.accounts.id.intermediate.notifyParentTapOutsideMode sẽ thông báo cho khung mẹ biết có nên huỷ iframe trung gian hay không khi người dùng nhấp vào bên ngoài iframe trung gian. Hãy xem ví dụ về mã sau đây của phương thức này:

google.accounts.id.intermediate.notifyParentTapOutsideMode(cancel)

hủy

Giá trị boolean bắt buộc này cho biết có huỷ iframe trung gian hay không khi người dùng nhấp vào bên ngoài iframe trung gian.