Mengintegrasikan Satu Ketuk melalui Iframe

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

Google One dapat dirender di dalam iframe (selanjutnya disebut sebagai Frame Iframe) yang dihosting oleh situs Anda sendiri. Tidak ada perubahan yang dapat dirasakan pada UX Sekali Ketuk saat iframe perantara digunakan.

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

    Contoh UX tersemat dengan iframe perantara.

    Tanpa iframe menengah, 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 One Tap API dan penanganan UX berikutnya) dienkapsulasi dalam iframe perantara. Di halaman konten, tempat One Tap dapat ditampilkan, Anda hanya perlu menyematkan iframe perantara.

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

  • Batasi Cakupan Eksposur Token ID.

    Token ID dipakai langsung oleh iframe perantara. Tidak pernah ditampilkan di halaman konten. Arsitektur ini dapat mengurangi cakupan eksposur token ID secara drastis.

    Cara iframe menengah juga berfungsi baik dengan situs yang sudah memiliki subdomain terkait login khusus (misalnya, login.example.com) dan beberapa sub-domain terkait konten (misalnya, sports.example.com dan game.example.com).

  • Menampilkan Domain Sekali Ketuk.

    Seperti yang diwajibkan oleh kebijakan OAuth Google, semua domain yang menerima respons OAuth harus didaftarkan sebelumnya di Google API Console. Dengan integrasi Sekali Ketuk yang normal, developer harus melakukan prapendaftaran untuk semua domain yang mungkin ditampilkan One Tap, karena token ID akan diteruskan kembali ke domain tersebut. Beberapa situs memungkinkan penggunanya membuat sub-domain secara dinamis, yang tidak mungkin dilakukan dengan pradaftar. Akibatnya, Sekali Ketuk tidak dapat ditampilkan dalam 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. 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.

    1. Library atau kode JS kustom tidak diizinkan.

    2. Cache AMP dapat merender formulir 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 non-AMP HTML.

  • Risiko Privasi.

    Developer harus mengambil tindakan untuk mencegah iframe perantara disematkan ke dalam domain yang tidak diharapkan. Misalnya, berbahaya.com dapat menyematkan iframe perantara, sehingga menghapus UX Sekali Ketuk di situs mereka. Hal ini pasti menimbulkan banyak masalah privasi dari pengguna akhir.

  • Risiko Keamanan.

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

Merender Sekali 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) Merender UX Berikutnya dalam Iframe Menengah

Dalam respons login, Anda dapat menampilkan kode HTML apa pun, yang dapat menampilkan beberapa konten yang terlihat kepada pengguna akhir. Misalnya, meminta informasi profil tambahan, atau menyetujui TOS, dll. Setelah halaman dikirim, 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 menengah, alur UX login atau pendaftaran penuh dapat diterapkan sebagai UX tersemat.

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

  1. Iframe menengah 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 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 Iframe Menengah ke dalam Halaman HTML

Tempatkan cuplikan kode berikut ke dalam 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 perantara Anda.