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ể được hiển thị bên trong iframe (sau đây được 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 được trên trải nghiệm người dùng bằng một lần chạm 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 One Tap 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 bằng một thao tác chạm được thực hiện, bạn có thể hiển thị quy trình trải nghiệm người dùng tiếp theo bên trong iframe trung gian. Do đó, bạn có thể nhúng Một lần nhấn 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 cần một thao tác đầy đủ trên trang để hiển thị quy trình trải nghiệm người dùng tiếp theo. Trong một số trường hợp, quá trình này có thể bị xâm nhậ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 One Tap và quy trình xử lý trải nghiệm người dùng tiếp theo) được gói gọn trong iframe trung gian. Trên các trang nội dung, nơi Một lượt nhấn có thể xuất hiện, 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úp bạn giảm chi phí tích hợp và bảo trì.

  • Giới hạn phạm vi hiển thị mã thông báo mã nhận dạng.

    Mã thông báo mã nhận dạng được iframe trực tiếp sử dụng trực tiếp. Chúng không bao giờ hiển thị với 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 hiệu quả với những trang web đã có một miền con liên quan đến việc đăng nhập riêng (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).

  • Một lần chạm để hiển thị miền.

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

    Bạn có thể khắc phục vấn đề này bằng cách tận dụng iframe trung gian. Trong trường hợp này, chỉ cần miền của iframe trung gian được đăng ký trước. Bạn không cần đăng ký miền trang nội dung, vì mã thông báo mã nhận dạng 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ể xuất hiện trên các trang AMP vì một số lý do bên dưới.

    1. Không được dùng mã hoặc thư viện JS tuỳ chỉnh.

    2. Bộ nhớ đệm AMP có thể hiển thị biểu mẫu trang bằng một miền khác (Trình xem AMP).

    Bạn có thể khắc phục vấn đề này bằng cách tận dụng kiến trúc iframe trung gian. Sau khi tích hợp tính năng Một lần chạm trong iframe trung gian, nhà phát triển có thể nhúng tính năng đó 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 iframe trung gian này.

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

    Nhà phát triển phải thực hiện các biện pháp để ngăn iframe trung gian nhúng vào các miền không mong muốn. Ví dụ:dir.com có thể nhúng iframe trung gian, do đó bạn có thể phân phát trải nghiệm người dùng bằng một lần chạm trên trang web. Điều này chắc chắn sẽ gây ra rất nhiều 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 đề khung hình không mong muốn nêu trên, iframe trung gian không bao giờ gửi dữ liệu nhạy cảm về quyền riêng tư hoặc bảo mật đến 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. Nếu không tuân thủ quy tắc này, các trang web của bạn có thể 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 thuộc tính data-allowed_parent_origin hiển thị, 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 đạ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, 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ều khoản dịch vụ, v.v. Sau khi gửi trang, bạn có thể hiển thị thêm trang. Ví dụ: thanh toán hoặc gói thuê bao, v.v.

Bạn cũng có thể thay đổi kích thước của 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 quy trình trải nghiệm người dùng đăng nhập hoặc đăng nhập đầy đủ dưới dạng trải nghiệm người dùng được nhúng.

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

  1. iframe trung gian được đặt thành ẩn khi hoàn thành trải nghiệm người dùng bằ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 lệnh gọi đầu tiên, bạn có thể đổi kích thước chiều cao iframe thành 1px để hiển thị chiều cao. Sau khi có giá trị thuộc tính offsetHeight, 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 mẹ và đổi kích thước iframe trung gian cho giao diện người dùng sau khi trải nghiệm người dùng bằng một lần chạm.

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

Xóa 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 để xoá iframe trung gian khi luồng 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 vào mã phản hồi đăng nhập.

<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, bạn cần gọi phương thức notifyParentClose.

Nhúng Iframe trung gian vào Trang HTML

Đặt đoạn mã sau 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.