Peringatan: Data ini disediakan menurut Kebijakan Data Pengguna Google . Harap tinjau dan patuhi kebijakan. Kegagalan untuk melakukannya dapat mengakibatkan penangguhan proyek atau akun.
Halaman ini diterjemahkan oleh Cloud Translation API.
Switch to English

Integrasikan One Tap melalui Iframe

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

Integrasi berbasis iframe menengah membawa beberapa fleksibilitas dan risiko:

  • UX yang disematkan untuk One Tap dan aliran UX berikutnya .

    Setelah One Tap UX selesai, Anda dapat menampilkan aliran UX berikutnya di dalam iframe perantara. Dengan demikian, One Tap dan UX berikutnya dapat disematkan ke halaman konten saat ini. Lihat contoh di bawah ini.

    Contoh UX yang disematkan dengan iframe menengah.

    Tanpa iframe perantara, biasanya Anda memerlukan navigasi halaman penuh untuk menampilkan aliran UX berikutnya, yang mungkin mengganggu dalam beberapa kasus.

  • Integrasikan Sekali, dan Tampilkan Di Mana Saja .

    Semua kode integrasi One Tap (permintaan One Tap API dan penanganan UX selanjutnya) dienkapsulasi dalam iframe perantara. Pada halaman konten, di mana One Tap mungkin ditampilkan, yang perlu Anda lakukan hanyalah menyematkan iframe perantara.

    Arsitektur ini memungkinkan pemisahan masalah, dan dengan demikian mengurangi biaya integrasi dan pemeliharaan Anda.

  • Batasi Cakupan Eksposur Token ID .

    Token ID digunakan langsung oleh iframe perantara. Mereka tidak pernah diekspos ke halaman konten. Arsitektur ini secara dramatis dapat menurunkan cakupan eksposur token ID.

    Cara iframe perantara juga berfungsi dengan baik dengan situs web yang sudah memiliki sub domain terkait masuk khusus (misalnya, login.example.com) dan beberapa sub domain terkait konten (misalnya, sports.example.com dan games.example.com) .

  • Satu Ketuk Menampilkan Domain .

    Seperti yang diwajibkan oleh kebijakan OAuth Google, semua domain yang menerima tanggapan OAuth harus terdaftar sebelumnya di Konsol API Google. Dengan integrasi One Tap normal, developer perlu melakukan pradaftar semua domain yang mungkin ditampilkan One Tap, karena token ID akan dikirimkan kembali ke domain ini. Beberapa situs web mengizinkan penggunanya untuk membuat sub domain secara dinamis, yang tidak mungkin untuk didaftarkan sebelumnya. Akibatnya, One Tap tidak dapat ditampilkan di sub domain yang dibuat secara dinamis ini.

    Masalah ini dapat diatasi dengan memanfaatkan iframe perantara. Dalam kasus ini, hanya domain iframe perantara yang perlu didaftarkan sebelumnya. Tidak perlu mendaftarkan domain halaman konten, karena Token ID tidak diekspos ke halaman konten ini.

  • Dukungan AMP .

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

    1. Pustaka atau kode JS khusus tidak diperbolehkan.

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

    Masalah ini dapat diperbaiki dengan memanfaatkan arsitektur iframe perantara. Setelah integrasi One Tap selesai 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 .

    Pengembang harus mengambil tindakan untuk mencegah iframe perantara disematkan ke domain yang tidak terduga. Misalnya, malicious.com mungkin menyematkan iframe perantara Anda, dan dengan demikian menampilkan One Tap UX Anda di situs web mereka. 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 mengirim data sensitif keamanan atau privasi ke frame induknya, seperti token ID, nilai cookie sesi, data pengguna, dll. Kegagalan untuk mengikuti aturan ini dapat menyebabkan situs Anda masuk bahaya.

Render One Tap di Intermediate Iframe

Untuk menampilkan One Tap di dalam iframe perantara, tempatkan cuplikan kode berikut ke dalam kode HTML dari 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 muncul, 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) Render Subsequent UX di Intermediate Iframe

Dalam respons login, Anda dapat mengembalikan 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 selanjutnya. 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 masuk atau pendaftaran lengkap dapat diterapkan sebagai UX tersemat.

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

  1. Iframe perantara disetel ke tersembunyi saat One Tap UX selesai.

  2. Nilai atribut offsetHeight dari sebuah elemen adalah 0 jika disembunyikan.

Pada panggilan pertama, Anda dapat mengubah ukuran tinggi iframe menjadi 1px hanya untuk membuatnya terlihat. Kemudian, setelah nilai atribut offsetHeight tersedia, Anda dapat mengubah ukurannya ke ketinggian yang sesuai.

Kode contoh berikut menunjukkan cara memvalidasi asal induk dan mengubah ukuran iframe perantara untuk UI setelah One Tap UX.

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

Hapus Iframe Menengah di UX Selesai

Anda harus memberi tahu halaman konten induk untuk menghapus iframe perantara ketika aliran UX selesai. Untuk tujuan ini, Anda dapat menempatkan cuplikan kode berikut di kode respons login Anda.

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentDone();
</script>

Jika aliran UX dilewati, metode notifyParentClose perlu dipanggil sebagai gantinya.

Sematkan Iframe Menengah ke dalam Halaman HTML

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