Cảnh báo: Dữ liệu này được cung cấp theo Chính sách về dữ liệu người dùng của Google. Vui lòng xem xét và tuân thủ chính sách. Chúng tôi sẽ tạm ngưng dự án hoặc tài khoản của bạn nếu bạn không thực hiện việc này.

Tích hợp chỉ với một lần nhấn qua Iframe

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.

Google One Tap có thể hiển thị trong một iframe (sau đây gọi là Iframe trung gian) do trang web của riêng bạn lưu trữ. Không có thay đổi nào có thể nhận ra trên Trải nghiệm người dùng bằng một lần nhấn khi sử dụng iframe trung gian.

Việc tích hợp iframe trung gian mang lại một số tính linh hoạt và rủi ro:

  • Trải nghiệm người dùng được nhúng cho một lần nhấn và quy trình trải nghiệm người dùng tiếp theo.

    Sau khi trải nghiệm người dùng One Tap được hoàn tất, bạn có thể hiển thị luồng trải nghiệm người dùng tiếp theo bên trong iframe trung gian. Do đó, bạn có thể nhúng cả chế độ One Tap và trải nghiệm người dùng tiếp theo vào trang nội dung hiện tại. Xem ví dụ bên dưới.

    Ví dụ về trải nghiệm người dùng được nhúng với iframe trung gian.

    Nếu không có iframe trung gian, thông thường, bạn sẽ cần điều hướng toàn bộ trang để hiển thị luồng trải nghiệm người dùng tiếp theo. Quá trình này có thể bị xâm nhập trong một số trường hợp.

  • Tích hợp một lần và hiển thị ở mọi nơi.

    Tất cả mã tích hợp One Tap (lệnh gọi API một lần và cách xử lý trải nghiệm người dùng tiếp theo) đều được đóng gói trong iframe trung gian. Trên trang nội dung, nơi Một lần nhấn có thể hiển thị, bạn chỉ cần nhúng iframe trung gian.

    Cấu trúc này cho phép tách biệt các vấn đề, từ đó giảm chi phí tích hợp và bảo trì.

  • Giới hạn phạm vi tiếp xúc của mã thông báo mã nhận dạng.

    Mã thông báo nhận dạng được iframe trực tiếp sử dụng trực tiếp. Thông tin này không bao giờ hiển thị cho các trang nội dung. Cấu trúc này có thể làm giảm đáng kể phạm vi hiển thị mã thông báo ID.

    Cách iframe trung gian cũng hoạt động tốt với các trang web đã có miền phụ liên quan đến đăng nhập (ví dụ: login.example.com) và nhiều miền phụ liên quan đến nội dung (ví dụ: sports.example.com và Games.example.com).

  • Chỉ cần nhấn một lần để hiển thị miền.

    Theo yêu cầu của chính sách OAuth của Google, tất cả các miền nhận được phản hồi bằng OAuth đều phải được đăng ký trước trong Google API Console. Với tính năng tích hợp One Tap thông thường, nhà phát triển cần đăng ký trước tất cả các miền mà One Tap có thể hiển thị, vì mã thông báo ID sẽ được chuyển trở lại các miền này. Một số trang web cho phép người dùng tạo động các miền phụ và việc này không thể đăng ký trước. Do đó, Không thể hiển thị một lần nhấn trong các miền phụ được tạo động này.

    Bạn có thể khắc phục sự cố này bằng cách tận dụng iframe trung gian. Trong trường hợp này, bạn chỉ cần đăng ký trước miền của iframe trung gian. Bạn không cần phải đăng ký miền trang nội dung vì Mã thông báo ID không hiển thị cho các trang nội dung này.

  • Hỗ trợ AMP.

    Theo mặc định, Google One Tap không thể hiển thị trong các trang AMP vì một số lý do dưới đây.

    1. Không được phép sử dụng thư viện JS tùy chỉnh hoặc mã.

    2. Bộ nhớ đệm AMP có thể hiển thị biểu mẫu trang (một Trình xem AMP)

    Bạn có thể khắc phục sự cố này bằng cách tận dụng cấu trúc iframe trung gian. Sau khi tích hợp One Tap trong một iframe trung gian, nhà phát triển có thể nhúng video vào các trang AMP bằng cách thêm thành phần <amp-onetap-google>

    Cả các trang AMP và các trang HTML không phải AMP đều có thể sử dụng lại cùng một iframe trung gian.

  • Rủi ro về quyền riêng tư.

    Nhà phát triển phải áp dụng các biện pháp để ngăn iframe trung gian được nhúng vào các miền không mong muốn. Ví dụ:{/1} Điều này chắc chắn sẽ gây ra nhiều mối lo ngại về quyền riêng tư từ người dùng cuối.

  • Rủi ro bảo mật.

    Do vấn đề liên quan đến khung hình không mong muốn nêu trên, iframe trung gian của bạn không bao giờ được gửi dữ liệu nhạy cảm hoặc quyền riêng tư tới khung mẹ, chẳng hạn như mã thông báo mã nhận dạng, giá trị cookie phiên, dữ liệu người dùng, v.v. việc không tuân theo quy tắc này có thể khiến các trang web của bạn gặp nguy hiểm.

Hiển thị một lần nhấn trong Iframe trung gian

Để hiển thị One Tap bên trong iframe trung gian, hãy đặt đoạn mã sau vào mã HTML của iframe trung gian:

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-allowed_parent_origin="https://example.com">
</div>

Nếu có thuộc tính data-allowed_parent_origin, Google One Tap sẽ chạy ở chế độ iframe trung gian. Bạn có thể đặt một miền hoặc danh sách miền được phân tách bằng dấu phẩy làm giá trị thuộc tính. Miền con theo ký tự đại diện cũng được hỗ trợ.

(Không bắt buộc) Hiển thị trải nghiệm người dùng tiếp theo trong Iframe trung gian

Trong phản hồi đăng nhập, bạn có thể trả về bất kỳ mã HTML nào và có thể hiển thị một số nội dung hiển thị cho người dùng cuối. Ví dụ: yêu cầu cung cấp thêm thông tin hồ sơ hoặc đồng ý với Điều khoản dịch vụ, v.v. Sau khi trang được gửi, bạn có thể hiển thị thêm các trang. Ví dụ: thanh toán hoặc gói thuê bao, v.v.

Bạn cũng có thể đổi kích thước iframe trung gian như bên dưới.

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentResize(320);
</script>

Tóm lại, với iframe trung gian, bạn có thể triển khai luồng trải nghiệm người dùng đã đăng nhập hoặc đăng ký đầy đủ dưới dạng trải nghiệm người dùng đã nhúng.

Đối với trang đầu tiên sau khi thiết lập trải nghiệm người dùng một lần nhấn, bạn cần gọi phương thức notifyParentResize() 2 lần vì các lý do dưới đây.

  1. iframe trung gian được đặt thành ẩn khi hoàn tất trải nghiệm người dùng một lần chạm.

  2. Giá trị thuộc tính offsetHeight của một phần tử là 0 khi phần tử đó bị ẩn.

Trong cuộc gọi đầu tiên, bạn có thể đổi kích thước chiều cao của iframe thành 1px để hiển thị chiều cao đó. Sau đó, sau khi giá trị thuộc tính offsetHeight xuất hiện, bạn có thể đổi kích thước thành chiều cao phù hợp.

Mã ví dụ sau đây cho thấy cách xác thực nguồn gốc và thay đổi kích thước của iframe trung gian cho giao diện người dùng sau trải nghiệm người dùng một lần nhấn.

<script>
    window.onload = () => {
      google.accounts.id.intermediate.verifyParentOrigin(
          ["https://example.com","https://example-com.cdn.ampproject.org"],
          () => {
            google.accounts.id.intermediate.notifyParentResize(1);
            window.setTimeout(() => {
              let h = document.getElementById('container').offsetHeight;
              google.accounts.id.intermediate.notifyParentResize(h);
            }, 200);
          },
          () => {
            document.getElementById('container').style.display = 'none';
            document.getElementById('warning').innerText =
                'Warning: the page is displayed in an unexpected domain!';
          }
      );
    };
</script>

Xoá Iframe trung gian trên UX đã hoàn tất

Bạn phải thông báo cho trang nội dung gốc để xóa iframe trung gian khi quy trình trải nghiệm người dùng hoàn tất. Để đạt được mục tiêu này, bạn có thể đặt đoạn mã sau đây trong mã phản hồi đăng nhập của mình.

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentDone();
</script>

Nếu luồng trải nghiệm người dùng bị bỏ qua, thì phương thức notifyParentClose cần được gọi.

Nhúng Iframe trung gian vào Trang HTML

Đặt đoạn mã sau đây vào mọi trang HTML mà bạn muốn Google One Nhấn để hiển thị:

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

Thuộc tính data-src là URI của iframe trung gian.