Peringatan: Data ini disediakan berdasarkan Kebijakan Data Pengguna Google. Harap tinjau dan patuhi kebijakan tersebut. Ketidakpatuhan terhadap persyaratan tersebut dapat mengakibatkan penangguhan project atau akun.

Mengintegrasikan Satu Ketuk melalui Iframe

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

Integrasi berbasis iframe menengah menghadirkan beberapa fleksibilitas dan risiko:

  • UX Tersemat untuk Satu Ketuk dan alur UX berikutnya.

    Setelah UX Sekali Ketuk selesai, Anda dapat menampilkan alur UX berikutnya di dalam iframe menengah. Dengan demikian, Sekali Ketuk dan UX berikutnya dapat disematkan ke dalam halaman konten saat ini. Lihat contoh di bawah.

    Contoh UX tersemat dengan iframe menengah.

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

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

  • Batasi Cakupan Paparan 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 web yang sudah memiliki subdomain terkait proses masuk khusus (misalnya, login.example.com) dan beberapa subdomain terkait konten (misalnya, sports.example.com dan game.example.com).

  • Sekali Ketuk Domain Tampilan.

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

    Masalah ini dapat diperbaiki dengan memanfaatkan iframe menengah. Dalam hal ini, hanya domain iframe menengah 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 halaman lain (AMP Viewer).

    Masalah ini dapat diperbaiki dengan memanfaatkan arsitektur iframe menengah. Setelah integrasi Sekali Ketuk dilakukan dalam 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 melakukan tindakan untuk mencegah iframe perantara disematkan ke domain tak terduga. Misalnya, berbahaya.com dapat menyematkan iframe menengah, sehingga menghapus UX Sekali Ketuk di situs mereka. Hal ini tentu akan menyebabkan banyak masalah privasi dari pengguna akhir.

  • Risiko Keamanan.

    Karena masalah framing yang disebutkan di atas, iframe menengah Anda tidak boleh mengirim data yang sensitif terhadap privasi atau keamanan 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 Sekali Ketuk di dalam iframe perantara, tempatkan cuplikan kode berikut ke 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 ditampilkan, 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 dapat 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 menengah, 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.

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

  2. Nilai atribut offsetHeight dari sebuah elemen adalah 0 jika 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.

Contoh kode 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. Untuk tujuan ini, Anda dapat menempatkan cuplikan kode berikut dalam 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 yang Anda inginkan untuk ditampilkan oleh Google One:

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