Google One Tap dapat dirender di dalam iframe (selanjutnya disebut sebagai Iframe Menengah) yang dihosting oleh situs web Anda. Tidak ada yang dapat dilihat berubah pada UX Sekali Ketuk saat iframe perantara digunakan.
Integrasi berbasis iframe perantara memberikan beberapa fleksibilitas dan risiko:
UX yang disematkan untuk Sekali Ketuk dan alur UX berikutnya.
Setelah UX Sekali Ketuk selesai, Anda dapat menampilkan alur UX berikutnya di dalam iframe perantara. Dengan demikian, UX Sekali Ketuk dan UX berikutnya dapat disematkan ke halaman konten saat ini. Lihat contoh di bawah.
Tanpa iframe perantara, biasanya Anda memerlukan navigasi halaman penuh untuk menampilkan alur UX berikutnya, yang mungkin mengganggu dalam beberapa kasus.
Integrasikan Sekali, dan Tampilkan di Mana Saja.
Semua kode integrasi Sekali Ketuk (pemanggilan API Sekali Ketuk dan pengalaman UX berikutnya ) dienkapsulasi dalam iframe perantara. Pada halaman konten, di mana Satu Ketuk mungkin ditampilkan, yang perlu Anda lakukan adalah menyematkan perantara iframe.
Arsitektur ini memungkinkan pemisahan fokus, sehingga mengurangi integrasi dan pemeliharaan.
Batasi Cakupan Eksposur Token ID.
Token ID digunakan langsung oleh iframe perantara. Mereka adalah tidak pernah terekspos ke halaman konten. Arsitektur ini mungkin sangat mengurangi cakupan eksposur token ID.
Cara iframe perantara juga berfungsi baik dengan situs yang sudah memiliki sub domain khusus terkait login (misalnya, login.example.com) dan beberapa subdomain terkait konten (misalnya, sports.example.com dan games.example.com).
Menampilkan Domain Sekali Ketuk.
Sebagaimana diwajibkan oleh kebijakan OAuth Google, semua domain yang menerima OAuth respons harus didaftarkan sebelumnya di Konsol Google Cloud. Dengan One normal Developer harus melakukan prapendaftaran untuk semua domain yang dapat diakses dengan Sekali Ketuk ditampilkan, karena token ID akan diteruskan kembali ke domain ini. Agak besar memungkinkan penggunanya untuk membuat sub-domain secara dinamis, tidak mungkin untuk melakukan pradaftar. Akibatnya, Sekali Ketuk tidak dapat ditampilkan di sub-domain yang dibuat secara dinamis ini.
Masalah ini dapat diperbaiki dengan memanfaatkan iframe perantara. Dalam kasus ini, hanya domain iframe perantara yang perlu didaftarkan sebelumnya. Ada tidak perlu mendaftarkan domain halaman konten, karena Token ID tidak terekspos ke halaman konten ini.
Risiko Privasi.
Developer harus mengambil tindakan untuk mencegah iframe perantara yang disematkan ke domain yang tidak diharapkan. Misalnya, bahaya.com dapat menyematkan iframe perantara, dan dengan demikian menampilkan UX Sekali Ketuk Anda di situs mereka. Ini pasti akan menimbulkan banyak masalah privasi dari pengguna akhir.
Risiko Keamanan.
Karena masalah {i>framing<i} tidak terduga yang disebutkan di atas, perantara Anda iframe tidak boleh mengirimkan data sensitif keamanan atau privasi ke induknya seperti token ID, nilai cookie sesi, data pengguna, dll. Gagal mengikuti aturan ini dapat membahayakan situs Anda.
Render Sekali Ketuk di Iframe Menengah
Untuk menampilkan Sekali Ketuk di dalam iframe perantara, tempatkan kode berikut cuplikan ke kode HTML iframe antara:
<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>
Jika atribut data-allowed_parent_origin digunakan, Google One Tap akan berjalan
dalam mode iframe menengah. Anda dapat menetapkan satu domain atau alamat
daftar domain Anda sebagai nilai atribut. Subdomain karakter pengganti juga didukung.
(Opsional) Merender UX Berikutnya di Iframe Menengah
Dalam respons proses masuk, Anda dapat mengembalikan kode HTML apa pun, yang mungkin menampilkan beberapa konten yang dapat dilihat oleh pengguna akhir. Misalnya, meminta informasi profil tambahan, atau menyetujui TOS. Setelah halaman dikirim, Anda dapat menampilkan halaman lainnya. Misalnya, untuk pembayaran atau langganan.
Anda dapat mengubah ukuran iframe antara:
<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
google.accounts.id.intermediate.notifyParentResize(320);
</script>
Singkatnya, dengan iframe perantara, alur UX login atau pendaftaran penuh dapat diimplementasikan sebagai UX yang tertanam.
Untuk halaman pertama setelah UX Sekali Ketuk, Anda perlu memanggil notifyParentResize()
dua kali karena alasan berikut.
Iframe perantara disetel ke tersembunyi saat UX Sekali Ketuk selesai.
Nilai atribut
offsetHeightelemen adalah 0 jika disembunyikan.
Pada panggilan pertama, Anda dapat mengubah tinggi iframe menjadi 1 px hanya untuk membuatnya
terlihat. Kemudian, setelah nilai atribut offsetHeight tersedia, Anda dapat
mengubah ukurannya ke
tinggi yang sesuai.
Kode contoh berikut menunjukkan cara memvalidasi origin induk dan mengubah ukuran iframe perantara untuk UI setelah UX Sekali Ketuk.
<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>
Menghapus Iframe Menengah di UX Selesai
Anda harus memberi tahu halaman konten induk untuk menghapus iframe perantara jika alur UX selesai. Untuk itu, Anda dapat menempatkan cuplikan kode berikut di kode respons login Anda.
<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
google.accounts.id.intermediate.notifyParentDone();
</script>
Jika alur UX dilewati, metode notifyParentClose harus dipanggil
sebagai gantinya.
Menyematkan Iframe Menengah ke Halaman HTML
Tempatkan cuplikan kode berikut ke dalam halaman HTML mana pun yang Anda inginkan dengan Google One Tap untuk menampilkan:
<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
data-src="https://example.com/onetap_iframe.html">
</div>
Atribut data-src adalah URI iframe perantara Anda.