Halaman referensi ini menjelaskan Login JavaScript API. Anda dapat menggunakan API ini untuk menampilkan perintah Sekali Ketuk atau tombol Login dengan Google di halaman web.
Metode: google.accounts.id.menginisialisasi
Metode google.accounts.id.initialize
menginisialisasi klien Login dengan Google
berdasarkan objek konfigurasi. Lihat contoh kode berikut untuk metode tersebut:
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 yang sama.
- Anda hanya perlu memanggil metode
google.accounts.id.initialize
sekali meskipun Anda menggunakan beberapa modul (seperti Sekali Ketuk, Tombol yang Dipersonalisasi, pencabutan, dll.) di halaman yang sama. - Jika Anda memanggil metode
google.accounts.id.initialize
beberapa kali, hanya konfigurasi dalam panggilan terakhir yang akan diingat dan digunakan.
Anda dapat mereset konfigurasi setiap kali memanggil metode google.accounts.id.initialize
, dan semua metode berikutnya dalam halaman 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 One Ketuk dan
tombol Login dengan Google mode UX popup menggunakan atribut
ini. |
login_uri |
URL endpoint login Anda. Tombol UX redirect dengan mode Login dengan Google menggunakan atribut ini. |
native_callback |
Fungsi JavaScript yang menangani kredensial sandi. |
cancel_on_tap_outside |
Membatalkan permintaan jika pengguna mengklik di luar perintah. |
prompt_parent_id |
ID DOM dari 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 Sekali Ketuk di domain induk dan subdomainnya, teruskan domain induk ke kolom ini sehingga satu cookie bersama akan digunakan. |
ux_mode |
Alur UX tombol Login dengan Google |
allowed_parent_origin |
Asal yang diizinkan untuk menyematkan iframe perantara. Sekali Ketuk akan berjalan dalam mode iframe menengah jika kolom ini ditampilkan. |
intermediate_iframe_close_callback |
Mengganti perilaku iframe perantara default saat pengguna menutup Sekali Ketuk secara manual. |
itp_support |
Mengaktifkan UX Sekali Ketuk yang diupgrade pada browser ITP. |
client_id
Kolom ini adalah client ID aplikasi Anda, yang ditemukan dan dibuat di Google Developers Console. Lihat tabel berikut untuk informasi selengkapnya:
Type | Wajib | Contoh |
---|---|---|
string | Ya | client_id: "CLIENT_ID.apps.googleusercontent.com" |
pilih_otomatis
Kolom ini menentukan apakah token ID otomatis ditampilkan tanpa interaksi
pengguna saat hanya ada satu sesi Google yang telah menyetujui aplikasi Anda
sebelumnya. Nilai default-nya adalah false
. Lihat tabel berikut untuk informasi
selengkapnya:
Type | Wajib | Contoh |
---|---|---|
boolean | Opsional | auto_select: true |
callback
Kolom ini adalah fungsi JavaScript yang menangani token ID yang ditampilkan dari
perintah Sekali Ketuk atau jendela pop-up. Atribut ini diperlukan jika Google
Sekali Ketuk atau tombol Login dengan Google mode UX popup
digunakan.
Lihat tabel berikut untuk informasi selengkapnya:
Type | Wajib | Contoh |
---|---|---|
fungsi | Diperlukan untuk Sekali Ketuk dan mode UX popup |
callback: handleResponse |
login_uri
Atribut ini adalah URI endpoint login Anda.
Nilai harus sama persis dengan salah satu URI pengalihan yang diberi otorisasi 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 tersebut 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 pengguna mengklik tombol Login dengan Google dan menggunakan mode UX pengalihan.
Lihat tabel berikut untuk informasi selengkapnya:
Type | Opsional | Contoh |
---|---|---|
URL | Default-nya adalah URI halaman saat ini, atau nilai yang Anda tentukan. Hanya digunakan saat ux_mode: "redirect" disetel. |
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 ke endpoint login Anda:
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
credential=ID_TOKEN
callback_native
Kolom ini adalah nama fungsi JavaScript yang menangani kredensial sandi yang ditampilkan dari pengelola kredensial native browser. Lihat tabel berikut untuk informasi selengkapnya:
Type | Wajib | Contoh |
---|---|---|
fungsi | Opsional | native_callback: handleResponse |
batalkan_ketuk_di luar
Kolom ini menetapkan apakah permintaan One Tap akan dibatalkan atau tidak jika pengguna mengklik
di luar perintah. Nilai default-nya adalah true
. Anda dapat menonaktifkannya jika menetapkan nilai ke false
. Lihat tabel berikut untuk informasi selengkapnya:
Type | Wajib | Contoh |
---|---|---|
boolean | Opsional | cancel_on_tap_outside: false |
id_induk_induk
Atribut ini menetapkan ID DOM elemen container. Jika belum disetel, perintah Sekali Ketuk akan ditampilkan di pojok kanan atas jendela. Lihat tabel berikut untuk informasi selengkapnya:
Type | 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:
Type | Wajib | Contoh |
---|---|---|
string | Opsional | nonce: "biaqbm70g23" |
Panjang nonce dibatasi pada ukuran JWT maksimum yang didukung oleh lingkungan Anda, serta batasan ukuran HTTP browser dan server individual.
context
Kolom ini mengubah teks judul dan pesan dalam perintah Sekali Ketuk. Lihat tabel berikut untuk informasi selengkapnya:
Type | Wajib | Contoh |
---|---|---|
string | Opsional | context: "use" |
Tabel berikut mencantumkan konteks yang tersedia beserta deskripsinya:
Konteks | |
---|---|
signin |
"Login dengan Google" |
signup |
"Daftar ke Google" |
use |
"Gunakan dengan Google" |
domain_cookie_status
Jika Anda perlu menampilkan Sekali Ketuk di domain induk dan subdomainnya, teruskan domain induk ke kolom ini sehingga satu cookie status bersama digunakan. Lihat tabel berikut untuk informasi selengkapnya:
Type | Wajib | Contoh |
---|---|---|
string | Opsional | state_cookie_domain: "example.com" |
mode_ux
Gunakan kolom ini untuk menyetel alur UX yang digunakan oleh tombol Login dengan Google. Nilai
defaultnya adalah popup
. Atribut ini tidak berdampak pada UX OneTap. Lihat tabel berikut untuk informasi selengkapnya:
Type | 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 |
Menjalankan alur UX login dengan pengalihan halaman penuh. |
diizinkan_asal_asal
Asal yang diizinkan untuk menyematkan iframe perantara. Sekali Ketuk akan berjalan dalam mode iframe menengah jika kolom ini ditampilkan. Lihat tabel berikut untuk informasi selengkapnya:
Type | 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 |
URI domain tunggal. | "https://contoh.com" |
string array |
Array URI domain. | ["https://news.example.com", "https://local.example.com"] |
Awalan karakter pengganti juga didukung. Misalnya, "https://*.example.com"
akan cocok dengan example.com
dan subdomainnya di semua tingkat (mis.news.example.com
, login.news.example.com
). Hal yang perlu diperhatikan saat menggunakan karakter pengganti:
- String pola tidak boleh hanya terdiri dari karakter pengganti dan domain level teratas. Misalnya,
https://*.com
danhttps://*.co.uk
tidak valid; Seperti yang disebutkan di atas,"https://*.example.com"
akan cocok denganexample.com
dan subdomainnya. Anda juga dapat menggunakan array untuk mewakili 2 domain yang berbeda. Misalnya,["https://example1.com", "https://*.example2.com"]
akan cocok dengan domainexample1.com
,example2.com
, dan subdomain dariexample2.com
- Domain karakter pengganti harus dimulai dengan skema https:// yang aman.
"*.example.com"
akan dianggap tidak valid.
Jika nilai kolom allowed_parent_origin
tidak valid, inisialisasi Sekali Ketuk
pada mode iframe menengah akan gagal dan berhenti.
perantara_iframe_close_callback
Mengganti perilaku iframe perantara default saat pengguna menutup secara manual Sekali Ketuk dengan mengetuk tombol 'X' di UI Sekali Ketuk. Perilaku default-nya adalah segera menghapus iframe perantara dari DOM.
Kolom 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.
Type | Wajib | Contoh |
---|---|---|
fungsi | Opsional | intermediate_iframe_close_callback: logBeforeClose |
dukungan_itp
Kolom ini menentukan apakah
UX One Tap yang diupgrade harus diaktifkan di browser yang mendukung Intelligent Tracking Prevention (ITP). Nilai defaultnya adalah
false
. Lihat tabel berikut untuk informasi selengkapnya:
Type | Wajib | Contoh |
---|---|---|
boolean | Opsional | itp_support: true |
Metode: google.accounts.id.prompt
Metode google.accounts.id.prompt
menampilkan perintah One Tap atau pengelola kredensial native browser setelah metode initialize()
dipanggil.
Lihat contoh kode berikut untuk metode tersebut:
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. Untuk mendapatkan notifikasi tentang status UI untuk berbagai momen, teruskan
fungsi untuk menerima notifikasi status UI.
Notifikasi diaktifkan pada momen berikut:
- Momen tampilan: Ini terjadi setelah metode
prompt()
dipanggil. Notifikasi berisi nilai boolean untuk menunjukkan apakah UI ditampilkan atau tidak. Momen yang dilewati: Hal ini terjadi jika perintah One Tap 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 Anda melanjutkan ke penyedia identitas berikutnya, jika ada.
Momen yang 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 di dialog login, Anda dapat memanggil metode
google.accounts.id.cancel()
untuk menutup perintah One Tap dan memicu momen yang ditutup.
Contoh kode berikut mengimplementasikan 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? |
isDisplayed() |
Apakah notifikasi ini untuk momen tampilan, dan UI ditampilkan? |
isNotDisplayed() |
Apakah notifikasi ini untuk momen tampilan, dan UI tidak ditampilkan? |
getNotDisplayedReason() |
Alasan terperinci UI tidak ditampilkan. Berikut adalah kemungkinan nilai:
|
isSkippedMoment() |
Apakah notifikasi ini untuk momen yang dilewati? |
getSkippedReason() |
Alasan terperinci untuk momen yang dilewati. Berikut adalah kemungkinan nilai:
|
isDismissedMoment() |
Apakah notifikasi ini dihentikan sementara? |
getDismissedReason() |
Alasan terperinci terkait penutupan. Berikut kemungkinan nilainya:
|
getMomentType() |
Menampilkan string untuk jenis momen. Berikut kemungkinan nilainya:
|
Jenis data: CredentialResponse
Saat fungsi callback
Anda dipanggil, objek CredentialResponse
diteruskan sebagai parameter. Tabel berikut mencantumkan kolom yang ada dalam objek respons kredensial:
Kolom | |
---|---|
credential |
Kolom ini adalah token ID yang ditampilkan. |
select_by |
Kolom ini menetapkan cara kredensial dipilih. |
kredensial
Kolom ini adalah token ID sebagai string Token Web JSON (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
berisi ID unik secara global untuk Akun Google.
Dengan menggunakan kolom email
, email_verified
, dan hd
, Anda dapat menentukan apakah Google menghosting dan memberikan otorisasi untuk alamat email. Jika Google adalah pihak yang berwenang, saat ini pengguna diketahui sebagai pemilik akun yang sah.
Kasus saat Google berwenang:
email
memiliki akhiran@gmail.com
, ini adalah akun Gmail.email_verified
bernilai benar danhd
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, berarti Google tidak berwenang dan sandi atau metode verifikasi lainnya direkomendasikan untuk memverifikasi pengguna. email_verfied
juga dapat terwujud karena Google awalnya memverifikasi pengguna saat Akun Google dibuat, namun kepemilikan akun email pihak ketiga mungkin telah berubah.
Kolom exp
menampilkan waktu habis masa berlaku untuk Anda memverifikasi token di sisi server.
Perlu waktu satu jam untuk mendapatkan token ID dari Login dengan Google. Anda harus memverifikasi token sebelum habis masa berlakunya. Anda tidak boleh menggunakan exp
untuk pengelolaan sesi. Token ID yang tidak berlaku lagi tidak berarti pengguna telah logout. Aplikasi Anda bertanggung jawab untuk
mengelola sesi pengguna Anda.
pilih_oleh
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 dengan aplikasi, pengguna harus
- menekan tombol Konfirmasi untuk memberikan izin agar dapat membagikan kredensial, atau
- sebelumnya telah memberikan izin dan menggunakan Pilih Akun untuk memilih Akun Google.
Nilai kolom ini ditetapkan ke salah satu jenis ini,
Nilai | Deskripsi |
---|---|
auto |
Login otomatis pengguna dengan sesi yang ada yang sebelumnya telah memberikan izin untuk berbagi kredensial. |
user |
Pengguna dengan sesi yang sudah ada yang sebelumnya memberikan izin menekan tombol 'Lanjutkan sebagai' dengan Sekali Ketuk untuk membagikan kredensial. |
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 sudah ada menekan tombol '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 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 sudah ada yang sebelumnya memberikan izin menekan tombol Login dengan Google untuk memilih Akun Google dan membagikan kredensial. |
btn_confirm_add_session |
Pengguna tanpa sesi yang sudah ada terlebih dahulu menekan tombol Login dengan Google untuk memilih Akun Google, lalu menekan tombol Konfirmasi untuk mengizinkan dan membagikan kredensial. |
Metode: google.accounts.id.renderButton
Metode google.accounts.id.renderButton
merender tombol Login dengan Google
di halaman web Anda.
Lihat contoh kode berikut untuk metode tersebut:
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 melingkar. |
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. |
Jenis atribut
Bagian berikut berisi detail tentang setiap jenis atribut beserta contohnya.
tipe
Jenis tombol. Nilai default-nya adalah standard
.
Lihat tabel berikut untuk informasi selengkapnya:
Type | Wajib | Contoh |
---|---|---|
string | Ya | type: "icon" |
Tabel berikut mencantumkan jenis tombol yang tersedia dan deskripsinya:
Type | |
---|---|
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 lebih lanjut:
Type | 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 dengan warna hitam:
![]() ![]() ![]() |
ukuran
Ukuran tombol. Nilai default-nya adalah large
. Lihat tabel berikut untuk
mengetahui informasi lebih lanjut:
Type | Wajib | Contoh |
---|---|---|
string | Opsional | size: "small" |
Tabel berikut mencantumkan ukuran tombol dan deskripsinya:
Ukuran | |
---|---|
large |
Tombol besar:
![]() ![]() ![]() |
medium |
Tombol berukuran sedang:
![]() ![]() |
small |
Tombol kecil:
![]() ![]() |
teks
Teks tombol. Nilai default-nya adalah signin_with
. Tidak ada perbedaan
visual untuk teks tombol ikon yang memiliki atribut text
yang berbeda.
Satu-satunya pengecualian adalah saat teks dibaca untuk aksesibilitas layar.
Lihat tabel berikut untuk informasi selengkapnya:
Type | Wajib | Contoh |
---|---|---|
string | Opsional | text: "signup_with" |
Tabel berikut mencantumkan teks tombol yang tersedia dan deskripsinya:
Teks | |
---|---|
signin_with |
Teks tombol adalah “Login dengan Google”:
![]() ![]() |
signup_with |
Teks tombol adalah “Sign up with Google”:
![]() ![]() |
continue_with |
Teks tombol adalah “Lanjutkan dengan Google”:
![]() ![]() |
signin |
Teks tombol adalah “Login”:
![]() ![]() |
bentuk
Bentuk tombol. Nilai default-nya adalah rectangular
. Lihat tabel berikut untuk informasi selengkapnya:
Type | 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 , nilainya sama dengan square .
![]() ![]() ![]() |
pill |
Tombol berbentuk pil. Jika digunakan untuk jenis tombol icon ,
tombol tersebut sama dengan circle .
![]() ![]() ![]() |
circle |
Tombol berbentuk lingkaran. Jika digunakan untuk jenis tombol
standard , nilainya sama dengan pill .
![]() ![]() ![]() |
square |
Tombol berbentuk persegi. Jika digunakan untuk jenis tombol
standard , nilainya 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:
Type | Wajib | Contoh |
---|---|---|
string | Opsional | logo_alignment: "center" |
Tabel berikut mencantumkan perataan yang tersedia dan deskripsinya:
logo_alignment | |
---|---|
left |
Meratakan kiri logo Google.
![]() |
center |
Menyelaraskan tengah logo Google.
![]() |
lebar
Lebar tombol minimum, dalam piksel. Lebar maksimum adalah 400 piksel.
Lihat tabel berikut untuk informasi selengkapnya:
Type | Wajib | Contoh |
---|---|---|
string | Opsional | width: 400 |
locale
Opsional. Menampilkan teks tombol menggunakan lokalitas yang ditentukan. Jika tidak, setelan default adalah 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 yang berbeda dari tombol yang dilokalkan, dan mungkin dengan ukuran yang berbeda.
Lihat tabel berikut untuk informasi selengkapnya:
Type | Wajib | Contoh |
---|---|---|
string | Opsional | locale: "zh_CN" |
pemroses_klik
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...") }
Pada contoh di atas, pesan Tombol Login dengan Google diklik... akan di-log ke konsol saat tombol Login dengan Google diklik.
Jenis data: Kredensial
Saat fungsi native_callback
Anda dipanggil, objek Credential
akan diteruskan sebagai parameter. Tabel berikut mencantumkan kolom yang ada dalam objek:
Kolom | |
---|---|
id |
Mengidentifikasi pengguna. |
password |
Sandi |
Metode: google.accounts.id.disableAutoSelect
Saat pengguna logout dari situs, Anda perlu memanggil metode google.accounts.id.disableAutoSelect
untuk mencatat status dalam cookie. Hal ini
mencegah UX yang tidak aktif. Lihat cuplikan kode berikut untuk metode tersebut:
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 sederhana untuk metode store()
dari API pengelola kredensial native browser. Oleh karena itu, Anda hanya dapat menggunakannya untuk menyimpan kredensial
sandi. Lihat contoh kode berikut untuk metode tersebut:
google.accounts.id.storeCredential(Credential, callback)
Contoh kode berikut mengimplementasikan 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 akan diabaikan jika kredensial sudah dipilih. Lihat contoh kode berikut untuk metode tersebut:
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
. Notifikasi ini diberikan setelah library Login dengan Google JavaScript dimuat:
window.onGoogleLibraryLoad = () => {
...
};
Callback ini hanyalah pintasan untuk callback window.onload
. Tidak ada
perbedaan dalam 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 izin OAuth yang digunakan untuk membagikan
token ID untuk pengguna yang ditentukan. Lihat cuplikan kode metode berikut: google.accounts.id.revoke(hint, callback)
Parameter | Type | Deskripsi |
---|---|---|
hint |
string | Alamat email atau ID unik Akun Google pengguna. ID adalah properti sub dari payload kredensial. |
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
diteruskan sebagai parameter. Tabel berikut mencantumkan kolom yang ada di 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 merupakan nilai string dan berisi pesan error mendetail. Jika panggilan metode pencabutan gagal, kolom ini tidak ditentukan jika berhasil.