Referensi Login dengan Google HTML API

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

Elemen dengan ID "g_id_onload"

Anda dapat menempatkan atribut data Login Dengan Google di elemen yang terlihat atau tidak terlihat, seperti <div> dan <span>. Satu-satunya persyaratan adalah ID elemen ditetapkan ke g_id_onload. Jangan letakkan ID ini pada banyak elemen.

Atribut data

Tabel berikut mencantumkan atribut data beserta deskripsinya:

Atribut
data-client_id Client ID aplikasi Anda
data-auto_prompt Tampilkan ketukan Google One.
data-auto_select Mengaktifkan pemilihan otomatis di Google One Tap.
data-login_uri URL endpoint login Anda
data-callback Nama fungsi pengendali token ID JavaScript
data-native_login_uri URL endpoint pengendali kredensial sandi Anda
data-native_callback Nama fungsi pengendali kredensial 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 dialog jika pengguna mengklik di luar dialog.
data-prompt_parent_id ID DOM elemen penampung perintah Sekali Ketuk
data-skip_prompt_cookie Melewati Sekali Ketuk jika cookie yang ditentukan memiliki nilai yang tidak kosong.
data-nonce String acak untuk token ID
data-context Judul dan kata dalam perintah Sekali Ketuk
data-moment_callback Nama fungsi pemroses notifikasi status UI perintah
data-state_cookie_domain Jika Anda perlu memanggil Sekali Ketuk di domain induk dan subdomainnya, teruskan domain induk ke atribut ini sehingga satu cookie bersama digunakan.
data-ux_mode Alur UX tombol Login Dengan Google
data-allowed_parent_origin Origin yang diizinkan untuk menyematkan iframe perantara. Sekali Ketuk berjalan dalam mode iframe perantara jika atribut ini ada.
data-intermediate_iframe_close_callback Mengganti perilaku iframe perantara default saat pengguna menutup Sekali Ketuk secara manual.
data-itp_support Mengaktifkan UX Sekali Ketuk yang diupgrade di browser ITP.
data-login_hint Lewati pemilihan akun dengan memberikan petunjuk pengguna.
data-hd Batasi pemilihan akun berdasarkan domain.
data-use_fedcm_for_prompt Izinkan browser mengontrol perintah login pengguna dan memediasi alur login antara situs Anda dan Google.

Jenis atribut

Bagian berikut berisi detail tentang setiap jenis atribut dan contohnya.

id_klien data

Atribut ini adalah client ID aplikasi Anda, yang ditemukan dan dibuat di Konsol Google Cloud. Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Ya data-client_id="CLIENT_ID.apps.googleusercontent.com"

prompt_data-otomatis

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

Jenis Wajib Contoh
boolean Opsional data-auto_prompt="true"

data-auto_select

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

Jenis Wajib Contoh
boolean Opsional data-auto_select="true"

data-login_uri

Atribut ini adalah URI endpoint login Anda.

Nilai harus sama persis dengan salah satu URI pengalihan yang diotorisasi untuk klien OAuth 2.0, yang Anda konfigurasi di Konsol API dan harus sesuai dengan aturan validasi URI Pengalihan kami.

Atribut ini dapat dihilangkan jika halaman saat ini adalah halaman login Anda, dalam hal kredensial diposting ke halaman ini secara default.

Respons kredensial token ID diposting ke endpoint login Anda jika tidak ada fungsi callback yang ditentukan dan pengguna mengklik tombol Login dengan Google atau Sekali Ketuk, atau penandatanganan otomatis terjadi.

Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Opsional Contoh
URL Default-nya adalah URI halaman saat ini, atau nilai yang Anda tetapkan.
Diabaikan jika data-ux_mode="popup" dan data-callback ditetapkan.		 data-login_uri="https://www.example.com/login"

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

Berikut adalah contoh permintaan untuk endpoint login Anda:

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

credential=ID_TOKEN

callback data

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

Jenis Wajib Contoh
string Wajib jika data-login_uri tidak ditetapkan. data-callback="handleToken"

Salah satu atribut data-login_uri dan data-callback mungkin digunakan. Hal ini bergantung pada konfigurasi komponen dan mode UX berikut:

  • Atribut data-login_uri diperlukan untuk tombol Login dengan Google mode UX redirect, yang mengabaikan atribut data-callback.

  • Salah satu dari dua atribut ini harus ditetapkan untuk Google One Tap dan mode UX tombol Login dengan Google popup. Jika keduanya ditetapkan, atribut data-callback memiliki prioritas yang 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-native_login_uri

Atribut ini adalah URL endpoint pengendali kredensial sandi Anda. Jika Anda menetapkan atribut data-native_login_uri atau atribut data-native_callback, library JavaScript akan kembali ke pengelola kredensial native saat tidak ada sesi Google. Anda tidak diizinkan menetapkan atribut data-native_callback dan data-native_login_uri. Lihat tabel berikut untuk mengetahui informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional data-login_uri="https://www.example.com/password_login"

callback_data_native

Atribut ini adalah nama fungsi JavaScript yang menangani kredensial sandi yang ditampilkan dari pengelola kredensial native browser. Jika Anda menetapkan atribut data-native_login_uri atau atribut data-native_callback, library JavaScript akan kembali ke pengelola kredensial native saat tidak ada sesi Google. Anda tidak diizinkan untuk menetapkan data-native_callback dan data-native_login_uri. Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional data-native_callback="handlePasswordCredential"

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

Saat mengirimkan kredensial sandi ke endpoint pengendali kredensial sandi, Anda dapat menentukan nama parameter untuk kolom credential.id. Nama default-nya adalah email. Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
URL Opsional data-native_id_param="user_id"

data-native_password_param

Saat Anda mengirimkan kredensial sandi ke endpoint pengendali kredensial sandi, Anda dapat menentukan nama parameter untuk nilai credential.password. Nama defaultnya adalah password. Lihat tabel berikut untuk informasi selengkapnya:

Jenis Wajib Contoh
URL Opsional data-native_password_param="pwd"

data-cancel_on_tap_outside

Atribut ini menetapkan apakah akan membatalkan permintaan Sekali Ketuk atau tidak jika pengguna mengklik di luar perintah. Nilai default-nya adalah true. Untuk menonaktifkannya, tetapkan nilai ke false. Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
boolean Opsional data-cancel_on_tap_outside="false"

data-prompt_parent_id

Atribut ini menetapkan ID DOM elemen penampung. Jika tidak disetel, perintah Sekali Ketuk akan ditampilkan di pojok kanan atas jendela. Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional data-prompt_parent_id="parent_id"

Atribut ini melewati fitur Sekali Ketuk jika cookie yang ditentukan memiliki nilai yang tidak kosong. Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional 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:

Jenis Wajib Contoh
string Opsional data-nonce="biaqbm70g23"

Panjang nonce dibatasi pada ukuran JWT maksimum yang didukung oleh lingkungan Anda, serta batasan ukuran HTTP server dan browser individual.

konteks data

Atribut ini mengubah teks judul dan pesan yang ditampilkan pada dialog Sekali Ketuk. Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional data-context="use"

Tabel berikut mencantumkan semua konteks yang tersedia dan deskripsinya:

Konteks
signin "Login dengan Google"
signup "Daftar dengan Google"
use "Gunakan dengan Google"

momen_data_callback

Atribut ini adalah nama fungsi pemroses notifikasi status UI perintah. Untuk mengetahui informasi selengkapnya, lihat jenis data PromptMomentNotification.

Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional data-moment_callback="logMomentNotification"

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

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

Jenis Wajib Contoh
string Opsional data-state_cookie_domain="example.com"

data-ux_mode

Atribut ini menetapkan alur UX yang digunakan oleh tombol Login Dengan Google. Nilai defaultnya adalah popup. Atribut ini tidak berdampak pada UX Sekali Ketuk. Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional data-ux_mode="redirect"

Tabel berikut mencantumkan mode UX yang tersedia dan deskripsinya.

Mode UX
popup Menjalankan alur UX login di jendela pop-up.
redirect Melakukan alur UX login melalui pengalihan halaman penuh.

data-allowed_parent_origin

Origin yang diizinkan untuk menyematkan iframe perantara. Sekali Ketuk berjalan dalam mode iframe perantara jika atribut ini disajikan. Lihat tabel berikut untuk mengetahui informasi lebih lanjut:

Jenis Wajib Contoh
string atau array string Opsional data-allowed_parent_origin="https://example.com"

Tabel berikut mencantumkan jenis nilai yang didukung dan deskripsinya.

Jenis Nilai
string URI domain tunggal. "https://contoh.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 Sekali Ketuk mode iframe perantara akan gagal dan berhenti.

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

  • String pola tidak dapat terdiri hanya dari karakter pengganti dan domain level teratas. Misalnya, https://*.com dan https://*.co.uk tidak valid; Seperti disebutkan di atas, "https://*.example.com" cocok dengan 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" cocok dengan domain example1.com, example2.com, dan subdomain dari example2.com
  • Domain karakter pengganti harus diawali dengan skema https:// yang aman, sehingga "*.example.com" dianggap tidak valid.

data-intermediate_iframe_close_callback

Mengganti perilaku iframe perantara default jika pengguna menutup Sekali Ketuk secara manual dengan mengetuk tombol 'X' di UI Sekali Ketuk. Perilaku default-nya adalah segera menghapus iframe perantara dari DOM.

Kolom data-intermediate_iframe_close_callback hanya berlaku dalam mode iframe menengah. dan ini hanya berdampak pada iframe perantara, bukan iframe Sekali Ketuk. UI Sekali Ketuk dihapus sebelum callback dipanggil.

Jenis Wajib Contoh
fungsi Opsional data-intermediate_iframe_close_callback="logBeforeClose"

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

dukungan_data-itp

Kolom ini menentukan apakah UX Sekali Ketuk yang diupgrade harus diaktifkan di browser yang mendukung Intelligent Tracking Prevention (ITP). Nilai defaultnya adalah false. Lihat tabel berikut untuk informasi selengkapnya:

Jenis Wajib Contoh
boolean Opsional data-itp_support="true"

data-login_hint

Jika aplikasi Anda mengetahui terlebih dahulu pengguna mana yang harus login, aplikasi dapat memberikan petunjuk login ke Google. Jika berhasil, pemilihan akun akan dilewati. Nilai yang diterima adalah: alamat email atau kolom sub token ID.

Untuk mengetahui informasi selengkapnya, lihat dokumentasi OpenID Connect untuk login_hint.

Jenis Wajib Contoh
String. Dapat berupa alamat email atau nilai kolom sub dari token ID. Opsional data-login_hint="elisa.beckett@gmail.com"

data-hd

Jika pengguna memiliki beberapa akun dan hanya boleh login dengan akun Workspace, gunakan ini untuk memberikan petunjuk nama domain kepada Google. Jika berhasil, akun pengguna yang ditampilkan selama pemilihan akun dibatasi untuk domain yang disediakan. Nilai karakter pengganti: * hanya menawarkan akun Workspace kepada pengguna, dan tidak mencakup akun konsumen (pengguna@gmail.com) selama pemilihan akun.

Untuk mengetahui informasi selengkapnya, lihat dokumentasi OpenID Connect untuk hd.

Jenis Wajib Contoh
String. Nama domain yang sepenuhnya memenuhi syarat atau *. Opsional data-hd="*"

data-use_fedcm_for_prompt

Izinkan browser mengontrol perintah login pengguna dan memediasi alur login antara situs Anda dan Google. Nilai defaultnya adalah false (salah). Lihat halaman Bermigrasi ke FedCM untuk informasi selengkapnya.

Jenis Wajib Contoh
boolean Opsional data-use_fedcm_for_prompt="true"

Elemen dengan kelas "g_id_signin"

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

Anda dapat merender beberapa tombol Login Dengan Google di halaman yang sama. Setiap tombol dapat memiliki setelan visualnya sendiri. Setelan ini 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, filled_blue atau filled_black.
data-size Ukuran tombol. Misalnya, kecil atau besar.
data-text Teks tombol. Misalnya, "Login dengan Google" atau "Daftar dengan Google".
data-shape Bentuk tombol. Misalnya, persegi panjang atau lingkaran.
data-logo_alignment Perataan logo Google: kiri atau tengah.
data-width Lebar tombol, dalam piksel.
data-locale Teks tombol dirender dalam bahasa yang ditetapkan di atribut ini.
data-click_listener Jika ditetapkan, fungsi ini akan dipanggil saat tombol Login Dengan Google diklik.
data-state Jika ditetapkan, string ini akan ditampilkan dengan token ID.

Jenis atribut

Bagian berikut berisi detail tentang setiap jenis atribut dan contohnya.

tipe data

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

Jenis Wajib Contoh
string Ya data-type="icon"

Tabel berikut mencantumkan semua jenis tombol yang tersedia dan deskripsinya:

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

tema data

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

Jenis Wajib Contoh
string Opsional data-theme="filled_blue"

Tabel berikut mencantumkan tema yang tersedia dan deskripsinya:

Tema
outline
Tombol standar dengan latar belakang putih Tombol ikon dengan latar belakang putih Tombol yang dipersonalisasi dengan latar belakang putih
Tema tombol standar.
filled_blue
Tombol standar dengan latar belakang biru Tombol ikon dengan latar belakang biru Tombol yang dipersonalisasi dengan latar belakang biru
Tema tombol berwarna biru.
filled_black
Tombol standar dengan latar belakang hitam Tombol ikon dengan latar belakang hitam Tombol yang dipersonalisasi dengan latar belakang hitam
Tema tombol berwarna hitam.

data-size

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

Jenis Wajib Contoh
string Opsional data-size="small"

Tabel berikut mencantumkan ukuran tombol yang tersedia dan deskripsinya.

Ukuran
large
Tombol standar yang besar Tombol ikon besar Tombol besar yang dipersonalisasi
Tombol besar.
medium
Tombol standar sedang Tombol ikon sedang
Tombol berukuran sedang.
small
Tombol kecil Tombol ikon kecil
Tombol kecil.

teks-data

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

Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional data-text="signup_with"

Tabel berikut mencantumkan teks tombol yang tersedia beserta deskripsinya:

Teks
signin_with
Tombol standar berlabel &#39;Login dengan Google&#39; Tombol ikon tanpa teks yang terlihat
Teks tombolnya adalah "Login dengan Google".
signup_with
Tombol standar berlabel &#39;Daftar dengan Google&#39; Tombol ikon tanpa teks yang terlihat
Teks tombolnya adalah "Daftar dengan Google".
continue_with
Tombol standar berlabel &#39;Lanjutkan dengan Google&#39; Tombol ikon tanpa teks yang terlihat
Teks tombolnya adalah "Lanjutkan dengan Google".
signin
Tombol standar berlabel &#39;Login&#39; Tombol ikon tanpa teks yang terlihat
Teks tombolnya adalah "Login".

bentuk data

Bentuk tombol. Nilai default-nya adalah rectangular. Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional data-shape="rectangular"

Tabel berikut mencantumkan bentuk tombol yang tersedia dan deskripsinya:

Bentuk
rectangular
Tombol standar persegi panjang Tombol ikon persegi panjang Tombol persegi panjang yang dipersonalisasi
Tombol berbentuk persegi panjang. Jika digunakan untuk jenis tombol icon, jenis tombol ini sama dengan square.
pill
Tombol standar berbentuk pil Tombol ikon berbentuk pil Tombol yang dipersonalisasi berbentuk pil
Tombol berbentuk pil. Jika digunakan untuk jenis tombol icon, jenis tombolnya sama dengan circle.
circle
Tombol standar lingkaran Tombol ikon lingkaran Tombol lingkaran yang dipersonalisasi
Tombol berbentuk lingkaran. Jika digunakan untuk jenis tombol standard, jenis tombolnya sama dengan pill.
square
Tombol standar persegi Tombol ikon persegi Tombol persegi yang dipersonalisasi
Tombol berbentuk persegi. Jika digunakan untuk jenis tombol standard, jenis tombolnya sama dengan rectangular.

perataan_logo_data

Perataan logo Google. Nilai default-nya adalah left. Atribut ini hanya berlaku untuk jenis tombol standard. Lihat tabel berikut untuk informasi selengkapnya:

Jenis Wajib Contoh
string Opsional data-logo_alignment="center"

Tabel berikut mencantumkan perataan yang tersedia beserta deskripsinya:

logo_alignment
left
Tombol standar dengan logo G di sebelah kiri
Rata kiri logo Google.
center
Tombol standar dengan logo G di bagian tengah
Menyejajarkan logo Google di tengah.

lebar data

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

Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional data-width=400

lokal data

Opsional. Tampilkan teks tombol menggunakan lokalitas yang ditentukan, atau secara default disetel ke setelan Akun Google pengguna atau browser. Tambahkan parameter hl dan kode bahasa ke perintah src saat memuat library, misalnya: gsi/client?hl=<iso-639-code>.

Jika tidak disetel, lokalitas default browser atau preferensi pengguna sesi Google akan digunakan. Oleh karena itu, pengguna yang berbeda mungkin melihat versi tombol yang dilokalkan yang berbeda, dan mungkin dengan ukuran yang berbeda.

Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional data-locale="zh_CN"

pemroses klik data

Anda dapat menentukan fungsi JavaScript yang akan dipanggil saat tombol Login dengan Google diklik menggunakan atribut data-click_listener.

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

Dalam contoh ini, pesan Sign in with Google button clicks... dicatat ke konsol saat tombol Login dengan Google diklik.

data-state

Opsional, karena beberapa tombol Login dengan Google dapat dirender di halaman yang sama, Anda dapat menetapkan setiap tombol dengan string yang unik. String yang sama akan ditampilkan bersama dengan token ID, sehingga Anda dapat mengidentifikasi tombol mana yang diklik pengguna untuk login.

Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional data-state="button 1"

Integrasi sisi server

Endpoint sisi server Anda harus menangani permintaan POST HTTP berikut.

Endpoint pengendali token ID

Endpoint pengendali token ID memproses token ID. Berdasarkan status akun yang sesuai, Anda dapat memproses login pengguna dan mengarahkannya ke halaman pendaftaran atau mengarahkan mereka ke halaman penautan akun untuk mendapatkan informasi tambahan.

Permintaan POST HTTP berisi informasi berikut:

Format Nama Deskripsi
Cookie g_csrf_token String acak yang berubah dengan setiap permintaan ke endpoint pengendali.
Parameter permintaan g_csrf_token String yang sama dengan nilai cookie sebelumnya, g_csrf_token.
Parameter permintaan credential Token ID yang diterbitkan oleh Google.
Parameter permintaan select_by Cara kredensial dipilih.
Parameter permintaan state Parameter ini hanya ditentukan saat pengguna mengklik tombol Login dengan Google untuk login, dan atribut state tombol ditentukan.

kredensial

Saat didekode, token ID akan terlihat 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"
}

Kolom sub adalah ID unik global untuk Akun Google. Hanya gunakan kolom sub sebagai ID untuk pengguna, karena kolom ini unik di antara semua Akun Google dan tidak pernah digunakan kembali. Jangan menggunakan alamat email sebagai ID karena Akun Google dapat memiliki beberapa alamat email pada waktu yang berbeda.

Dengan menggunakan kolom email, email_verified, dan hd, Anda dapat menentukan apakah host Google dan bersifat otoritatif untuk alamat email. Jika Google berwenang, pengguna dikonfirmasi sebagai pemilik akun yang sah.

Kasus yang mana Google bersifat otoritatif:

  • email memiliki akhiran @gmail.com, ini adalah akun Gmail.
  • email_verified disetel ke benar (true) dan hd disetel, ini adalah akun Google Workspace.

Pengguna dapat mendaftar ke Akun Google tanpa menggunakan Gmail atau Google Workspace. Jika email tidak berisi akhiran @gmail.com dan hd tidak ada, Google tidak berwajib, dan sandi atau metode verifikasi lainnya direkomendasikan untuk memverifikasi pengguna. email_verified juga bisa dianggap benar karena Google awalnya memverifikasi pengguna saat Akun Google dibuat, tetapi kepemilikan akun email pihak ketiga mungkin telah berubah.

Kolom exp menunjukkan waktu habis masa berlaku agar Anda dapat memverifikasi token di sisi server. Perlu waktu satu jam untuk token ID yang diperoleh dari Login dengan Google. Anda harus memverifikasi token sebelum waktu habis masa berlaku. Jangan gunakan exp untuk pengelolaan sesi. Token ID yang sudah tidak berlaku tidak berarti pengguna akan logout. Aplikasi Anda bertanggung jawab atas pengelolaan sesi pengguna.

select_by

Tabel berikut mencantumkan kemungkinan nilai untuk kolom select_by. Jenis tombol yang digunakan bersamaan dengan status izin dan sesi digunakan untuk menetapkan nilai,

  • Pengguna menekan tombol Sekali Ketuk atau Login Dengan Google atau menggunakan proses Login Otomatis tanpa sentuh.

  • Sesi yang ada ditemukan, atau pengguna memilih dan login ke Akun Google untuk membuat sesi baru.

  • Sebelum berbagi kredensial token ID dengan aplikasi Anda, pengguna

    • menekan tombol Konfirmasi untuk memberikan izin berbagi kredensial, atau
    • sebelumnya telah memberikan izin dan menggunakan Pilih Akun untuk memilih Akun Google.

Nilai {i>field<i} ini diatur ke salah satu jenis berikut,

Nilai Deskripsi
auto Proses login otomatis pengguna dengan sesi yang sudah ada dan sebelumnya telah memberikan izin untuk membagikan kredensial. Hanya berlaku untuk browser yang tidak didukung FedCM.
user Pengguna dengan sesi yang sudah ada dan sebelumnya telah memberikan izin menekan tombol Sekali Ketuk 'Lanjutkan sebagai' untuk membagikan kredensial. Hanya berlaku untuk browser yang tidak didukung FedCM.
fedcm Pengguna menekan tombol Sekali Ketuk 'Lanjutkan sebagai' untuk membagikan kredensial menggunakan FedCM. Hanya berlaku untuk browser yang didukung FedCM.
fedcm_auto Login otomatis pengguna dengan sesi yang sudah ada dan sebelumnya telah memberikan izin untuk membagikan kredensial menggunakan FedCM One Tap. Hanya berlaku untuk browser yang didukung FedCM.
user_1tap Pengguna yang sudah memiliki sesi menekan tombol Sekali Ketuk 'Lanjutkan sebagai' untuk memberikan izin dan membagikan kredensial. Hanya berlaku untuk Chrome v75 dan yang lebih baru.
user_2tap Pengguna yang tidak memiliki sesi menekan tombol Sekali Ketuk 'Lanjutkan sebagai' untuk memilih akun, lalu menekan tombol Konfirmasi di jendela pop-up untuk memberikan izin dan membagikan kredensial. Berlaku untuk browser berbasis non-Chromium.
btn Pengguna dengan sesi yang ada dan sebelumnya memberikan izin menekan tombol Login Dengan Google dan memilih Akun Google dari 'Pilih Akun' untuk membagikan kredensial.
btn_confirm Pengguna yang sudah memiliki sesi menekan tombol Login Dengan Google dan menekan tombol Konfirmasi untuk memberikan izin dan membagikan kredensial.
btn_add_session Pengguna yang tidak memiliki sesi, yang sebelumnya memberikan izin, menekan tombol Login dengan Google untuk memilih Akun Google dan membagikan kredensial.
btn_confirm_add_session Pengguna yang tidak memiliki sesi terlebih dahulu menekan tombol Login Dengan Google untuk memilih Akun Google, lalu menekan tombol Konfirmasi untuk mengizinkan dan membagikan kredensial.

state

Parameter ini hanya ditentukan saat pengguna mengklik tombol Login dengan Google untuk login, dan atribut data-state dari tombol yang diklik ditentukan. Nilai kolom ini adalah nilai yang sama dengan yang Anda tetapkan dalam atribut data-state tombol.

Karena beberapa tombol Login dengan Google dapat dirender di halaman yang sama, Anda dapat menetapkan setiap tombol dengan string unik. Oleh karena itu, Anda dapat menggunakan parameter state ini untuk mengidentifikasi tombol mana yang diklik pengguna untuk login.

Endpoint pengendali kredensial sandi

Endpoint pengendali kredensial sandi memproses kredensial sandi yang diambil pengelola kredensial native.

Permintaan POST HTTP berisi informasi berikut:

Format Nama Deskripsi
Cookie g_csrf_token String acak yang berubah dengan setiap permintaan ke endpoint pengendali.
Parameter permintaan g_csrf_token String yang sama dengan nilai cookie sebelumnya, g_csrf_token.
Parameter permintaan email Token ID ini yang diterbitkan oleh Google.
Parameter permintaan password Cara kredensial dipilih.