Referensi ini menjelaskan API atribut data One Tap HTML, yang Anda gunakan untuk menampilkan perintah One Tap di halaman web Anda.
Elemen dengan ID "g_id_onload"
Anda dapat meletakkan atribut data One Tap di setiap elemen yang terlihat atau tidak terlihat, seperti <div> dan <span> . Satu-satunya persyaratan adalah ID elemen disetel ke g_id_onload . Jangan letakkan ID ini di beberapa elemen.
Atribut data
Tabel berikut mencantumkan atribut data dengan deskripsinya:
| Atribut | |
|---|---|
data-client_id | ID klien aplikasi Anda |
data-auto_select | Mengaktifkan pemilihan otomatis. |
data-login_uri | URL titik akhir login Anda |
data-callback | Nama fungsi penangan token ID JavaScript |
data-native_login_uri | URL titik akhir pengendali kredensial kata sandi Anda |
data-native_callback | Nama fungsi pengendali kredensial kata sandi JavaScript |
data-native_id_param | Nama parameter untuk nilai credential.id |
data-native_password_param | Nama parameter untuk nilai credential.password |
data-cancel_on_tap_outside | Mengontrol apakah akan membatalkan permintaan jika pengguna mengklik di luar perintah. |
data-prompt_parent_id | ID DOM dari elemen kontainer perintah One Tap. |
data-skip_prompt_cookie | Lewati Satu Ketuk jika cookie yang ditentukan memiliki nilai yang tidak kosong. |
data-nonce | String acak untuk token ID |
data-context | Judul dan kata-kata dalam perintah One Tap |
data-moment_callback | Nama fungsi pendengar pemberitahuan status UI prompt |
data-state_cookie_domain | Jika Anda perlu memanggil One Tap di domain induk dan subdomainnya, teruskan domain induk ke atribut ini sehingga satu cookie bersama digunakan. |
data-allowed_parent_origin | Asal yang diizinkan untuk menyematkan iframe perantara. One Tap akan berjalan dalam mode iframe menengah jika atribut ini ada. |
data-intermediate_iframe_close_callback | Mengganti perilaku iframe perantara default saat pengguna menutup One Tap secara manual. |
Bagian berikut memberikan setiap jenis atribut, apakah itu wajib, dan sebuah contoh.
data-client_id
Atribut ini adalah ID klien aplikasi Anda, yang ditemukan dan dibuat di Google Developers Console. Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| tali | Iya | data-client_id="CLIENT_ID.apps.googleusercontent.com" |
data-auto_select
Atribut ini menentukan apakah token ID harus dikembalikan secara otomatis tanpa interaksi pengguna, jika hanya ada satu sesi Google yang menyetujui aplikasi Anda sebelumnya. Nilai defaultnya false . Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| boolean | Pilihan | data-auto_select="true" |
data-login_uri
Atribut ini adalah URL titik akhir login Anda. Anda tidak diizinkan menyetel atribut data-login_uri dan data-callback . Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| URL | Diperlukan jika data-callback tidak disetel. | data-login_uri="https://example.com/login" |
panggilan balik data
Atribut ini adalah nama fungsi JavaScript yang menangani token ID yang dikembalikan. Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| tali | Diperlukan jika data-login_uri tidak disetel. | data-callback="handleToken" |
data-native_login_uri
Atribut ini adalah URL titik akhir pengendali kredensial kata sandi Anda. Jika Anda menyetel atribut data-native_login_uri atau atribut data-native_callback , library JavaScript akan kembali ke pengelola kredensial asli saat tidak ada sesi Google. Anda tidak diizinkan menyetel atribut data-native_callback dan data-native_login_uri . Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| tali | Pilihan | data-login_uri="https://example.com/password_login" |
data-native_callback
Atribut ini adalah nama fungsi JavaScript yang menangani kredensial sandi yang dikembalikan dari pengelola kredensial asli browser. Jika Anda menyetel atribut data-native_login_uri atau atribut data-native_callback , library JavaScript akan kembali ke pengelola kredensial asli saat tidak ada sesi Google. Anda tidak diizinkan menyetel data-native_callback dan data-native_login_uri . Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| tali | Pilihan | data-native_callback="handlePasswordCredential" |
data-native_id_param
Saat Anda mengirimkan kredensial kata sandi ke titik akhir pengendali kredensial kata sandi, Anda dapat menentukan nama parameter untuk bidang credential.id . Nama defaultnya adalah email . Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| URL | Pilihan | data-native_id_param="user_id" |
data-native_password_param
Saat Anda mengirimkan kredensial kata sandi ke titik akhir pengendali kredensial kata sandi, Anda dapat menentukan nama parameter untuk nilai credential.password . Nama defaultnya adalah password . Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| URL | Pilihan | data-native_password_param="pwd" |
data-cancel_on_tap_outside
Atribut ini mengatur apakah akan membatalkan permintaan One Tap jika pengguna mengklik di luar prompt. Nilai defaultnya true . Anda dapat menonaktifkannya dengan menyetel nilainya ke false . Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| boolean | Pilihan | data-cancel_on_tap_outside="false" |
data-prompt_parent_id
Atribut ini menyetel ID DOM dari elemen kontainer. Jika tidak diatur, perintah One Tap akan ditampilkan di sudut kanan atas jendela. Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| tali | Pilihan | data-prompt_parent_id="parent_id" |
data-skip_prompt_cookie
Atribut ini melewatkan One Tap jika cookie yang ditentukan memiliki nilai yang tidak kosong. Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| tali | Pilihan | data-skip_prompt_cookie="SID" |
data-nonce
Atribut ini adalah string acak yang digunakan oleh token ID untuk mencegah serangan replay. Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| tali | Pilihan | data-nonce="biaqbm70g23" |
konteks data
Atribut ini mengubah kata-kata dari judul dan pesan yang ditampilkan di prompt Satu Ketukan. Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| tali | Pilihan | data-context="use" |
Tabel berikut mencantumkan konteks yang tersedia dan deskripsinya:
| Konteks | |
|---|---|
signin | "Masuk dengan Google." |
signup | "Daftar dengan Google." |
use | "Gunakan dengan Google." |
data-moment_callback
Atribut ini adalah nama fungsi pendengar pemberitahuan status UI prompt. Untuk informasi selengkapnya, lihat jenis data PromptMomentNotification . Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| tali | Pilihan | data-moment_callback="logMomentNotification" |
data-state_cookie_domain
Jika Anda perlu menampilkan One Tap di domain induk dan subdomainnya, teruskan domain induk ke atribut ini sehingga satu cookie negara bersama digunakan. Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| tali | Pilihan | data-state_cookie_domain="example.com" |
data-allow_parent_origin
Asal yang diizinkan untuk menyematkan iframe perantara. One Tap akan berjalan dalam mode iframe menengah jika atribut ini ada. Lihat tabel berikut untuk informasi lebih lanjut:
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| string atau larik string | Pilihan | data-allowed_parent_origin="https://example.com" |
Tabel berikut mencantumkan tipe nilai yang didukung dan deskripsinya.
| Jenis Nilai | ||
|---|---|---|
string | URI domain tunggal. | "https://example.com" |
string array | Daftar URI domain yang dipisahkan koma. | "https: //news.example.com,https: //local.example.com" |
Jika nilai atribut data-allowed_parent_origin tidak valid, inisialisasi Satu Ketuk dari mode iframe perantara akan gagal dan berhenti.
data-intermediate_iframe_close_callback
Mengganti perilaku iframe perantara default saat pengguna menutup One Tap secara manual dengan mengetuk tombol 'X' di One Tap UI. Perilaku defaultnya adalah segera menghapus iframe perantara dari DOM.
Bidang data-intermediate_iframe_close_callback hanya berlaku dalam mode iframe menengah. Dan itu hanya berdampak pada iframe menengah, bukan iframe Satu Ketuk. UI One Tap dihapus sebelum callback dipanggil.
| Tipe | Yg dibutuhkan | Contoh |
|---|---|---|
| fungsi | Pilihan | data-intermediate_iframe_close_callback='logBeforeClose' |
Integrasi sisi server
Titik akhir sisi server Anda perlu menangani permintaan HTTP POST berikut.
Titik akhir penangan token ID
Titik akhir penangan token ID memproses token ID yang diambil dengan One Tap. Berdasarkan status akun yang sesuai, Anda dapat membuat pengguna login dan mengarahkan mereka ke halaman pendaftaran atau mengarahkan mereka ke halaman penautan akun untuk informasi tambahan.
Permintaan HTTP POST berisi informasi berikut:
| Format | Nama | Deskripsi |
|---|---|---|
| Kue kering | g_csrf_token | Ini adalah string acak, yang diubah pada setiap permintaan ke titik akhir penangan. |
| Parameter permintaan | g_csrf_token | Ini adalah string, yang sama dengan nilai cookie sebelumnya. |
| Parameter permintaan | credential | Ini adalah token ID yang dikeluarkan oleh Google. |
| Parameter permintaan | select_by | Beginilah cara kredensial dipilih. |
Tabel berikut mencantumkan nilai yang mungkin untuk bidang select_by . Anda dapat menggunakan informasi ini untuk analisis data dan lainnya.
| Nilai | |
|---|---|
auto | Kredensial tidak dipilih oleh interaksi pengguna. |
user | Kredensial dipilih oleh tindakan pengguna. |
user_1tap | Kredensial baru saja disetujui oleh tindakan pengguna dengan 1-tap. Ini hanya berlaku untuk Chrome v75 dan lebih tinggi. |
user_2tap | Kredensial baru saja disetujui oleh tindakan pengguna setelah mereka mengkonfirmasi persetujuan mereka di jendela pop-up. Ini adalah UX 2-tap di browser berbasis non-Chromium. |
Titik akhir pengendali kredensial kata sandi
Titik akhir pengendali kredensial kata sandi memproses kredensial kata sandi yang diambil oleh pengelola kredensial asli.
Permintaan HTTP POST berisi informasi berikut:
| Format | Nama | Deskripsi |
|---|---|---|
| Kue kering | g_csrf_token | Ini adalah string acak, yang diubah pada setiap permintaan ke titik akhir penangan. |
| Parameter permintaan | g_csrf_token | Ini adalah string, yang sama dengan nilai cookie sebelumnya. |
| Parameter permintaan | email | Ini adalah token ID yang dikeluarkan oleh Google. |
| Parameter permintaan | password | Beginilah cara kredensial dipilih. |