Có thể hiển thị Google One Tap bên trong iframe (sau đây gọi là Iframe trung gian) được lưu trữ bởi trang web của riêng bạn. Không có thay đổi nào có thể nhận biết trên trải nghiệm người dùng của tính nă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 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 trong một lần chạm và quy trình trải nghiệm người dùng tiếp theo.
Sau khi hoàn tất trải nghiệm người dùng bằng một lần chạm, 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 đó, 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.
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. Quá trình này có thể gây phiền phức 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 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 phân tách 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ã.
iframe trung gian sẽ sử dụng trực tiếp mã thông báo giá trị nhận dạng. Chúng không bao giờ được 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 hiển thị 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 việc đă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 chính sách OAuth của Google, tất cả các miền nhận được phản hồi OAuth đều cần phải được đăng ký trước trong Google API Console. 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 mã 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 phụ, điều này 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 vấn đề 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ì các mã thông báo nhận dạng không hiển thị cho những trang nội dung này.
Hỗ trợ về 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.
Không cho phép thư viện JS tùy chỉnh hoặc mã.
Bộ nhớ đệm AMP có thể kết xuất trang của một miền khác (của 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 hoàn tất quá trình 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 đoạn mã đó 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 áp dụng các biện pháp để ngăn chặn việc nhúng iframe trung gian vào các miền không mong muốn. Ví dụ:malware.com có thể nhúng iframe trung gian của bạn và từ đó hiển thị trải nghiệm người dùng bằng tính năng Một lần chạm trên trang web của họ. Đ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ư của người dùng cuối.
Rủi ro bảo mật.
Do vấn đề về việc đóng khung 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 nội dung gốc, chẳng hạn như mã thông báo mã nhận dạng, giá trị cookie của phiên hoạt động, 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.
Hiển thị một lần nhấn trong Iframe trung gian
Để hiển thị tính năng 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. Hệ thống cũng hỗ trợ miền con có ký tự đại diện.
(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 Điều khoản dịch vụ. Sau khi gửi trang, bạn có thể hiển thị các trang khác. Ví dụ: đối với một 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, các luồng trải nghiệm người dùng đă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 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 dưới đây.
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.
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 để hiển thị iframe đó. 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.
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 khi hoàn tất trải nghiệm người dùng
Bạn phải thông báo cho trang nội dung gốc để xoá iframe trung gian khi hoàn tất luồng trải nghiệm người dùng. Để đạ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 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 bất kỳ trang HTML nào 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.