Tích hợp tính năng Một lần chạm bằng Iframe

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

Việc tích hợp dựa trên iframe trung gian mang đến một số tính linh hoạt và rủi ro:

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

    Sau khi hoàn thành trải nghiệm người dùng Một lần chạm, 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 đó, tính năng Một lần chạm và trải nghiệm người dùng tiếp theo có thể được nhúng vào trang nội dung hiện tại. Xem ví dụ bên dưới.

    Một 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 điều hướng toàn bộ trang để hiển thị luồng trải nghiệm người dùng tiếp theo, vốn có thể 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 Một lần chạm (gọi API Một lần chạm và trải nghiệm người dùng tiếp theo xử lý) đều được đóng gói trong iframe trung gian. Trên trang nội dung, nơi tính năng Một lần chạm có thể hiển thị, bạn chỉ cần nhúng iframe.

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

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

    Mã thông báo mã nhận dạng được iframe trung gian sử dụng trực tiếp. Đó là chưa bao giờ tiếp xúc với các trang nội dung. Kiến trúc này có thể ảnh hưởng đáng kể giảm phạm vi tiếp xúc với mã thông báo giá trị nhận dạng.

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

  • Hiển thị miền bằng một lần chạm.

    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 OAuth bạn cần đăng ký trước câu trả lời trong bảng điều khiển Google Cloud. Bằng dữ liệu bình thường Khi tích hợp bằng cách nhấn, nhà phát triển cần đăng ký trước tất cả các miền có hỗ trợ tính năng Một lần chạm có thể hiển thị, vì mã thông báo mã nhận dạng sẽ được chuyển lại về những miền này. Hơi nhiều các trang web cho phép người dùng của họ tự động tạo các miền phụ, là không thể đăng ký trước. Do đó, không thể hiển thị tính năng Một lần chạm trong những 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. Có 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 tiếp xúc với các trang nội dung này.

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

    Nhà phát triển phải thực hiện biện pháp để ngăn chặn các iframe trung gian được nhúng vào các miền không mong muốn. Ví dụ: độc hại.com có thể nhúng thông tin iframe trung gian, nhờ đó hiển thị Trải nghiệm người dùng một lần chạm của bạn trên trang web. Chiến dịch 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 sự cố lên khung hình không mong muốn nêu trên, iframe không bao giờ được gửi dữ liệu nhạy cảm về bảo mật hoặc quyền riêng tư đến thành phần mẹ khung, chẳng hạn như mã thông báo ID, giá trị cookie phiên, dữ liệu người dùng, v.v. Không việc tuân thủ quy tắc này có thể khiến 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 tính năng Một lần chạm bên trong iframe trung gian, hãy đặt mã sau đoạn mã 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 bạn sử dụng thuộc tính data-allowed_parent_origin, thì tính năng Google One Tap sẽ chạy ở chế độ iframe trung gian. Bạn có thể đặt một miền hoặc phân tách bằng dấu phẩy danh sách miền làm giá trị thuộc tính. Miền con có 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, mã này 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 TOS. Sau khi gửi trang, bạn có thể hiển thị các trang khác. Ví dụ: đối với khoản thanh toán hoặc gói thuê bao.

Bạn có thể đổi kích thước iframe trung gian:

<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, luồng trải nghiệm người dùng đăng nhập hoặc đăng ký đầy đủ có thể sẽ được triển khai dưới dạng trải nghiệm người dùng (UX) được nhúng.

Đối với trang đầu tiên sau Trải nghiệm người dùng một lần chạm, bạn cần gọi notifyParentResize() hai lần vì những lý do sau.

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

  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 chỉ để làm cho hiển thị. Sau đó, 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.

Đoạn 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 Trải nghiệm người dù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 Xong UX

Bạn phải thông báo cho trang nội dung gốc để xoá iframe trung gian khi luồng UX được thực hiện. Để thực hiện việc này, bạn có thể đặt đoạn mã sau vào mã phản hồi đăng nhập của bạn.

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

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

Nhúng Iframe trung gian vào trang HTML

Đặt đoạn mã sau vào bất kỳ trang HTML nào bạn muố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.