Mengintegrasikan Satu Ketuk melalui Iframe

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

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 perantara menghadirkan 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, One Tap dan UX berikutnya dapat disematkan ke halaman konten saat ini. Lihat contoh di bawah.

    Contoh UX yang disematkan dengan iframe perantara.

    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 One Tap (pemanggilan Sekali Ketuk API dan penanganan UX berikutnya) dienkapsulasi dalam iframe perantara. Di halaman konten, tempat Sekali Ketuk dapat ditampilkan, yang perlu Anda lakukan hanyalah menyematkan iframe perantara.

    Arsitektur ini memungkinkan pemisahan fokus, sehingga mengurangi integrasi dan biaya pemeliharaan Anda.

  • 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 drastis.

    Cara iframe menengah juga berfungsi dengan baik dengan situs yang telah memiliki subdomain terkait login khusus (misalnya, login.example.com) dan beberapa subdomain terkait konten (misalnya, sports.example.com dan games.example.com).

  • Sekali Ketuk Menampilkan Domain.

    Seperti yang diwajibkan oleh kebijakan OAuth Google, semua domain yang menerima respons OAuth harus didaftarkan sebelumnya di Google API Console. Dengan integrasi Sekali Ketuk normal, developer harus melakukan prapendaftaran untuk semua domain yang dapat ditampilkan One Tap, karena token ID akan diteruskan kembali ke domain ini. Beberapa situs memungkinkan penggunanya membuat subdomain secara dinamis, yang tidak mungkin dilakukan dengan pradaftar. Akibatnya, Sekali Ketuk tidak dapat ditampilkan di subdomain yang dibuat secara dinamis ini.

    Masalah ini dapat diperbaiki dengan memanfaatkan iframe perantara. Dalam hal ini, hanya domain iframe perantara yang harus didaftarkan sebelumnya. Anda tidak perlu mendaftarkan domain halaman konten, karena Token ID tidak ditampilkan di halaman konten tersebut.

  • Dukungan AMP.

    Secara default, Google One Tap tidak dapat ditampilkan di halaman AMP karena beberapa alasan di bawah ini.

    1. Library atau kode JS kustom tidak diizinkan.

    2. Cache AMP dapat merender domain halaman dari domain lain (AMP Viewer).

    Masalah ini dapat diperbaiki dengan memanfaatkan arsitektur iframe menengah. 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 menengah disematkan ke dalam domain yang tidak terduga. Misalnya, berbahaya.com dapat menyematkan iframe perantara, sehingga menampilkan UX Sekali Ketuk di situs mereka. Hal ini pasti akan menyebabkan banyak masalah privasi dari pengguna akhir.

  • Risiko Keamanan.

    Karena masalah framing yang tidak terduga yang disebutkan di atas, iframe perantara Anda tidak boleh mengirimkan data keamanan atau sensitif privasi ke frame induknya, seperti token ID, nilai cookie sesi, data pengguna, dll. Kegagalan dalam mengikuti aturan ini dapat membahayakan situs Anda.

Merender Satu Ketuk di Iframe Menengah

Untuk menampilkan One Tap 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 ada, 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) Render 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, dll. Setelah halaman dikirimkan, Anda dapat menampilkan halaman lebih lanjut. Misalnya, untuk pembayaran atau langganan, dll.

Anda juga memiliki opsi untuk mengubah ukuran iframe perantara seperti di bawah ini.

<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 diterapkan sebagai UX sematan.

Untuk halaman pertama setelah UX Sekali Ketuk, Anda perlu memanggil metode notifyParentResize() dua kali karena alasan di bawah.

  1. Iframe perantara disetel ke tersembunyi saat UX Sekali Ketuk selesai.

  2. Nilai atribut offsetHeight elemen adalah 0 saat disembunyikan.

Pada panggilan pertama, Anda dapat mengubah ukuran tinggi iframe menjadi 1 piksel agar dapat terlihat. Kemudian, setelah nilai atribut offsetHeight tersedia, Anda dapat mengubah ukurannya ke tinggi yang sesuai.

Kode contoh berikut menunjukkan cara memvalidasi asal 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 saat alur UX selesai. Oleh karena itu, Anda dapat menempatkan cuplikan kode berikut di 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 sebagai gantinya.

Menyematkan Frame Menengah ke Halaman HTML

Tempatkan cuplikan kode berikut ke halaman HTML 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 menengah Anda.