Google One Tap có thể hiển thị bên trong iframe (sau đây gọi là Iframe trung gian) do trang web của bạn lưu trữ. Không có thay đổi nào có thể nhận biết đượ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 dựa trên iframe trung gian cũng có 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 chạm 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 lần chạm hoàn tất, 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 đó, cả tính năng Một lần chạm và trải nghiệm người dùng tiếp theo đều có thể được nhúng vào trang nội dung hiện tại. Xem ví dụ bên dưới.
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ị quy trình trải nghiệm người dùng tiếp theo. Quy trình này có thể gây xâm phạm 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 (lệnh gọi API Một lần chạm và xử lý trải nghiệm người dùng tiếp theo) đều được đóng gói trong iframe trung gian. Trên các 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 trung gian.
Cấu trúc này cho phép tách biệt các vấn đề, nhờ đó 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 giá trị nhận dạng được iframe trung gian sử dụng trực tiếp. Chúng không bao giờ hiển thị với các trang nội dung. Cấu trúc này có thể làm giảm đáng kể phạm vi phơi sáng mã thông báo mã nhận dạng.
Cách iframe trung gian cũng hoạt động hiệu quả với các trang web đã có miền phụ liên quan đến đăng nhập chuyên dụng (chẳng hạn như sign.example.com) và nhiều miền phụ liên quan đến nội dung (chẳng hạn như Sports.example.com và games.example.com).
Hiển thị miền bằng một lần nhấn.
Theo yêu cầu của các chính sách về OAuth của Google, tất cả các miền nhận được phản hồi OAuth đều cần được đăng ký trước trong bảng điều khiển Google Cloud. Với chế độ tích hợp Một lần chạm thông thường, nhà phát triển cần đăng ký trước tất cả các miền mà tính năng Một lần chạm có thể hiển thị, vì mã thông báo nhận dạng sẽ được trả 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 con – đây là điều không thể đăng ký trước. Do đó, tính năng Một lần chạm không thể hiển thị 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 đăng ký miền trang nội dung, vì Mã thông báo nhận dạng không hiển thị trên 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 bên dưới.
Không được phép sử dụng thư viện hoặc mã JS tuỳ chỉnh.
Bộ nhớ đệm AMP có thể hiển thị trang từ một miền khác (của Trình xem AMP).
Bạn có thể khắc phục sự cố này bằng cách tận dụng kiến trúc iframe trung gian. Sau khi hoàn tất quá trình tích hợp Một lần chạm trong iframe trung gian, nhà phát triển có thể nhúng nội dung đó vào các trang AMP bằng cách thêm thành phần
<amp-onetap-google>.Cả trang AMP và 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 có các biện pháp để ngăn các iframe trung gian bị nhúng vào các miền không mong muốn. Ví dụ: unique.com có thể nhúng iframe trung gian của bạn và do đó, sẽ hiển thị trải nghiệm người dùng bằng một lần chạm trên trang web của họ. Điều này chắc chắn sẽ khiến người dùng cuối lo ngại về nhiều vấn đề về quyền riêng tư.
Rủi ro bảo mật.
Do vấn đề lấy khung hình không mong muốn nêu trên, iframe trung gian của bạn không được gửi dữ liệu nhạy cảm về bảo mật hoặc quyền riêng tư đến khung gốc, chẳng hạn như mã thông báo mã nhận dạng, giá trị cookie của phiên, dữ liệu người dùng, v.v. Nếu không tuân thủ quy tắc này, trang web của bạn có thể gặp nguy hiểm.
Kết xuất một lần chạm trong Iframe trung gian
Để hiển thị một lần chạm bên trong iframe trung gian, hãy đặt đoạn mã sau đây 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, Google One Tap sẽ chạy ở chế độ iframe trung gian. Bạn có thể đặt một miền hoặc một 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 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 có thể cho thấy một số nội dung cho người dùng cuối. Ví dụ: yêu cầu cung cấp thêm thông tin trong hồ sơ hoặc đồng ý với Điều khoản dịch vụ. Khi trang đã được gửi, bạn có thể hiển thị các trang khác. Ví dụ: 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, quy trình trải nghiệm người dùng (UX) đăng nhập hoặc đăng ký đầy đủ có thể được triển khai 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() hai lần vì những lý do sau.
Iframe trung gian được đặt thành ẩn khi Trải nghiệm người dùng Một lần chạm hoàn tất.
Giá trị thuộc tính
offsetHeightcủ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 để cho phép iframe hiển thị. Sau khi có giá trị thuộc tính offsetHeight, bạn có thể đổi kích thước thuộc tính đó 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 gốc 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 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>
Xoá Iframe trung gian trên UX Xong
Bạn phải thông báo cho trang nội dung chính để xoá 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 vào 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 quy trình trải nghiệm người dùng bị bỏ qua thì 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 trang HTML bất kỳ mà bạn muốn Google One Tap 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.