Masuk dengan referensi Google HTML API

Halaman referensi ini menjelaskan API atribut data Sign In With Google HTML. Anda dapat menggunakan API untuk menampilkan perintah Sekali Ketuk atau tombol Masuk Dengan Google di halaman web Anda.

Elemen dengan ID "g_id_onload"

Anda dapat meletakkan atribut data Masuk Dengan Google 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_prompt`	Tampilkan Google One tap.
`data-auto_select`	Mengaktifkan pemilihan otomatis di Google One Tap.
`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-ux_mode`	Alur UX tombol Masuk Dengan Google
`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.

Jenis atribut

Bagian berikut berisi detail tentang setiap jenis atribut dan 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_prompt

Atribut ini menentukan apakah akan menampilkan Satu ketukan atau tidak. Nilai defaultnya true . Ketukan Google One tidak akan ditampilkan jika nilai ini false . Lihat tabel berikut untuk informasi lebih lanjut:

Tipe	Yg dibutuhkan	Contoh
boolean	Pilihan	`data-auto_prompt="true"`

data-auto_select

Atribut ini menentukan apakah akan mengembalikan token ID secara otomatis, tanpa interaksi pengguna, jika hanya satu sesi Google yang menyetujui aplikasi Anda. 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. Lihat tabel berikut untuk informasi lebih lanjut:

Tipe	Yg dibutuhkan	Contoh
URL	Diperlukan untuk mode `redirect` UX	`data-login_uri="https://example.com/login"`

data-callback

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

Salah satu atribut data-login_uri dan data-callback dapat digunakan. Itu tergantung pada komponen berikut dan konfigurasi mode UX:

Atribut data-login_uri diperlukan untuk mode UX redirect tombol Masuk Dengan Google, yang mengabaikan atribut data-callback .
Salah satu dari dua atribut ini harus disetel untuk Google One Tap dan mode UX popup tombol Masuk Google. Jika keduanya disetel, atribut data-callback memiliki prioritas lebih tinggi.

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 . Untuk menonaktifkannya, setel 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 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 teks judul dan pesan yang ditampilkan di prompt One Tap. 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-ux_mode

Atribut ini menyetel aliran UX yang digunakan oleh tombol Masuk Dengan Google. Nilai defaultnya adalah popup . Atribut ini tidak berdampak pada One Tap UX. Lihat tabel berikut untuk informasi lebih lanjut:

Tipe	Yg dibutuhkan	Contoh
tali	Pilihan	`data-ux_mode="redirect"`

Tabel berikut mencantumkan mode UX yang tersedia dan deskripsinya.

Mode UX
`popup`	Melakukan aliran UX masuk di jendela pop-up.
`redirect`	Melakukan aliran UX masuk dengan pengalihan halaman penuh.

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.

Awalan karakter pengganti juga didukung. Misalnya, "https://*.example.com" akan cocok dengan example.com dan subdomainnya di semua level (mis. news.example.com , login.news.example.com ). Hal-hal yang perlu diingat saat menggunakan karakter pengganti:

String pola tidak boleh hanya terdiri dari karakter pengganti dan domain level teratas. Misalnya https://*.com dan https://*.co.uk tidak valid; Seperti disebutkan di atas, "https://*.example.com" akan cocok dengan example.com dan subdomainnya. Anda juga dapat menggunakan daftar yang dipisahkan koma untuk mewakili 2 domain berbeda. Misalnya, "https://example1.com,https://*.example2.com" akan cocok dengan domain example1.com , example2.com dan subdomain dari example2.com
Domain karakter pengganti harus dimulai dengan skema https: // yang aman. "*.example.com" akan dianggap tidak valid.

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

Elemen dengan kelas "g_id_signin"

Jika Anda menambahkan g_id_signin ke atribut class elemen, elemen tersebut akan g_id_signin sebagai tombol Masuk Dengan Google.

Anda dapat membuat beberapa tombol Masuk Dengan Google di halaman yang sama. Setiap tombol dapat memiliki pengaturan visualnya sendiri. Pengaturan ditentukan oleh atribut data berikut.

Atribut Data Visual

Tabel berikut mencantumkan atribut data visual dan deskripsinya:

Atribut
`data-type`	Jenis tombol: ikon, atau tombol standar.
`data-theme`	Tema tombol. Misalnya putih atau biru.
`data-size`	Ukuran tombol. Misalnya kecil atau besar.
`data-text`	Teks tombol. Misalnya, "Masuk dengan Google" atau "Daftar dengan Google".
`data-shape`	Bentuk kancingnya. Misalnya persegi panjang atau melingkar.
`data-logo_alignment`	Perataan logo Google: kiri atau tengah.
`data-width`	Lebar tombol, dalam piksel.
`data-locale`	Teks tombol dirender dalam bahasa yang disetel dalam atribut ini.

Jenis atribut

Bagian berikut berisi detail tentang setiap jenis atribut dan contoh.

tipe data

Jenis tombol. Nilai defaultnya adalah standard . Lihat tabel berikut untuk informasi lebih lanjut:

Tipe	Yg dibutuhkan	Contoh
tali	Iya	`data-type="icon"`

Tabel berikut mencantumkan jenis tombol yang tersedia dan deskripsinya:

Tipe
`standard`	Tombol dengan teks atau informasi yang dipersonalisasi:
`icon`	Tombol ikon tanpa teks:

tema data

Tema tombol. Nilai defaultnya adalah outline . Lihat tabel berikut untuk informasi lebih lanjut:

Tipe	Yg dibutuhkan	Contoh
tali	Pilihan	`data-theme="filled_blue"`

Tabel berikut mencantumkan tema yang tersedia dan deskripsinya:

Tema
`outline`	Tema tombol standar:
`filled_blue`	Tema tombol berisi biru:
`filled_black`	Tema tombol berisi hitam:

ukuran data

Ukuran tombol. Nilai defaultnya large . Lihat tabel berikut untuk informasi lebih lanjut:

Tipe	Yg dibutuhkan	Contoh
tali	Pilihan	`data-size="small"`

Tabel berikut mencantumkan ukuran tombol yang tersedia dan deskripsinya.

Ukuran
`large`	Tombol besar:
`medium`	Tombol berukuran sedang:
`small`	Tombol kecil:

data-teks

Teks tombol. Nilai defaultnya adalah signin_with . Tidak ada perbedaan visual untuk teks tombol ikon yang memiliki atribut data-text berbeda. Satu-satunya pengecualian adalah saat teks dibaca untuk aksesibilitas layar.

Lihat tabel berikut untuk informasi lebih lanjut:

Tipe	Yg dibutuhkan	Contoh
tali	Pilihan	`data-text="signup_with"`

Tabel berikut mencantumkan teks tombol yang tersedia dan deskripsinya:

Teks
`signin_with`	Teks tombolnya adalah "Masuk dengan Google":
`signup_with`	Teks tombolnya adalah "Daftar dengan Google":
`continue_with`	Teks tombolnya adalah "Lanjutkan dengan Google":
`signup_with`	Teks tombolnya adalah "Masuk":

bentuk data

Bentuk kancingnya. Nilai defaultnya adalah rectangular . Lihat tabel berikut untuk informasi lebih lanjut:

Tipe	Yg dibutuhkan	Contoh
tali	Pilihan	`data-shape="rectangular"`

Tabel berikut mencantumkan bentuk tombol yang tersedia dan deskripsinya:

Bentuk
`rectangular`	Tombolnya berbentuk persegi panjang. Jika digunakan untuk jenis tombol `icon` , itu sama dengan `square` .
`pill`	Tombol berbentuk pil. Jika digunakan untuk jenis tombol `icon` , maka itu sama dengan `circle` .
`circle`	Tombol berbentuk lingkaran. Jika digunakan untuk jenis kancing `standard` , maka sama dengan `pill` .
`square`	Tombol berbentuk persegi. Jika digunakan untuk jenis tombol `standard` , maka sama dengan `rectangular` .

data-logo_alignment

Penjajaran logo Google. Nilai defaultnya left . Atribut ini hanya berlaku untuk jenis tombol standard . Lihat tabel berikut untuk informasi lebih lanjut:

Tipe	Yg dibutuhkan	Contoh
tali	Pilihan	`data-logo_alignment="center"`

Tabel berikut mencantumkan perataan yang tersedia dan deskripsinya:

logo_alignment
`left`	Logo Google rata kiri:
`center`	Logo Google rata tengah:

lebar data

Lebar tombol minimum, dalam piksel. Lebar maksimum yang tersedia adalah 400 piksel.

Lihat tabel berikut untuk informasi lebih lanjut:

Tipe	Yg dibutuhkan	Contoh
tali	Pilihan	`data-width=400`

data-locale

Lokal teks tombol yang telah ditentukan sebelumnya. Jika tidak disetel, lokal default browser atau preferensi pengguna sesi Google akan digunakan. Oleh karena itu, pengguna yang berbeda mungkin melihat versi berbeda dari tombol yang dilokalkan, dan mungkin dengan ukuran yang berbeda.

Lihat tabel berikut untuk informasi lebih lanjut:

Tipe	Yg dibutuhkan	Contoh
tali	Pilihan	`data-locale="zh_CN"`

Integrasi sisi server

Titik akhir sisi server Anda harus menangani permintaan HTTP POST berikut.

Titik akhir penangan token ID

Titik akhir penangan token ID memproses token ID. 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`	String acak yang berubah dengan setiap permintaan ke titik akhir penangan.
Parameter permintaan	`g_csrf_token`	String yang sama dengan nilai cookie sebelumnya, `g_csrf_token .`
Parameter permintaan	`credential`	Token ID yang dikeluarkan Google.
Parameter permintaan	`select_by`	Bagaimana kredensial dipilih.

Tabel berikut mencantumkan nilai yang mungkin untuk bidang select_by . Jenis tombol yang digunakan bersama dengan sesi dan status persetujuan digunakan untuk menyetel nilainya,

Pengguna menekan tombol Sekali Ketuk atau Masuk Dengan Google atau menggunakan proses masuk Otomatis tanpa sentuh.
Sesi yang ada ditemukan, atau pengguna memilih dan masuk ke Akun Google untuk membuat sesi baru.
Sebelum membagikan kredensial token ID dengan aplikasi Anda, pengguna juga
- menekan tombol Konfirmasi untuk memberikan persetujuan mereka untuk berbagi kredensial, atau
- sebelumnya telah memberikan persetujuan dan menggunakan Pilih Akun untuk memilih Akun Google.

Nilai bidang ini ditetapkan ke salah satu jenis ini,

Nilai	Deskripsi
`auto`	Masuk otomatis dari pengguna dengan sesi yang ada yang sebelumnya telah memberikan izin untuk berbagi kredensial.
`user`	Seorang pengguna dengan sesi yang ada yang sebelumnya telah memberikan persetujuan menekan tombol One Tap 'Continue as' untuk membagikan kredensial.
`user_1tap`	Seorang pengguna dengan sesi yang ada menekan tombol One Tap 'Continue as' untuk memberikan persetujuan dan membagikan kredensial. Hanya berlaku untuk Chrome v75 dan lebih tinggi.
`user_2tap`	Seorang pengguna tanpa sesi yang ada menekan tombol One Tap 'Continue as' untuk memilih akun dan kemudian menekan tombol Konfirmasi di jendela pop-up untuk memberikan persetujuan dan membagikan kredensial. Berlaku untuk browser berbasis non-Chromium.
`btn`	Seorang pengguna dengan sesi yang sudah ada yang sebelumnya memberikan persetujuan menekan tombol Masuk Dengan Google dan memilih Akun Google dari 'Pilih Akun' untuk membagikan kredensial.
`btn_confirm`	Seorang pengguna dengan sesi yang ada menekan tombol Masuk Dengan Google dan menekan tombol Konfirmasi untuk memberikan persetujuan dan berbagi kredensial.
`btn_add_session`	Seorang pengguna tanpa sesi yang sebelumnya diberikan persetujuan menekan tombol Masuk Dengan Google untuk memilih Akun Google dan membagikan kredensial.
`btn_confirm_add_session`	Pengguna tanpa sesi yang ada terlebih dahulu menekan tombol Masuk Dengan Google untuk memilih Akun Google, lalu menekan tombol Konfirmasi untuk menyetujui dan membagikan kredensial.

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`	String acak yang berubah dengan setiap permintaan ke titik akhir penangan.
Parameter permintaan	`g_csrf_token`	String yang sama dengan nilai cookie sebelumnya, `g_csrf_token` .
Parameter permintaan	`email`	Token ID ini yang dikeluarkan oleh Google.
Parameter permintaan	`password`	Bagaimana kredensial dipilih.