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

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"

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"

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:
Tombol standar dengan latar belakang putihTombol ikon dengan latar belakang putihTombol yang dipersonalisasi dengan latar belakang putih
filled_blue Tema tombol berisi biru:
Tombol standar dengan latar belakang biruTombol ikon dengan latar belakang biruTombol yang dipersonalisasi dengan latar belakang biru
filled_black Tema tombol berisi hitam:
Tombol standar dengan latar belakang hitamTombol ikon dengan latar belakang hitamTombol yang dipersonalisasi dengan latar belakang 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:
Tombol standar yang besarTombol ikon besarTombol besar yang dipersonalisasi
medium Tombol berukuran sedang:
Tombol standar sedangTombol ikon medium
small Tombol kecil:
Tombol kecilTombol ikon 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":
Tombol standar berlabel 'Masuk dengan Google'Tombol ikon tanpa teks yang terlihat
signup_with Teks tombolnya adalah "Daftar dengan Google":
Tombol standar berlabel 'Daftar dengan Google'Tombol ikon tanpa teks yang terlihat
continue_with Teks tombolnya adalah "Lanjutkan dengan Google":
Tombol standar berlabel 'Lanjutkan dengan Google'Tombol ikon tanpa teks yang terlihat
signup_with Teks tombolnya adalah "Masuk":
Tombol standar berlabel 'Masuk'Tombol ikon tanpa teks yang terlihat

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 .
Tombol standar persegi panjangTombol ikon persegi panjangTombol persegi panjang yang dipersonalisasi
pill Tombol berbentuk pil. Jika digunakan untuk jenis tombol icon , maka itu sama dengan circle .
Tombol standar berbentuk pilTombol ikon berbentuk pilTombol pribadi berbentuk pil
circle Tombol berbentuk lingkaran. Jika digunakan untuk jenis kancing standard , maka sama dengan pill .
Tombol standar melingkarTombol ikon melingkarTombol melingkar yang dipersonalisasi
square Tombol berbentuk persegi. Jika digunakan untuk jenis tombol standard , maka sama dengan rectangular .
Tombol standar persegiTombol ikon persegiTombol persegi yang dipersonalisasi

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:
Tombol standar dengan logo G di sebelah kiri
center Logo Google rata tengah:
Tombol standar dengan logo G di 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.