Google One Tap dapat dirender di dalam iframe (selanjutnya disebut sebagai Iframe Menengah) yang dihosting oleh situs Anda sendiri. Tidak ada perubahan yang terlihat pada UX Sekali Ketuk saat iframe perantara digunakan.
Integrasi berbasis iframe menengah memberikan beberapa fleksibilitas dan risiko:
UX yang disematkan untuk One Tap dan alur UX berikutnya.
Setelah UX Sekali Ketuk selesai, Anda dapat menampilkan alur UX berikutnya di dalam iframe perantara. Dengan demikian, 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 akan mengganggu dalam beberapa kasus.
Integrasikan Sekali, dan Tampilkan di Mana Saja.
Semua kode integrasi Sekali Ketuk (pemanggilan One Tap API dan penanganan UX berikutnya) dienkapsulasi dalam iframe perantara. Di halaman konten, tempat One Tap ditampilkan, Anda hanya perlu menyematkan iframe perantara.
Arsitektur ini memungkinkan pemisahan fokus, sehingga mengurangi biaya integrasi dan pemeliharaan.
Batasi Cakupan Eksposur Token ID.
Token ID digunakan langsung oleh iframe perantara. Mereka tidak pernah terekspos ke halaman konten. Arsitektur ini dapat mengurangi cakupan eksposur token ID secara signifikan.
Cara iframe perantara juga berfungsi dengan baik dengan situs yang sudah memiliki subdomain khusus terkait login (misalnya, login.example.com) dan beberapa sub domain terkait konten (misalnya, sports.example.com dan games.example.com).
Menampilkan Domain Sekali Ketuk.
Sebagaimana diwajibkan oleh kebijakan OAuth Google, semua domain yang menerima respons OAuth harus didaftarkan sebelumnya di Konsol Google Cloud. Dengan integrasi Sekali Ketuk normal, developer harus melakukan prapendaftaran untuk semua domain yang mungkin ditampilkan dengan Sekali Ketuk, karena token ID akan diteruskan kembali ke domain tersebut. Beberapa situs memungkinkan penggunanya membuat subdomain secara dinamis, yang tidak mungkin dilakukan prapendaftaran. Akibatnya, Sekali Ketuk tidak dapat ditampilkan di sub-domain yang dibuat secara dinamis ini.
Masalah ini dapat diperbaiki dengan memanfaatkan iframe perantara. Dalam hal ini, hanya domain iframe perantara yang perlu didaftarkan sebelumnya. Tidak perlu mendaftarkan domain halaman konten, karena Token ID tidak akan terekspos ke halaman konten ini.
Dukungan AMP.
Secara default, Google One Tap tidak dapat ditampilkan di halaman AMP karena beberapa alasan di bawah ini.
Pustaka atau kode JS kustom tidak diizinkan.
Cache AMP dapat merender halaman dari domain lain (AMP Viewer).
Masalah ini dapat diperbaiki dengan memanfaatkan arsitektur iframe perantara. Setelah integrasi Sekali Ketuk dilakukan di iframe perantara, developer dapat menyematkannya ke halaman AMP dengan menambahkan komponen
<amp-onetap-google>.iframe perantara yang sama dapat digunakan kembali oleh halaman AMP dan halaman HTML non-AMP.
Risiko Privasi.
Developer harus mengambil tindakan untuk mencegah iframe perantara disematkan ke domain yang tidak diharapkan. Misalnya, berbahaya.com dapat menyematkan iframe menengah Anda, sehingga menampilkan UX Sekali Ketuk di situs mereka. Hal ini pasti akan menyebabkan banyak masalah privasi dari pengguna akhir.
Risiko Keamanan.
Karena masalah penyesuaian frame tidak terduga yang disebutkan di atas, iframe perantara Anda tidak boleh mengirim data yang sensitif terhadap keamanan atau privasi ke frame induknya, seperti token ID, nilai cookie sesi, data pengguna, dll. Tidak mengikuti aturan ini dapat membahayakan situs Anda.
Render Sekali Ketuk pada Iframe Menengah
Untuk menampilkan Sekali Ketuk di dalam iframe perantara, tempatkan cuplikan kode berikut ke dalam kode HTML iframe perantara:
<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 perantara. Anda dapat menetapkan satu domain atau daftar domain yang dipisahkan
koma sebagai nilai atribut. Subdomain karakter pengganti juga didukung.
(Opsional) Merender UX Berikutnya pada Iframe Menengah
Dalam respons login, Anda dapat menampilkan kode HTML apa pun, yang mungkin menampilkan konten yang terlihat kepada 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 perantara:
<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 yang lengkap dapat diimplementasikan sebagai UX tersemat.
Untuk halaman pertama setelah UX Sekali Ketuk, Anda perlu memanggil metode notifyParentResize()
dua kali karena alasan berikut.
Iframe perantara disetel ke tersembunyi saat UX Sekali Ketuk selesai.
Nilai atribut
offsetHeightdari suatu elemen adalah 0 jika disembunyikan.
Pada panggilan pertama, Anda dapat mengubah ukuran tinggi iframe menjadi 1 px agar 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 setelah alur UX selesai. Untuk mencapainya, Anda dapat menempatkan cuplikan kode berikut dalam kode respons login.
<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
google.accounts.id.intermediate.notifyParentDone();
</script>
Jika alur UX dilewati, metode notifyParentClose harus dipanggil.
Sematkan Iframe Menengah ke Halaman HTML
Tempatkan cuplikan kode berikut ke halaman HTML mana pun yang Anda inginkan untuk ditampilkan oleh Google One tap:
<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.