Referensi Login dengan Google HTML API

Halaman referensi ini menjelaskan API atribut data HTML Login dengan Google. Anda dapat menggunakan API untuk menampilkan dialog 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 menempatkan ID ini pada beberapa elemen.

Atribut data

Tabel berikut mencantumkan atribut data beserta deskripsinya:

Atribut
data-client_id	ID klien aplikasi Anda
data-color_scheme	Skema warna yang diterapkan ke dialog login Sekali Ketuk.
data-auto_prompt	Menampilkan 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 perintah dibatalkan jika pengguna mengklik di luar perintah.
data-prompt_parent_id	ID DOM elemen penampung dialog login Sekali Ketuk
data-skip_prompt_cookie	Melewati Login Sekali Ketuk jika cookie yang ditentukan memiliki nilai yang tidak kosong.
data-nonce	String acak untuk token ID
data-context	Judul dan kata-kata dalam dialog Sekali Ketuk
data-moment_callback	Nama fungsi pemroses notifikasi status UI perintah
data-state_cookie_domain	Jika Anda perlu memanggil Login 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. Login Sekali Ketuk berjalan dalam mode iframe perantara jika atribut ini ada.
data-intermediate_iframe_close_callback	Menggantikan perilaku iframe perantara default saat pengguna menutup Login Sekali Ketuk secara manual.
data-itp_support	Mengaktifkan UX Ketuk Sekali yang diupgrade di browser ITP.
data-login_hint	Lewati pemilihan akun dengan memberikan petunjuk pengguna.
data-hd	Membatasi pemilihan akun menurut domain.
data-use_fedcm_for_prompt	Izinkan browser mengontrol perintah login pengguna dan memediasi alur login antara situs Anda dan Google.
data-use_fedcm_for_button	Kolom ini menentukan apakah UX tombol FedCM harus digunakan di Chrome (desktop M125+ dan Android M128+). Nilai defaultnya adalah false.
data-button_auto_select	Apakah akan mengaktifkan opsi pilih otomatis untuk alur tombol FedCM. Jika diaktifkan, pengguna lama dengan sesi Google aktif akan otomatis login, sehingga melewati perintah Pemilih Akun. Nilai defaultnya adalah false.

Jenis atribut

Bagian berikut berisi detail tentang jenis dan contoh setiap atribut.

data-client_id

Atribut ini adalah client ID aplikasi Anda, yang ditemukan dan dibuat di konsol Google Cloud. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

data-color_scheme

Kolom ini adalah skema warna yang diterapkan ke dialog Satu Ketuk. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

Jenis	Wajib	Contoh
string	Opsional. Secara default, skema warna sistem pengguna akan digunakan.	data-color_scheme="dark"

Tabel berikut mencantumkan skema warna yang tersedia dan deskripsinya.

Skema warna
default	Terapkan skema warna default sistem pengguna, bergantung pada skema preferensi pengguna yang terang atau gelap.
light	Terapkan skema warna terang.
dark	Terapkan skema warna gelap.

data-auto_prompt

Atribut ini menentukan apakah akan menampilkan fitur Satu ketuk atau tidak. Nilai defaultnya adalah true. Ketuk Google One tidak ditampilkan jika nilai ini adalah false. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

data-auto_select

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

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 sah untuk klien OAuth 2.0, yang Anda konfigurasi di Platform Auth Google dan harus sesuai dengan aturan validasi URI pengalihan kami.

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

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

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

Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

data-callback

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

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

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

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

• Salah satu dari dua atribut ini harus ditetapkan untuk mode UX tombol Login dengan Google dan Sekali Ketuk Google.popup Jika keduanya ditetapkan, atribut data-callback memiliki prioritas yang lebih tinggi.

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

data-native_login_uri

Atribut ini adalah URL endpoint handler kredensial sandi Anda. Jika Anda menetapkan atribut data-native_login_uri atau atribut data-native_callback, library JavaScript akan melakukan penggantian ke pengelola kredensial bawaan jika tidak ada sesi Google. Anda tidak diizinkan untuk menetapkan atribut data-native_callback dan data-native_login_uri. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

data-native_callback

Atribut ini adalah nama fungsi JavaScript yang menangani kredensial sandi yang ditampilkan dari pengelola kredensial bawaan browser. Jika Anda menetapkan atribut data-native_login_uri atau atribut data-native_callback, library JavaScript akan melakukan penggantian ke pengelola kredensial bawaan jika tidak ada sesi Google. Anda tidak diizinkan untuk menetapkan data-native_callback dan data-native_login_uri. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

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

data-native_id_param

Saat mengirimkan kredensial sandi ke endpoint handler kredensial sandi, Anda dapat menentukan nama parameter untuk kolom credential.id. Nama defaultnya adalah email. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

data-native_password_param

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

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

data-cancel_on_tap_outside

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

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 Satu Ketuk akan ditampilkan di sudut kanan atas jendela. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

data-skip_prompt_cookie

Menggunakan cookie untuk mengontrol tampilan dialog sekali ketuk. Jika cookie yang ditentukan oleh atribut ini memiliki nilai yang tidak kosong, perintah tidak akan ditampilkan. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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 mengetahui informasi selengkapnya:

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

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

data-context

Kolom ini mengubah teks judul dan pesan yang ditampilkan di dialog Satu Ketuk, tidak berpengaruh untuk browser ITP. Default-nya adalah signin.

Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

Tabel berikut mencantumkan semua konteks yang tersedia dan deskripsinya:

Konteks
signin	"Login ke"
signup	"Sign up to" (Daftar ke)
use	"Gunakan"

data-moment_callback

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

Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

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

data-state_cookie_domain

Jika Anda perlu menampilkan Login Sekali Klik di domain induk dan subdomainnya, teruskan domain induk ke atribut ini agar cookie status bersama tunggal digunakan. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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 Ketuk Sekali. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

Tabel berikut mencantumkan mode UX yang tersedia dan deskripsinya.

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

data-allowed_parent_origin

Origin yang diizinkan untuk menyematkan iframe perantara. One Tap berjalan dalam mode iframe perantara jika atribut ini ada. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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://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 One Tap mode iframe perantara akan gagal dan berhenti.

Awalan karakter pengganti juga didukung. Misalnya, "https://*.example.com" cocok dengan example.com dan subdomainnya di semua tingkat (misalnya, 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 tingkat teratas. Misalnya, https://.com dan https://.co.uk tidak valid karena "https://.example.com" cocok dengan example.com dan semua subdomainnya. Gunakan daftar yang dipisahkan koma untuk merepresentasikan dua domain yang berbeda. Misalnya, "https://example1.com,https://.example2.com" cocok dengan domain example1.com, example2.com, dan subdomain example2.com
• Domain wildcard harus dimulai dengan skema https:// yang aman, sehingga "*.example.com" dianggap tidak valid.

data-intermediate_iframe_close_callback

Menggantikan perilaku iframe perantara default saat pengguna menutup fitur Sekali Ketuk secara manual dengan mengetuk tombol 'X' di UI Sekali Ketuk. Perilaku defaultnya adalah menghapus iframe perantara dari DOM secara langsung.

Kolom data-intermediate_iframe_close_callback hanya berlaku dalam mode iframe perantara. Selain itu, hanya iframe perantara yang terpengaruh, bukan iframe Login Sekali Klik. UI Satu Ketuk dihapus sebelum callback dipanggil.

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

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

data-itp_support

Kolom ini menentukan apakah UX sekali ketuk yang diupgrade harus diaktifkan di browser yang mendukung Pencegahan Pelacakan Cerdas (ITP). Nilai defaultnya adalah false. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

data-login_hint

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

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="[e-mail]"

data-hd

Jika pengguna memiliki beberapa akun dan hanya boleh login dengan akun Workspace-nya, gunakan ini untuk memberikan petunjuk nama domain kepada Google. Jika berhasil, akun pengguna yang ditampilkan selama pemilihan akun akan dibatasi ke domain yang diberikan. Nilai karakter pengganti: * hanya menawarkan akun Workspace kepada pengguna dan mengecualikan akun konsumen ([e-mail]) 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

Mengizinkan 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 mengetahui informasi selengkapnya.

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

data-use_fedcm_for_button

Kolom ini menentukan apakah UX tombol FedCM harus digunakan di Chrome (desktop M125+ dan Android M128+). Nilai defaultnya adalah false. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

data-button_auto_select

Kolom ini menentukan apakah opsi pilih otomatis diaktifkan untuk alur tombol FedCM. Jika diaktifkan, pengguna yang kembali dengan sesi Google aktif akan otomatis login, sehingga melewati perintah Pemilih Akun. Default-nya adalah false Anda harus mengaktifkan login otomatis tombol secara eksplisit selama peluncuran keikutsertaan. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

Elemen dengan class "g_id_signin"

Jika Anda menambahkan g_id_signin ke atribut class elemen, elemen 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 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 disetel, fungsi ini dipanggil saat tombol Login dengan Google diklik.
data-state	Jika disetel, string ini akan ditampilkan dengan token ID.

Jenis atribut

Bagian berikut berisi detail tentang jenis dan contoh setiap atribut.

data-type

Jenis tombol. Nilai default-nya adalah standard. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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.

data-theme

Tema tombol. Nilai default-nya adalah outline. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

Tabel berikut mencantumkan tema yang tersedia dan deskripsinya:

Tema
outline	Tema tombol standar.
filled_blue	Tema tombol yang diisi dengan warna biru.
filled_black	Tema tombol yang diisi warna hitam.

data-size

Ukuran tombol. Nilai default-nya adalah large. Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

Tabel berikut mencantumkan ukuran tombol yang tersedia dan deskripsinya.

Ukuran
large	Tombol besar.
medium	Tombol berukuran sedang.
small	Tombol kecil.

data-text

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 dibacakan untuk aksesibilitas layar.

Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

Tabel berikut mencantumkan teks tombol yang tersedia dan deskripsinya:

Teks
signin_with	Teks tombolnya adalah "Login dengan Google".
signup_with	Teks tombolnya adalah "Daftar dengan Google".
continue_with	Teks tombolnya adalah "Lanjutkan dengan Google".
signin	Teks tombolnya adalah "Login".

data-shape

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 berbentuk persegi panjang. Jika digunakan untuk jenis tombol icon, tombol ini sama dengan square.
pill	Tombol berbentuk kapsul. Jika digunakan untuk jenis tombol icon, maka sama dengan circle.
circle	Tombol berbentuk lingkaran. Jika digunakan untuk jenis tombol standard, maka sama dengan pill.
square	Tombol berbentuk persegi. Jika digunakan untuk jenis tombol standard, maka sama dengan rectangular.

data-logo_alignment

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

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

Tabel berikut mencantumkan perataan yang tersedia dan deskripsinya:

logo_alignment
left	Menyejajarkan logo Google ke kiri.
center	Menyelaraskan logo Google ke tengah.

data-width

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

Lihat tabel berikut untuk mengetahui informasi selengkapnya:

Jenis	Wajib	Contoh
string	Opsional	data-width=400

data-locale

Opsional. Menampilkan teks tombol menggunakan lokalitas yang ditentukan, atau secara default menggunakan setelan Akun Google atau browser pengguna. Tambahkan parameter hl dan kode bahasa ke direktif 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 mengetahui informasi selengkapnya:

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

data-click_listener

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 Tombol Login dengan Google diklik... 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 string unik untuk setiap tombol. String yang sama akan ditampilkan bersama dengan token ID, sehingga Anda dapat mengidentifikasi tombol mana yang diklik pengguna untuk login.

Lihat tabel berikut untuk mengetahui informasi selengkapnya:

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

Integrasi sisi server

Endpoint sisi server Anda harus menangani permintaan HTTP POST berikut.

Endpoint handler token ID

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

Contoh permintaan ke endpoint login Anda:

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Cookie: g_csrf_token=<RANDOM_STRING>
Host: www.example.com

credential=<JWT_ENCODED_ID_TOKEN>&g_csrf_token=<RANDOM_STRING>

Permintaan HTTP POST berisi informasi berikut:

Format	Nama	Deskripsi
Cookie	g_csrf_token	String acak yang berubah dengan setiap permintaan ke endpoint login yang ditentukan oleh data-login_uri, harus cocok dengan nilai dalam parameter permintaan g_csrf_token.
Parameter permintaan	g_csrf_token	String acak yang berubah dengan setiap permintaan ke endpoint login yang ditentukan oleh data-login_uri, harus cocok dengan nilai cookie g_csrf_token.
Parameter permintaan	credential	Token ID JWT yang dienkode yang dikeluarkan Google.
Parameter permintaan	select_by	Cara pengguna login.
Parameter permintaan	state	Parameter ini hanya ditentukan saat pengguna mengklik tombol Login dengan Google untuk login, dan atribut state tombol ditentukan.

kredensial

Jika 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": "[e-mail]", // 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.

Peringatan: Jangan menggunakan alamat email sebagai ID karena Akun Google dapat memiliki beberapa alamat email pada waktu yang berbeda. Selalu gunakan kolom sub sebagai ID untuk pengguna.

Dengan menggunakan kolom email, email_verified, dan hd, Anda dapat menentukan apakah Google menghosting dan memiliki otoritas untuk alamat email. Jika Google adalah otoritas, pengguna dipastikan sebagai pemilik akun yang sah.

Kasus saat Google bersifat otoritatif:

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

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

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

g_csrf_token

Token status anti-pemalsuan. Ini adalah token Pemalsuan permintaan lintas situs (CSRF) yang dibuat oleh library gsi/client. Nilai acak disertakan sebagai Cookie dan sebagai Parameter Permintaan dalam isi payload POST. Jika kedua nilai ini tidak cocok saat memproses permintaan di server Anda, permintaan harus dianggap tidak valid.

select_by

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

• Pengguna menekan tombol Sekali Ketuk atau Login Dengan Google atau menggunakan proses Login otomatis tanpa sentuhan.

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

• Sebelum membagikan kredensial token ID ke aplikasi Anda, pengguna dapat

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

Nilai kolom ini ditetapkan ke salah satu jenis berikut,

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

dengan status tersembunyi akhir

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

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

Endpoint handler kredensial sandi

Endpoint pengendali kredensial sandi memproses kredensial sandi yang diambil oleh pengelola kredensial bawaan.

Permintaan HTTP POST berisi informasi berikut:

Format	Nama	Deskripsi
Cookie	g_csrf_token	String acak yang berubah dengan setiap permintaan ke endpoint login yang ditentukan oleh data-native_login_uri, harus cocok dengan nilai dalam parameter permintaan g_csrf_token.
Parameter permintaan	g_csrf_token	String acak yang berubah dengan setiap permintaan ke endpoint login yang ditentukan oleh data-native_login_uri, harus cocok dengan nilai cookie g_csrf_token.
Parameter permintaan	email	Token ID yang dikeluarkan Google.
Parameter permintaan	password	Cara kredensial dipilih.

Catatan: Anda dapat mengubah nama parameter email dan password dengan atribut data.