Referensi Login dengan Google JavaScript API

Halaman referensi ini menjelaskan Sign-In JavaScript API. Anda dapat menggunakan API ini untuk menampilkan perintah Sekali Ketuk atau tombol Login dengan Google di halaman web Anda.

Metode: google.accounts.id.Initialize

Metode google.accounts.id.initialize menginisialisasi klien Login dengan Google berdasarkan objek konfigurasi. Lihat contoh kode metode berikut:

google.accounts.id.initialize(IdConfiguration)

Contoh kode berikut mengimplementasikan metode google.accounts.id.initialize dengan fungsi onload:

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  };
</script>

Metode google.accounts.id.initialize membuat instance klien Login dengan Google yang dapat digunakan secara implisit oleh semua modul di halaman web yang sama.

  • Anda hanya perlu memanggil metode google.accounts.id.initialize satu kali meskipun menggunakan beberapa modul (seperti Sekali Ketuk, tombol yang Dipersonalisasi, pencabutan, dll.) di halaman web yang sama.
  • Jika Anda memanggil metode google.accounts.id.initialize beberapa kali, hanya konfigurasi dalam panggilan terakhir yang diingat dan digunakan.

Anda benar-benar mereset konfigurasi setiap kali memanggil metode google.accounts.id.initialize, dan semua metode berikutnya di halaman web yang sama akan segera menggunakan konfigurasi baru.

Jenis data: IdConfiguration

Tabel berikut mencantumkan kolom dan deskripsi jenis data IdConfiguration:

Kolom
client_id Client ID aplikasi Anda
auto_select Mengaktifkan pemilihan otomatis.
callback Fungsi JavaScript yang menangani token ID. Google Sekali Ketuk dan mode UX tombol Login dengan Google popup menggunakan atribut ini.
login_uri URL endpoint login Anda. Mode UX tombol Login dengan Google redirect menggunakan atribut ini.
native_callback Fungsi JavaScript yang menangani kredensial sandi.
cancel_on_tap_outside Membatalkan perintah jika pengguna mengklik di luar perintah.
prompt_parent_id ID DOM elemen penampung perintah Sekali Ketuk
nonce String acak untuk token ID
context Judul dan kata dalam perintah Sekali Ketuk
state_cookie_domain Jika Anda perlu memanggil fitur Sekali Ketuk di domain induk dan subdomainnya, teruskan domain induk ke kolom ini sehingga satu cookie bersama digunakan.
ux_mode Alur UX tombol Login dengan Google
allowed_parent_origin Origin yang diizinkan untuk menyematkan iframe perantara. Sekali Ketuk dijalankan dalam mode iframe perantara jika kolom ini ada.
intermediate_iframe_close_callback Mengganti perilaku iframe perantara default saat pengguna menutup Satu Ketuk secara manual.
itp_support Mengaktifkan UX Sekali Ketuk yang diupgrade di browser ITP.
login_hint Lewati pemilihan akun dengan memberikan petunjuk pengguna.
hd Membatasi pemilihan akun menurut domain.
use_fedcm_for_prompt Izinkan browser mengontrol perintah login pengguna dan memediasi alur login antara situs Anda dan Google.
enable_redirect_uri_validation Aktifkan alur pengalihan tombol yang mematuhi Aturan validasi URI pengalihan.

client_id

Kolom 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 client_id: "CLIENT_ID.apps.googleusercontent.com"

auto_select

Kolom ini menentukan apakah token ID otomatis ditampilkan tanpa interaksi pengguna jika hanya ada satu sesi Google yang telah menyetujui aplikasi Anda sebelumnya. Nilai default-nya adalah false. Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
boolean Opsional auto_select: true

callback

Kolom ini adalah fungsi JavaScript yang menangani token ID yang ditampilkan dari prompt Sekali Ketuk atau jendela pop-up. Atribut ini diperlukan jika mode UX popup tombol Login dengan Google atau Google One Tap digunakan. Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
fungsi Diperlukan untuk mode UX Ketuk Sekali dan popup callback: handleResponse

login_uri

Atribut ini adalah URI endpoint login Anda.

Nilai ini harus sama persis dengan salah satu URI pengalihan yang diotorisasi untuk klien OAuth 2.0, yang Anda konfigurasi di konsol Google Cloud dan harus sesuai dengan Aturan validasi URI pengalihan kami.

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

Respons kredensial token ID diposting ke endpoint login Anda saat pengguna mengklik tombol Login dengan Google dan mode UX pengalihan digunakan.

Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Opsional Contoh
URL Default-nya adalah URI halaman saat ini, atau nilai yang Anda tentukan.
Hanya digunakan jika ux_mode: "redirect" ditetapkan.		 login_uri: "https://www.example.com/login"

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

Berikut adalah contoh permintaan ke endpoint login Anda:

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

credential=ID_TOKEN

native_callback

Kolom ini adalah nama fungsi JavaScript yang menangani kredensial sandi yang ditampilkan dari pengelola kredensial native browser. Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
fungsi Opsional native_callback: handleResponse

cancel_on_tap_outside

Kolom ini menetapkan apakah akan membatalkan permintaan Sekali Ketuk jika pengguna mengklik di luar dialog. Nilai default-nya adalah true. Anda dapat menonaktifkannya jika menetapkan nilai ke false. Lihat tabel berikut untuk informasi selengkapnya:

Jenis Wajib Contoh
boolean Opsional cancel_on_tap_outside: false

prompt_parent_id

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

Jenis Wajib Contoh
string Opsional prompt_parent_id: 'parent_id'

nonce

Kolom ini adalah string acak yang digunakan oleh token ID untuk mencegah serangan replay. Lihat tabel berikut untuk informasi selengkapnya:

Jenis Wajib Contoh
string Opsional nonce: "biaqbm70g23"

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

context

Kolom ini mengubah teks judul dan pesan di perintah Ketuk Sekali. Lihat tabel berikut untuk informasi selengkapnya:

Jenis Wajib Contoh
string Opsional context: "use"

Tabel berikut mencantumkan semua konteks yang tersedia dan deskripsinya:

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

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

Jenis Wajib Contoh
string Opsional state_cookie_domain: "example.com"

ux_mode

Gunakan kolom ini untuk mengatur alur UX yang digunakan oleh tombol Login Dengan Google. Nilai defaultnya adalah popup. Atribut ini tidak memengaruhi UX OneTap. Lihat tabel berikut untuk informasi lebih lanjut:

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

allowed_parent_origin

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

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

Tabel berikut mencantumkan jenis nilai yang didukung dan deskripsinya.

Jenis Nilai
string Satu URI domain. "https://example.com"
string array Array URI domain. ["https://news.example.com", "https://local.example.com"]

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 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 yang disebutkan di atas, "https://.example.com" cocok dengan example.com dan subdomainnya. Anda juga dapat menggunakan array untuk mewakili 2 domain yang berbeda. Misalnya, ["https://example1.com", "https://.example2.com"] cocok dengan domain example1.com, example2.com, dan subdomain example2.com
  • Domain karakter pengganti harus diawali dengan skema https:// yang aman, sehingga "*.example.com" dianggap tidak valid.

Jika nilai kolom allowed_parent_origin tidak valid, inisialisasi mode iframe perantara akan gagal dan berhenti.

intermediate_iframe_close_callback

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

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

Jenis Wajib Contoh
fungsi Opsional intermediate_iframe_close_callback: logBeforeClose

itp_support

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 itp_support: true

login_hint

Jika aplikasi Anda mengetahui terlebih dahulu 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 nilai kolom token ID sub.

Untuk informasi selengkapnya, lihat kolom login_hint dalam dokumentasi OpenID Connect.

Jenis Wajib Contoh
String, alamat email, atau nilai dari kolom sub token ID. Opsional login_hint: 'elisa.beckett@gmail.com'

hd

Jika pengguna memiliki beberapa akun dan hanya boleh login dengan akun Workspace-nya, gunakan ini untuk memberikan petunjuk nama domain ke 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 mengecualikan akun konsumen (user@gmail.com) selama pemilihan akun.

Untuk informasi selengkapnya, lihat kolom hd dalam dokumentasi OpenID Connect.

Jenis Wajib Contoh
String. Nama domain yang sepenuhnya memenuhi syarat atau *. Opsional hd: '*'

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 Migrasi ke FedCM untuk mengetahui informasi selengkapnya.

Jenis Wajib Contoh
boolean Opsional use_fedcm_for_prompt: true

enable_redirect_uri_validation

Mengaktifkan alur pengalihan tombol yang mematuhi Aturan validasi URI pengalihan.

Jenis Wajib Contoh
boolean Opsional enable_redirect_uri_validation: true

Metode: google.accounts.id.prompt

Metode google.accounts.id.prompt menampilkan perintah Ketuk Sekali atau pengelola kredensial native browser setelah metode initialize() dipanggil. Lihat contoh kode metode berikut:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

Biasanya, metode prompt() dipanggil saat halaman dimuat. Karena status sesi dan setelan pengguna di sisi Google, UI perintah Sekali Ketuk mungkin tidak ditampilkan. Agar mendapatkan notifikasi tentang status UI untuk momen yang berbeda, teruskan fungsi untuk menerima notifikasi status UI.

Notifikasi diaktifkan pada momen berikut:

  • Momen tampilan: Hal ini terjadi setelah metode prompt() dipanggil. Notifikasi ini berisi nilai boolean untuk menunjukkan apakah UI ditampilkan atau tidak.

  • Lewati momen: Hal ini terjadi saat perintah Sekali Ketuk ditutup oleh pembatalan otomatis, pembatalan manual, atau saat Google gagal menerbitkan kredensial, seperti saat sesi yang dipilih telah logout dari Google.

    Dalam kasus ini, sebaiknya lanjutkan ke penyedia identitas berikutnya, jika ada.

  • Momen ditutup: Hal ini terjadi saat Google berhasil mengambil kredensial atau pengguna ingin menghentikan alur pengambilan kredensial. Misalnya, saat pengguna mulai memasukkan nama pengguna dan sandi mereka di dialog login, Anda dapat memanggil metode google.accounts.id.cancel() untuk menutup perintah Ketuk Sekali dan memicu momen yang ditutup.

Contoh kode berikut menerapkan momen yang dilewati:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

Jenis data: PromptMomentNotification

Tabel berikut mencantumkan metode dan deskripsi jenis data PromptMomentNotification:

Metode
isDisplayMoment() Apakah notifikasi ini untuk momen tampilan?

Catatan: Jika FedCM diaktifkan, notifikasi ini tidak akan diaktifkan. Lihat halaman Migrasi ke FedCM untuk mengetahui informasi selengkapnya.
isDisplayed() Apakah notifikasi ini untuk momen tampilan, dan UI ditampilkan?

Catatan: Jika FedCM diaktifkan, notifikasi ini tidak akan diaktifkan. Lihat halaman Migrasi ke FedCM untuk mengetahui informasi selengkapnya.
isNotDisplayed() Apakah notifikasi ini hanya untuk momen tampilan, dan UI tidak ditampilkan?

Catatan: Jika FedCM diaktifkan, notifikasi ini tidak akan diaktifkan. Lihat halaman Bermigrasi ke FedCM untuk mengetahui informasi selengkapnya.
getNotDisplayedReason()

Alasan mendetail mengapa UI tidak ditampilkan. Berikut adalah nilai yang memungkinkan:

  • browser_not_supported
  • invalid_client
  • missing_client_id
  • opt_out_or_no_session
  • secure_http_required
  • suppressed_by_user
  • unregistered_origin
  • unknown_reason
Catatan: Jika FedCM diaktifkan, metode ini tidak didukung. Lihat halaman Migrasi ke FedCM untuk mengetahui informasi selengkapnya.
isSkippedMoment() Apakah notifikasi ini untuk momen yang dilewati?
getSkippedReason()

Alasan mendetail untuk momen yang dilewati. Berikut adalah nilai yang memungkinkan:

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
Catatan: Jika FedCM diaktifkan, metode ini tidak didukung. Lihat halaman Bermigrasi ke FedCM untuk mengetahui informasi selengkapnya.
isDismissedMoment() Apakah notifikasi ini untuk momen yang ditutup?
getDismissedReason()

Alasan mendetail atas penolakan. Berikut adalah kemungkinan nilai:

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

Menampilkan string untuk jenis momen. Berikut adalah kemungkinan nilai:

  • display
  • skipped
  • dismissed

Jenis data: CredentialResponse

Saat fungsi callback dipanggil, objek CredentialResponse akan diteruskan sebagai parameter. Tabel berikut mencantumkan kolom yang terdapat dalam objek respons kredensial:

Kolom
credential Kolom ini adalah token ID yang ditampilkan.
select_by Kolom ini menetapkan cara kredensial dipilih.
state Kolom ini hanya ditentukan saat pengguna mengklik tombol Login dengan Google untuk login, dan atribut state tombol ditentukan.

kredensial

Kolom ini adalah token ID sebagai string JSON Web Token (JWT) yang dienkode base64.

Saat didekode, JWT 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": "Elisa",
  "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 bersifat unik di antara semua Akun Google dan tidak pernah digunakan kembali. Jangan gunakan alamat email sebagai ID karena Akun Google dapat memiliki beberapa alamat email di waktu yang berbeda.

Dengan kolom email, email_verified, dan hd, Anda dapat menentukan apakah Google menghosting dan bersifat otoritatif untuk alamat email. Jika Google memiliki otoritas, pengguna akan dikonfirmasi sebagai pemilik akun yang sah.

Kasus saat Google bersifat otoritatif:

  • email memiliki akhiran @gmail.com, ini adalah Akun Gmail.
  • email_verified bernilai benar dan hd ditetapkan, 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 akan memiliki otoritas dan sandi atau metode tantangan lainnya direkomendasikan untuk memverifikasi pengguna. email_verfied juga bisa benar karena Google awalnya memverifikasi pengguna saat Akun Google dibuat, tetapi kepemilikan akun email pihak ketiga mungkin telah berubah.

Kolom exp menampilkan waktu habis masa berlaku agar Anda dapat memverifikasi token di sisi server. Masa berlakunya adalah 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 logout. Aplikasi Anda bertanggung jawab atas pengelolaan sesi pengguna.

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 sentuh.

  • 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 berbagi kredensial, atau
    • sebelumnya telah memberikan izin dan menggunakan fitur 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 didukung FedCM.
user Pengguna yang sudah memiliki sesi, yang sebelumnya telah memberikan izin, menekan tombol 'Lanjutkan sebagai' Sekali Ketuk untuk membagikan kredensial. Hanya berlaku untuk browser yang tidak didukung FedCM.
fedcm Pengguna menekan tombol 'Lanjutkan sebagai' Sekali Ketuk untuk membagikan kredensial menggunakan FedCM. Hanya berlaku untuk browser yang didukung oleh 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 didukung FedCM.
user_1tap Pengguna dengan sesi yang ada menekan tombol 'Lanjutkan sebagai' Sekali Ketuk 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' 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 sudah memiliki sesi, yang sebelumnya telah memberikan izin, menekan tombol Sekali Ketuk di browser ITP.
itp_confirm Pengguna dengan sesi yang ada menekan fitur Sekali Ketuk di browser ITP dan menekan tombol Konfirmasi untuk memberikan izin dan membagikan kredensial.
itp_add_session Pengguna tanpa sesi yang ada yang sebelumnya memberikan izin menekan fitur Sekali Ketuk di browser ITP untuk memilih Akun Google dan membagikan kredensial.
itp_confirm_add_session Pengguna tanpa sesi yang ada pertama-tama menekan Sekali Ketuk di browser ITP untuk memilih Akun Google, lalu menekan tombol Konfirmasi untuk memberikan izin dan membagikan kredensial.
btn Pengguna dengan sesi yang ada yang sebelumnya memberikan izin menekan tombol Login dengan Google dan memilih Akun Google dari 'Pilih Akun' untuk membagikan kredensial.
btn_confirm Pengguna dengan sesi yang ada menekan tombol Login dengan Google dan menekan tombol Konfirmasi untuk memberikan izin dan membagikan kredensial.
btn_add_session Pengguna tanpa sesi yang ada yang sebelumnya memberikan izin menekan tombol Login dengan Google untuk memilih Akun Google dan membagikan kredensial.
btn_confirm_add_session Pengguna yang belum memiliki sesi menekan tombol Login Dengan Google terlebih dahulu untuk memilih Akun Google, lalu menekan tombol Confirm untuk mengizinkan dan membagikan kredensial.

dengan status tersembunyi akhir

Kolom ini hanya ditentukan saat pengguna mengklik tombol Login dengan Google untuk login, dan atribut state tombol yang diklik ditentukan. Nilai kolom ini sama dengan nilai yang Anda tentukan dalam atribut 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 kolom state ini untuk mengidentifikasi tombol mana yang diklik pengguna untuk login.

Metode: google.accounts.id.renderButton

Metode google.accounts.id.renderButton merender tombol Login dengan Google di halaman web Anda.

Lihat contoh kode metode berikut:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

Jenis data: GsiButtonConfiguration

Tabel berikut mencantumkan kolom dan deskripsi jenis data GsiButtonConfiguration:

Atribut
type Jenis tombol: ikon, atau tombol standar.
theme Tema tombol. Misalnya, fill_blue atau fill_black.
size Ukuran tombol. Misalnya, kecil atau besar.
text Teks tombol. Misalnya, "Login dengan Google" atau "Daftar dengan Google".
shape Bentuk tombol. Misalnya, persegi panjang atau lingkaran.
logo_alignment Perataan logo Google: kiri atau tengah.
width Lebar tombol, dalam piksel.
locale Jika ditetapkan, bahasa tombol akan dirender.
click_listener Jika ditetapkan, fungsi ini akan dipanggil saat tombol Login dengan Google diklik.
state Jika ditetapkan, string ini akan ditampilkan dengan token ID.

Jenis atribut

Bagian berikut berisi detail tentang setiap jenis atribut, dan contohnya.

jenis

Jenis tombol. Nilai default-nya adalah standard.

Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Ya type: "icon"

Tabel berikut mencantumkan jenis tombol yang tersedia dan deskripsinya:

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

tema

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

Jenis Wajib Contoh
string Opsional theme: "filled_blue"

Tabel berikut mencantumkan tema yang tersedia dan deskripsinya:

Tema
outline
Tema tombol standar.
filled_blue
Tema tombol berwarna biru.
filled_black
Tema tombol berwarna hitam.

ukuran

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

Jenis Wajib Contoh
string Opsional size: "small"

Tabel berikut mencantumkan ukuran tombol yang tersedia dan deskripsinya:

Ukuran
large
Tombol standar 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

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

Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional text: "signup_with"

Tabel berikut mencantumkan semua 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 "Continue with Google".
signin
Teks tombolnya adalah "Login".

bentuk

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

Jenis Wajib Contoh
string Opsional shape: "rectangular"

Tabel berikut mencantumkan bentuk tombol yang tersedia dan deskripsinya:

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

logo_alignment

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 logo_alignment: "center"

Tabel berikut mencantumkan perataan yang tersedia dan deskripsinya:

logo_alignment
left
Meratakan logo Google ke kiri.
center
Menyejajarkan logo Google di tengah.

lebar

Lebar tombol minimum, dalam piksel. Lebar maksimumnya adalah 400 piksel.

Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional width: "400"

locale

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

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

Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
string Opsional locale: "zh_CN"

click_listener

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

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }

Dalam contoh ini, pesan Tombol Login dengan Google diklik... dicatat ke konsol saat tombol Login dengan Google diklik.

dengan status tersembunyi akhir

Opsional, karena beberapa tombol Login dengan Google dapat dirender di halaman yang sama, Anda dapat menetapkan setiap tombol dengan string 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"

Jenis data: Kredensial

Saat fungsi native_callback dipanggil, objek Credential akan diteruskan sebagai parameter. Tabel berikut mencantumkan kolom yang terdapat dalam objek:

Kolom
id Mengidentifikasi pengguna.
password Sandi

Metode: google.accounts.id.disableAutoSelect

Saat pengguna logout dari situs, Anda harus memanggil metode google.accounts.id.disableAutoSelect untuk mencatat status di cookie. Hal ini mencegah loop mati UX. Lihat cuplikan kode metode berikut:

google.accounts.id.disableAutoSelect()

Contoh kode berikut mengimplementasikan metode google.accounts.id.disableAutoSelect dengan fungsi onSignout():

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

Metode: google.accounts.id.storeCredential

Metode ini adalah wrapper untuk metode store() dari API pengelola kredensial native browser. Oleh karena itu, hanya dapat digunakan untuk menyimpan kredensial sandi. Lihat contoh kode metode berikut:

google.accounts.id.storeCredential(Credential, callback)

Contoh kode berikut menerapkan metode google.accounts.id.storeCredential dengan fungsi onSignIn():

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

Metode: google.accounts.id.cancel

Anda dapat membatalkan alur Sekali Ketuk jika menghapus perintah dari DOM pihak tepercaya. Operasi pembatalan diabaikan jika kredensial sudah dipilih. Lihat contoh kode metode berikut:

google.accounts.id.cancel()

Contoh kode berikut mengimplementasikan metode google.accounts.id.cancel() dengan fungsi onNextButtonClicked():

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

Callback pemuatan library: onGoogleLibraryLoad

Anda dapat mendaftarkan callback onGoogleLibraryLoad. Library ini diberi tahu setelah library JavaScript Login Dengan Google dimuat:

window.onGoogleLibraryLoad = () => {
    ...
};

Callback ini hanyalah pintasan untuk callback window.onload. Tidak ada perbedaan perilaku.

Contoh kode berikut mengimplementasikan callback onGoogleLibraryLoad:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

Metode: google.accounts.id.revoke

Metode google.accounts.id.revoke mencabut pemberian OAuth yang digunakan untuk membagikan token ID untuk pengguna yang ditentukan. Lihat cuplikan kode metode berikut: javascript google.accounts.id.revoke(login_hint, callback)

Parameter Jenis Deskripsi
login_hint string Alamat email atau ID unik Akun Google pengguna. ID adalah properti sub payload credential.
callback fungsi Pengendali RevocationResponse opsional.

Contoh kode berikut menunjukkan cara menggunakan metode revoke dengan ID. 

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

Jenis data: RevocationResponse

Saat fungsi callback Anda dipanggil, objek RevocationResponse akan diteruskan sebagai parameter. Tabel berikut mencantumkan kolom yang terdapat dalam objek respons pencabutan:

Kolom
successful Kolom ini adalah nilai yang ditampilkan dari panggilan metode.
error Kolom ini secara opsional berisi pesan respons error mendetail.

berhasil

Kolom ini adalah nilai boolean yang ditetapkan ke true jika panggilan metode pencabutan berhasil atau salah jika gagal.

error

Kolom ini adalah nilai string dan berisi pesan error mendetail jika panggilan metode revoke gagal, kolom ini tidak ditentukan jika berhasil.