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 akan diingat dan digunakan.
Anda sebenarnya dapat mereset konfigurasi setiap kali memanggil
metode google.accounts.id.initialize
, dan semua metode berikutnya di halaman web
yang sama akan langsung 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 popup mode UX menggunakan
atribut ini. |
login_uri |
URL endpoint login Anda. Tombol Login Dengan Google
Mode UX redirect menggunakan atribut ini. |
native_callback |
Fungsi JavaScript yang menangani kredensial sandi. |
cancel_on_tap_outside |
Membatalkan dialog jika pengguna mengklik di luar dialog. |
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 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 Sekali Ketuk secara manual. |
itp_support |
Mengaktifkan UX Sekali Ketuk yang diupgrade di browser ITP. |
login_hint |
Lewati pemilihan akun dengan memberikan petunjuk pengguna. |
hd |
Batasi pemilihan akun berdasarkan domain. |
use_fedcm_for_prompt |
Izinkan browser mengontrol perintah login pengguna dan memediasi alur login antara situs Anda dan Google. |
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
selengkapnya:
Jenis | 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 mode UX popup
Google Sekali Ketuk atau tombol Login Dengan Google digunakan. Lihat
tabel berikut untuk informasi lebih lanjut:
Jenis | 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 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, dalam hal kredensial 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 tetapkan. 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 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
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 lebih lanjut:
Jenis | Wajib | Contoh |
---|---|---|
boolean | Opsional | cancel_on_tap_outside: false |
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 | prompt_parent_id: 'parent_id' |
nonce
Bidang 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 | nonce: "biaqbm70g23" |
Panjang nonce dibatasi pada ukuran JWT maksimum yang didukung oleh lingkungan Anda, serta batasan ukuran HTTP server dan browser individual.
context
Bidang ini mengubah teks judul dan pesan di prompt Sekali Ketuk. Lihat tabel berikut untuk informasi lebih lanjut:
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" |
state_cookie_domain
Jika Anda perlu menampilkan Sekali Ketuk di domain induk dan subdomainnya, teruskan domain induk ke kolom ini sehingga satu cookie dengan 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 menetapkan 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 lebih lanjut:
Jenis | Wajib | Contoh |
---|---|---|
string | Opsional | 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. |
allowed_parent_origin
Origin yang diizinkan untuk menyematkan iframe perantara. Fitur Sekali Ketuk berjalan dalam mode iframe perantara jika kolom ini ada. Lihat tabel berikut untuk mengetahui 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 |
URI domain tunggal. | "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 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
danhttps://
.co.uk
tidak valid; Seperti yang disebutkan di atas,"https://.example.com"
cocok denganexample.com
dan subdomainnya. Anda juga dapat menggunakan array untuk mewakili 2 domain yang berbeda. Misalnya,["https://example1.com", "https://
.example2.com"]
cocok dengan domainexample1.com
,example2.com
, dan subdomain dariexample2.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 Sekali Ketuk
mode iframe perantara akan gagal dan berhenti.
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 intermediate_iframe_close_callback
hanya berlaku dalam mode
iframe perantara. Dan kebijakan ini hanya berdampak pada iframe perantara, bukan iframe
Sekali Ketuk. 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 dapat memberikan petunjuk login ke Google. Jika berhasil, pemilihan akun akan dilewati. Nilai yang diterima adalah: alamat email atau nilai kolom sub token ID.
Untuk mengetahui 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,
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 informasi selengkapnya, lihat kolom hd di 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 Bermigrasi ke FedCM untuk informasi selengkapnya.
Jenis | Wajib | Contoh |
---|---|---|
boolean | Opsional | use_fedcm_for_prompt: true |
Metode: google.accounts.id.prompt
Metode google.accounts.id.prompt
menampilkan perintah Sekali Ketuk 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 pemuatan halaman. 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 saat-saat berikut:
- Display Moment: Momen ini terjadi setelah metode
prompt()
dipanggil. Notifikasi tersebut berisi nilai boolean untuk menunjukkan apakah UI ditampilkan atau tidak. Momen dilewati: Hal ini terjadi saat perintah Sekali Ketuk ditutup karena pembatalan otomatis, pembatalan manual, atau saat Google gagal mengeluarkan kredensial, seperti saat sesi yang dipilih telah logout dari Google.
Dalam hal ini, sebaiknya Anda melanjutkan 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 dalam dialog login, Anda dapat memanggil metode
google.accounts.id.cancel()
untuk menutup perintah Sekali Ketuk 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 hanya untuk momen tampilan? Catatan: Jika FedCM diaktifkan, notifikasi ini tidak akan diaktifkan. Lihat halaman Bermigrasi ke FedCM untuk informasi selengkapnya. |
isDisplayed() |
Apakah notifikasi ini untuk momen tampilan, dan UI
ditampilkan? Catatan: Jika FedCM diaktifkan, notifikasi ini tidak akan diaktifkan. Lihat halaman Bermigrasi ke FedCM untuk informasi selengkapnya. |
isNotDisplayed() |
Apakah notifikasi ini untuk momen tampilan, dan UI tidak
ditampilkan? Catatan: Jika FedCM diaktifkan, notifikasi ini tidak akan diaktifkan. Lihat halaman Bermigrasi ke FedCM untuk informasi selengkapnya. |
getNotDisplayedReason() |
Alasan mendetail UI tidak ditampilkan. Berikut ini adalah nilai yang memungkinkan:
|
isSkippedMoment() |
Apakah notifikasi ini dilewati untuk beberapa saat? |
getSkippedReason() |
Alasan mendetail untuk momen yang dilewati. Berikut ini adalah nilai yang memungkinkan:
|
isDismissedMoment() |
Apakah notifikasi ini untuk momen ditutup? |
getDismissedReason() |
Alasan mendetail atas penolakan. Berikut adalah nilai yang mungkin:
|
getMomentType() |
Menampilkan string untuk jenis momen. Berikut adalah nilai yang mungkin:
|
Jenis data: CredentialResponse
Saat fungsi callback
dipanggil, objek CredentialResponse
akan diteruskan sebagai parameter. Tabel berikut mencantumkan kolom yang dimuat
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) berenkode 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 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) 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, Google tidak
berwajib, dan sandi atau metode verifikasi lainnya direkomendasikan untuk
memverifikasi pengguna. email_verfied
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. |
user |
Pengguna dengan sesi yang sudah ada dan sebelumnya telah memberikan izin menekan tombol Sekali Ketuk 'Lanjutkan sebagai' untuk membagikan kredensial. |
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
Kolom ini hanya ditentukan saat pengguna mengklik tombol Login dengan Google untuk
login, dan atribut state
dari tombol yang diklik ditentukan. Nilai
kolom ini adalah nilai yang sama dengan yang Anda tetapkan 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 mengisi 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, filled_blue atau filled_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.
tipe
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 |
|
icon |
tema
Tema tombol. Nilai default-nya adalah outline
. Lihat tabel berikut untuk
informasi lebih lanjut:
Jenis | Wajib | Contoh |
---|---|---|
string | Opsional | theme: "filled_blue" |
Tabel berikut mencantumkan tema yang tersedia dan deskripsinya:
Tema | |
---|---|
outline |
|
filled_blue |
|
filled_black |
ukuran
Ukuran tombol. Nilai default-nya adalah large
. Lihat tabel berikut untuk
informasi lebih lanjut:
Jenis | Wajib | Contoh |
---|---|---|
string | Opsional | size: "small" |
Tabel berikut mencantumkan ukuran tombol yang tersedia beserta deskripsinya:
Ukuran | |
---|---|
large |
|
medium |
|
small |
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 lebih lanjut:
Jenis | Wajib | Contoh |
---|---|---|
string | Opsional | text: "signup_with" |
Tabel berikut mencantumkan semua teks tombol yang tersedia dan deskripsinya:
Teks | |
---|---|
signin_with |
|
signup_with |
|
continue_with |
|
signin |
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 |
|
pill |
|
circle |
|
square |
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 beserta deskripsinya:
logo_alignment | |
---|---|
left |
|
center |
lebar
Lebar tombol minimum, dalam piksel. Lebar maksimum adalah 400 piksel.
Lihat tabel berikut untuk informasi lebih lanjut:
Jenis | Wajib | Contoh |
---|---|---|
string | Opsional | width: "400" |
locale
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 | 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 Sign in with Google button clicks... dicatat ke konsol saat tombol Login dengan Google diklik.
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" |
Jenis data: Kredensial
Saat
fungsi native_callback
dipanggil, objek Credential
diteruskan sebagai parameter. Tabel
berikut mencantumkan kolom yang terdapat dalam objek:
Kolom | |
---|---|
id |
Mengidentifikasi pengguna. |
password |
Kata sandi |
Metode: google.accounts.id.disableAutoSelect
Saat pengguna logout dari situs, Anda harus memanggil metode google.accounts.id.disableAutoSelect
untuk mencatat status dalam cookie. Hal ini dapat mencegah dead loop 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, kredensial tersebut hanya dapat digunakan untuk menyimpan kredensial sandi. Lihat contoh kode metode berikut:
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 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
. Notifikasi akan dikirimkan setelah library JavaScript Login dengan Google 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 bagi pengguna tertentu. 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 dari payload kredensial. |
callback |
fungsi | Pengendali RevocationResponse opsional. |
Contoh kode berikut menunjukkan cara penggunaan metode revoke
dengan ID.
google.accounts.id.revoke('1618033988749895', done => { console.log(done.error); });
Jenis data: RevocationResponse
Saat fungsi callback
dipanggil, objek RevocationResponse
akan diteruskan sebagai parameter. Tabel berikut mencantumkan kolom yang dimuat
dalam objek respons pencabutan:
Kolom | |
---|---|
successful |
Kolom ini adalah nilai yang ditampilkan panggilan metode. |
error |
Kolom ini secara opsional berisi pesan respons error mendetail. |
berhasil
Kolom ini adalah nilai boolean yang ditetapkan ke benar jika panggilan metode yang dicabut berhasil atau salah jika gagal.
error
Kolom ini berupa nilai string dan berisi pesan error mendetail jika panggilan metode pencabutan gagal, atau tidak ditentukan saat panggilan metode berhasil dilakukan.