Referensi API iframe perantara

Halaman referensi ini menjelaskan Intermediate iframe API, yang digunakan untuk menyematkan dialog One Tap ke halaman web menggunakan iframe.

Lihat Mengintegrasikan fitur Login Sekali Ketuk menggunakan iframe untuk mengetahui informasi selengkapnya tentang cara menggunakan iframe perantara.

Memuat Library JavaScript Iframe Menengah

Tempatkan cuplikan kode berikut ke halaman HTML mana pun yang ingin Anda tampilkan dengan fitur Ketuk untuk menampilkan Google One:

<script src="https://accounts.google.com/gsi/intermediate"></script>

HTML API

Anda dapat memuat iframe perantara dengan menyertakan elemen HTML dengan atribut ID yang ditetapkan ke g_id_intermediate_iframe. Lihat cuplikan contoh kode 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 dapat menempatkan atribut data iframe perantara dalam elemen yang terlihat atau tidak terlihat, seperti <div> dan <span>. Satu-satunya persyaratan adalah ID elemen ditetapkan ke g_id_intermediate_iframe. Jangan menempatkan ID ini pada beberapa elemen.

Tabel berikut mencantumkan atribut data beserta deskripsinya:

Atribut
data-src URI iframe perantara login sekali ketuk Anda
data-done Metode callback JavaScript yang akan dipicu saat UX Login Sekali Ketuk selesai.

data-src

Atribut ini adalah URI iframe perantara fitur Login Sekali Ketuk Anda. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

Jenis Wajib Contoh
string Ya data-src="https://example.com/onetap_iframe.html"

data-done

Atribut ini adalah metode callback JavaScript yang dipicu saat UX Login Sekali Ketuk selesai.

Secara default, halaman konten dimuat ulang saat UX Satu Ketuk selesai. Anda dapat mengganti perilaku default dengan memberikan callback selesai Anda sendiri. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

Jenis Wajib Contoh
Fungsi Opsional data-done="onOneTapSuccess"

JavaScript API

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 berikut dari metode:

google.accounts.id.initializeIntermediate(IntermediateConfig)

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

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

Jenis data: IntermediateConfig

Tabel berikut mencantumkan kolom beserta deskripsinya:

Kolom
src URI iframe perantara login sekali ketuk Anda
done Metode callback JavaScript yang akan dipicu saat UX Login Sekali Ketuk adalah satu.

src

Kolom ini adalah URI iframe perantara One Tap Anda. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

Jenis Wajib Contoh
string Ya src: "https://example.com/onetap_iframe.html"

selesai

Kolom ini adalah metode callback JavaScript yang akan dipicu saat UX Login Sekali Ketuk selesai.

Secara default, halaman konten dimuat ulang saat UX Satu Ketuk selesai. Anda dapat mengganti perilaku default dengan memberikan callback selesai Anda sendiri. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

Jenis Wajib Contoh
Fungsi Opsional done: onOneTapSuccess