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, fitur 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 API Sekali Ketuk dan penanganan UX berikutnya) dienkapsulasi dalam iframe perantara. Di halaman konten, tempat fitur Sekali Ketuk dapat 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. Modul data tidak pernah diekspos ke halaman konten. Arsitektur ini dapat mengurangi cakupan eksposur token ID secara drastis.
Cara iframe perantara juga berfungsi dengan baik dengan situs yang sudah memiliki sub-domain terkait login khusus (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 API Google. Dengan integrasi Sekali Ketuk normal, developer harus melakukan prapendaftaran untuk semua domain yang dapat ditampilkan Sekali Ketuk, karena token ID akan diteruskan kembali ke domain ini. Beberapa situs memungkinkan penggunanya membuat sub-domain secara dinamis, yang tidak dapat didaftarkan sebelumnya. Akibatnya, One Tap 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 ditampilkan ke halaman konten ini.
Dukungan AMP.
Secara default, Google One Tap tidak dapat ditampilkan di halaman AMP karena beberapa alasan di bawah ini.
Kode atau library JS kustom tidak diizinkan.
Cache AMP dapat merender bentuk 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 perantara Anda, sehingga menampilkan UX Sekali Ketuk di situsnya. Hal ini pasti akan menimbulkan banyak kekhawatiran terkait privasi dari pengguna akhir.
Risiko Keamanan.
Karena masalah framing tidak terduga yang disebutkan di atas, iframe perantara Anda tidak boleh mengirim data sensitif keamanan atau privasi ke frame induknya, seperti token ID, nilai cookie sesi, data pengguna, dll. Tidak mengikuti aturan ini dapat membahayakan situs Anda.
Merender Sekali Ketuk di 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 menengah. Anda dapat menetapkan satu domain atau daftar domain yang dipisahkan
koma sebagai nilai atribut. Subdomain karakter pengganti juga didukung.
(Opsional) Merender UX Berikutnya di Iframe Menengah
Dalam respons login, Anda dapat menampilkan kode HTML apa pun, yang mungkin menampilkan beberapa 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 penuh dapat diimplementasikan sebagai UX tersemat.
Untuk halaman pertama setelah UX Sekali Ketuk, Anda perlu memanggil metode notifyParentResize()
dua kali karena alasan di bawah ini.
iframe perantara disetel ke tersembunyi saat UX Sekali Ketuk selesai.
Nilai atribut
offsetHeightelemen adalah 0 saat tersembunyi.
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 menengah 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 yang Selesai
Anda harus memberi tahu halaman konten induk untuk menghapus iframe perantara jika alur UX selesai. Untuk melakukannya, 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 perlu dipanggil.
Menyematkan Iframe Menengah ke dalam Halaman HTML
Tempatkan cuplikan kode berikut ke dalam halaman HTML mana pun yang ingin ditampilkan oleh Google One Ketuk:
<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.