Masuk Dengan referensi Google HTML API

Halaman referensi ini menjelaskan Masuk Dengan API atribut data HTML Google. Anda dapat menggunakan API untuk menampilkan perintah Satu Ketukan atau tombol Masuk Dengan Google di halaman web Anda.

Elemen dengan ID "g_id_onload"

Anda dapat menempatkan Masuk atribut Data Dengan Google dalam setiap elemen terlihat atau tidak terlihat, seperti <div> dan <span> . Satu-satunya persyaratan adalah bahwa ID elemen diatur ke g_id_onload . Jangan letakkan ID ini di banyak elemen.

Atribut data

Tabel berikut mencantumkan atribut data dengan deskripsinya:

Jenis atribut

Bagian berikut berisi detail tentang setiap jenis atribut dan contohnya.

data-klien_id

Atribut ini adalah ID klien aplikasi Anda, yang ditemukan dan dibuat di Google Developers Console. Lihat tabel berikut untuk informasi lebih lanjut:

data-auto_prompt

Atribut ini menentukan apakah akan menampilkan One tap atau tidak. Nilai default adalah true . Google Satu tap tidak akan ditampilkan bila nilai ini adalah false . Lihat tabel berikut untuk informasi lebih lanjut:

data-auto_select

Atribut ini menentukan apakah akan mengembalikan token ID secara otomatis atau tidak, tanpa interaksi pengguna apa pun, jika hanya satu sesi Google yang telah menyetujui aplikasi Anda. Nilai default adalah false . Lihat tabel berikut untuk informasi lebih lanjut:

data-login_uri

Atribut ini adalah URI titik akhir login Anda. Dapat dihilangkan jika halaman saat ini adalah halaman login Anda, dalam hal ini kredensial diposting ke halaman ini secara default.

Respons kredensial token ID diposting ke titik akhir login Anda saat tidak ada fungsi panggilan balik yang ditentukan dan pengguna mengklik tombol Masuk Dengan Google atau One Tap, atau masuk otomatis terjadi.

Lihat tabel berikut untuk informasi lebih lanjut:

Endpoint login Anda harus menangani permintaan POST yang berisi credential kunci dengan nilai token ID dalam tubuh.

Berikut ini adalah contoh permintaan ke titik akhir login Anda:

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

panggilan balik data

Atribut ini adalah nama fungsi JavaScript yang menangani token ID yang dikembalikan. Lihat tabel berikut untuk informasi lebih lanjut:

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

• The data-login_uri atribut diperlukan untuk Sign In Dengan tombol Google redirect modus UX, yang mengabaikan data-callback atribut.

• Salah satu dari dua atribut tersebut harus diatur agar Google satu Tap dan Google Sign-In tombol popup modus UX. Jika keduanya diatur, data-callback atribut memiliki prioritas lebih tinggi.

Fungsi JavaScript dalam namespace tidak didukung oleh API HTML. Sebagai gantinya, gunakan fungsi JavaScript global tanpa namespace. Misalnya, gunakan mylibCallback bukan mylib.callback .

data-asli_login_uri

Atribut ini adalah URL titik akhir penangan kredensial kata sandi Anda. Jika Anda mengatur baik data-native_login_uri atribut atau data-native_callback atribut, perpustakaan JavaScript jatuh kembali ke manajer credential asli ketika tidak ada sesi Google. Anda tidak diizinkan untuk menetapkan kedua data-native_callback dan data-native_login_uri atribut. Lihat tabel berikut untuk informasi lebih lanjut:

data-native_callback

Atribut ini adalah nama fungsi JavaScript yang menangani kredensial sandi yang dikembalikan dari pengelola kredensial asli browser. Jika Anda mengatur baik data-native_login_uri atribut atau data-native_callback atribut, perpustakaan JavaScript jatuh kembali ke manajer credential asli ketika tidak ada sesi Google. Anda tidak diizinkan untuk menetapkan kedua data-native_callback dan data-native_login_uri . Lihat tabel berikut untuk informasi lebih lanjut:

Fungsi JavaScript dalam namespace tidak didukung oleh API HTML. Sebagai gantinya, gunakan fungsi JavaScript global tanpa namespace. Misalnya, gunakan mylibCallback bukan mylib.callback .

data-native_id_param

Ketika Anda mengirimkan credential password untuk password handler credential titik akhir, Anda dapat menentukan nama parameter untuk credential.id lapangan. Nama default adalah email . Lihat tabel berikut untuk informasi lebih lanjut:

data-native_password_param

Ketika Anda mengirimkan credential password untuk password handler credential titik akhir, Anda dapat menentukan nama parameter untuk credential.password nilai. Nama default adalah password . Lihat tabel berikut untuk informasi lebih lanjut:

data-cancel_on_tap_outside

Atribut ini menetapkan apakah akan membatalkan permintaan Satu Ketukan atau tidak jika pengguna mengklik di luar perintah. Nilai default adalah true . Untuk menonaktifkannya, mengatur nilai untuk false . Lihat tabel berikut untuk informasi lebih lanjut:

data-prompt_parent_id

Atribut ini menetapkan ID DOM dari elemen penampung. Jika tidak disetel, perintah Satu Ketukan ditampilkan di sudut kanan atas jendela. Lihat tabel berikut untuk informasi lebih lanjut:

data-skip_Prompt_cookie

Atribut ini melewatkan Satu Ketukan jika cookie yang ditentukan memiliki nilai yang tidak kosong. Lihat tabel berikut untuk informasi lebih lanjut:

data-nonce

Atribut ini adalah string acak yang digunakan oleh token ID untuk mencegah serangan replay. Lihat tabel berikut untuk informasi lebih lanjut:

Panjang nonce terbatas pada ukuran JWT maksimum yang didukung oleh lingkungan Anda, dan batasan ukuran HTTP masing-masing browser dan server.

data-konteks

Atribut ini mengubah teks judul dan pesan yang ditampilkan di prompt Satu Ketukan. Lihat tabel berikut untuk informasi lebih lanjut:

Tabel berikut mencantumkan konteks yang tersedia dan deskripsinya:

data-moment_callback

Atribut ini adalah nama fungsi dari pendengar notifikasi status UI prompt. Untuk informasi lebih lanjut, lihat tipe data PromptMomentNotification . Lihat tabel berikut untuk informasi lebih lanjut:

Fungsi JavaScript dalam namespace tidak didukung oleh API HTML. Sebagai gantinya, gunakan fungsi JavaScript global tanpa namespace. Misalnya, gunakan mylibCallback bukan mylib.callback .

data-state_cookie_domain

Jika Anda perlu menampilkan One Tap di domain induk dan subdomainnya, teruskan domain induk ke atribut ini sehingga satu cookie status bersama digunakan. Lihat tabel berikut untuk informasi lebih lanjut:

data-ux_mode

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

Tabel berikut mencantumkan mode UX yang tersedia dan deskripsinya.

data-allowed_parent_origin

Asal yang diizinkan untuk menyematkan iframe perantara. One Tap akan berjalan dalam mode iframe perantara jika atribut ini ada. Lihat tabel berikut untuk informasi lebih lanjut:

Tabel berikut mencantumkan tipe nilai yang didukung dan deskripsinya.

Jika nilai data-allowed_parent_origin atribut tidak valid, inisialisasi Satu Tap dari modus iframe menengah akan gagal dan berhenti.

Awalan wildcard juga didukung. Misalnya, "https://*.example.com" akan cocok example.com dan subdomain di semua tingkatan (misalnya news.example.com , login.news.example.com ). Hal-hal yang perlu diingat saat menggunakan wildcard:

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

data-intermediate_iframe_close_callback

Mengganti perilaku iframe perantara default saat pengguna menutup One Tap secara manual dengan mengetuk tombol 'X' di UI One Tap. Perilaku default adalah segera menghapus iframe perantara dari DOM.

The data-intermediate_iframe_close_callback lapangan berlaku hanya dalam modus iframe menengah. Dan itu hanya berdampak pada iframe perantara, bukan iframe Satu Ketuk. One Tap UI dihapus sebelum callback dipanggil.

Fungsi JavaScript dalam namespace tidak didukung oleh API HTML. Sebagai gantinya, gunakan fungsi JavaScript global tanpa namespace. Misalnya, gunakan mylibCallback bukan mylib.callback .

Elemen dengan kelas "g_id_signin"

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

Anda dapat merender 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:

Jenis atribut

Bagian berikut berisi detail tentang setiap jenis atribut dan contohnya.

tipe data

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

Tabel berikut mencantumkan jenis tombol yang tersedia dan deskripsinya:

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

data-tema

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

Tabel berikut mencantumkan tema yang tersedia dan deskripsinya:

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

ukuran data

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

Tabel berikut mencantumkan ukuran tombol yang tersedia dan deskripsinya.

Ukuran
large	Tombol besar:
medium	Tombol berukuran sedang:
small	Sebuah tombol kecil:

data-teks

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

Lihat tabel berikut untuk informasi lebih lanjut:

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 tombol. Nilai default adalah rectangular . Lihat tabel berikut untuk informasi lebih lanjut:

Tabel berikut mencantumkan bentuk tombol yang tersedia dan deskripsinya:

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

data-logo_alignment

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

Tabel berikut mencantumkan perataan yang tersedia dan deskripsinya:

logo_alignment
left	Rata kiri logo Google:
center	Rata tengah logo Google:

lebar data

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

Lihat tabel berikut untuk informasi lebih lanjut:

data-lokal

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:

Integrasi sisi server

Anda endpoint server-side harus menangani mengikuti HTTP POST permintaan.

Titik akhir penangan token ID

Titik akhir pengendali token ID memproses token ID. Berdasarkan status akun terkait, Anda dapat memasukkan pengguna dan mengarahkan mereka ke halaman pendaftaran atau mengarahkan mereka ke halaman penautan akun untuk informasi tambahan.

HTTP POST request berisi informasi berikut:

Ketika diterjemahkan , ID terlihat tanda seperti contoh berikut:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

Tabel berikut berisi daftar nilai yang mungkin untuk select_by lapangan. Jenis tombol yang digunakan bersama dengan sesi dan status persetujuan digunakan untuk mengatur nilai,

• Pengguna menekan tombol One Tap atau Sign In With Google atau menggunakan proses masuk otomatis tanpa sentuhan.

• 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 membagikan kredensial, atau
  • sebelumnya telah memberikan persetujuan dan menggunakan Pilih Akun untuk memilih Akun Google.

Nilai bidang ini diatur ke salah satu jenis ini,

Titik akhir penangan kredensial kata sandi

Titik akhir pengendali kredensial kata sandi memproses kredensial kata sandi yang diambil oleh pengelola kredensial asli.

HTTP POST request berisi informasi berikut: