Peringatan: Data ini disediakan menurut Kebijakan Data Pengguna Google . Harap tinjau dan patuhi kebijakan. Kegagalan untuk melakukannya dapat mengakibatkan penangguhan proyek atau akun.

Referensi API Komponen Non-AMP

Halaman referensi ini menjelaskan cara memuat iframe perantara ke halaman HTML.

Muat Pustaka JavaScript Iframe Menengah

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>

API HTML

Anda dapat memuat iframe perantara dengan menyertakan elemen HTML dengan atribut ID yang disetel ke g_id_intermediate_iframe . Lihat cuplikan kode contoh berikut:

<script src="https://accounts.google.com/gsi/intermediate"></script>
...
<div id="g_id_intermediate_iframe"
        data-src = "https://example.com/onetap_iframe.html">
</div>

Elemen dengan ID "g_id_intermediate_iframe"

Anda bisa meletakkan atribut data iframe perantara di elemen yang terlihat atau tidak terlihat, seperti <div> dan <span> . Satu-satunya persyaratan adalah ID elemen disetel ke g_id_intermediate_iframe . Jangan letakkan ID ini di beberapa elemen.

Tabel berikut mencantumkan atribut data dengan deskripsinya:

Atribut
data-src URI iframe perantara One Tap Anda
data-done Metode panggilan balik JavaScript yang akan dipicu saat One Tap UX selesai.

data-src

Atribut ini adalah URI iframe perantara One Tap Anda. Lihat tabel berikut untuk informasi lebih lanjut:

Tipe Yg dibutuhkan Contoh
tali Iya data-src="https://example.com/onetap_iframe.html"

data-selesai

Atribut ini adalah metode panggilan balik JavaScript yang akan dipicu saat One Tap UX selesai.

Secara default, halaman konten akan dimuat ulang ketika One Tap UX selesai. Anda bisa mengganti perilaku default dengan menyediakan callback selesai Anda sendiri. Lihat tabel berikut untuk informasi lebih lanjut:

Tipe Yg dibutuhkan Contoh
Fungsi Pilihan data-done="onOneTapSuccess"

API JavaScript

Anda dapat memuat iframe perantara dengan memanggil metode JavaScript.

Metode: google.accounts.id.initializeIntermediate

Metode google.accounts.id.initializeIntermediate memuat iframe perantara berdasarkan objek konfigurasi. Lihat contoh kode metode berikut ini:

google.accounts.id.initializeIntermediate(IntermediateConfig)

Contoh kode berikut mengimplementasikan metode google.accounts.id.initializeIntermediate dengan fungsi onload :

<script>
  window.onload = function () {
    google.accounts.initializeIntermediate({
      src: 'https://example.com/intermediate'
    });
  };
</script>

Jenis data: IntermediateConfig

Tabel berikut mencantumkan bidang dengan deskripsinya:

Bidang
src URI iframe perantara One Tap Anda
done Metode panggilan balik JavaScript akan dipicu saat One Tap UX adalah salah satunya.

src

Bidang ini adalah URI iframe perantara Satu Ketuk Anda. Lihat tabel berikut untuk informasi lebih lanjut:

Tipe Yg dibutuhkan Contoh
tali Iya src: "https://example.com/onetap_iframe.html"

selesai

Bidang ini adalah metode panggilan balik JavaScript yang akan dipicu saat One Tap UX selesai.

Secara default, halaman konten akan dimuat ulang ketika One Tap UX selesai. Anda dapat mengganti perilaku default dengan menyediakan callback selesai Anda sendiri. Lihat tabel berikut untuk informasi lebih lanjut:

Tipe Yg dibutuhkan Contoh
Fungsi Pilihan done: onOneTapSuccess