Halaman referensi ini menjelaskan Sign-In JavaScript API. Anda dapat menggunakan API ini untuk menampilkan dialog Login 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 berikut dari
metode:
google.accounts.id.initialize(IdConfiguration)
Contoh kode berikut menerapkan 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 Anda menggunakan beberapa modul (seperti Login Sekali Klik, 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 sebenarnya 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 |
ID klien aplikasi Anda |
color_scheme |
Skema warna yang diterapkan ke dialog login Sekali Ketuk. |
auto_select |
Mengaktifkan pemilihan otomatis. |
callback |
Fungsi JavaScript yang menangani token ID. Login Sekali Ketuk Google dan
mode UX tombol Login Dengan Google popup 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 perintah jika pengguna mengklik di luar perintah. |
prompt_parent_id |
ID DOM elemen penampung dialog login Sekali Ketuk |
nonce |
String acak untuk token ID |
context |
Judul dan kata-kata dalam dialog Sekali Ketuk |
state_cookie_domain |
Jika Anda perlu memanggil Login 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. Login Sekali Ketuk dijalankan dalam mode iframe perantara jika kolom ini ada. |
intermediate_iframe_close_callback |
Menggantikan perilaku iframe perantara default saat pengguna menutup Login Sekali Ketuk secara manual. |
itp_support |
Mengaktifkan UX Ketuk Sekali 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. |
use_fedcm_for_button |
Kolom ini menentukan apakah UX tombol FedCM harus digunakan di Chrome
(desktop M125+ dan Android M128+). Nilai defaultnya adalah false . |
button_auto_select |
Apakah akan mengaktifkan opsi pilih otomatis
untuk alur tombol FedCM. Jika diaktifkan, pengguna yang kembali dengan
sesi Google aktif akan otomatis login, melewati
prompt Pemilih Akun.Nilai defaultnya adalah false . |
client_id
Kolom 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 | client_id: "CLIENT_ID.apps.googleusercontent.com" |
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. | 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. |
auto_select
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 mengetahui informasi selengkapnya:
Jenis | Wajib | Contoh |
---|---|---|
boolean | Opsional | auto_select: true |
callback
Kolom ini adalah fungsi JavaScript yang menangani token ID yang ditampilkan dari
dialog Satu Ketuk atau jendela pop-up. Atribut ini wajib diisi jika mode UX popup
Login Sekali dengan Google atau tombol Login dengan Google digunakan. Lihat
tabel berikut untuk mengetahui informasi selengkapnya:
Jenis | Wajib | Contoh |
---|---|---|
fungsi | Diperlukan untuk fitur 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, 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 mode UX pengalihan digunakan.
Lihat tabel berikut untuk mengetahui informasi selengkapnya:
Jenis | Opsional | Contoh |
---|---|---|
URL | Defaultnya 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 parameter credential
dengan nilai token ID di isi.
native_callback
Kolom ini adalah nama fungsi JavaScript yang menangani kredensial sandi yang ditampilkan dari pengelola kredensial bawaan browser. Lihat tabel berikut untuk mengetahui informasi selengkapnya:
Jenis | Wajib | Contoh |
---|---|---|
fungsi | Opsional | native_callback: handleResponse |
cancel_on_tap_outside
Kolom ini menetapkan apakah permintaan Login Sekali Ketuk harus dibatalkan jika pengguna mengklik
di luar dialog. Nilai default-nya adalah true
. Anda dapat menonaktifkannya jika menetapkan
nilai ke false
. Lihat tabel berikut untuk mengetahui informasi selengkapnya:
Jenis | Wajib | Contoh |
---|---|---|
boolean | Opsional | cancel_on_tap_outside: false |
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 | prompt_parent_id: 'parent_id' |
nonce
Kolom 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 | nonce: "biaqbm70g23" |
Panjang nonce dibatasi hingga ukuran JWT maksimum yang didukung oleh lingkungan Anda, serta batasan ukuran HTTP browser dan server individual.
konteks
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 | context: "use" |
Tabel berikut mencantumkan semua konteks yang tersedia dan deskripsinya:
Konteks | |
---|---|
signin |
"Login ke" |
signup |
"Sign up to" (Daftar ke) |
use |
"Gunakan" |
state_cookie_domain
Jika Anda perlu menampilkan Login Sekali Ketuk di domain induk dan subdomainnya, teruskan domain induk ke kolom ini agar satu cookie status bersama digunakan. Lihat tabel berikut untuk mengetahui informasi selengkapnya:
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 mengetahui informasi selengkapnya:
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. Ketuk Sekali berjalan dalam mode iframe perantara jika kolom ini ada. Lihat tabel berikut untuk mengetahui informasi selengkapnya:
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 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
danhttps://
.co.uk
tidak valid karena"https://.example.com"
cocok denganexample.com
dan semua subdomainnya. Gunakan daftar yang dipisahkan koma untuk merepresentasikan dua domain yang berbeda. Misalnya,"https://example1.com,https://
.example2.com"
cocok dengan domainexample1.com
,example2.com
, dan subdomainexample2.com
- Domain wildcard harus dimulai dengan skema https:// yang aman, sehingga
"*.example.com"
dianggap tidak valid.
Jika nilai kolom allowed_parent_origin
tidak valid, inisialisasi One Tap
mode iframe perantara akan gagal dan berhenti.
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 intermediate_iframe_close_callback
hanya berlaku dalam mode iframe menengah. Selain itu, hanya iframe perantara yang terpengaruh, bukan iframe
Login Sekali Ketuk. UI Satu 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 Pencegahan Pelacakan Cerdas
(ITP). Nilai defaultnya adalah false
. Lihat tabel berikut untuk mengetahui informasi selengkapnya:
Jenis | Wajib | Contoh |
---|---|---|
boolean | Opsional | itp_support: true |
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 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-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 (user@gmail.com) selama pemilihan akun.
Untuk mengetahui 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
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 | use_fedcm_for_prompt: true |
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 | use_fedcm_for_button: true |
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 | button_auto_select: true |
Metode: google.accounts.id.prompt
Metode google.accounts.id.prompt
menampilkan perintah One Tap atau pengelola kredensial bawaan 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 Login Sekali Ketuk mungkin tidak ditampilkan. Untuk mendapatkan notifikasi tentang status UI pada waktu yang berbeda, teruskan
fungsi untuk menerima notifikasi status UI.
Notifikasi diaktifkan pada saat 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 saat perintah Satu 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 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 di dialog login Anda, Anda dapat memanggil metode
google.accounts.id.cancel()
untuk menutup dialog login dengan fitur sekali ketuk dan memicu momen 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? Catatan: Saat FedCM diaktifkan, notifikasi ini tidak akan muncul. Lihat halaman Migrasi ke FedCM untuk mengetahui informasi selengkapnya. |
isDisplayed() |
Apakah notifikasi ini untuk momen tampilan, dan UI ditampilkan? Catatan: Saat FedCM diaktifkan, notifikasi ini tidak akan muncul. Lihat halaman Migrasi ke FedCM untuk mengetahui informasi selengkapnya. |
isNotDisplayed() |
Apakah notifikasi ini untuk momen tampilan, dan UI tidak
ditampilkan? Catatan: Saat FedCM diaktifkan, notifikasi ini tidak akan muncul. Lihat halaman Migrasi ke FedCM untuk mengetahui informasi selengkapnya. |
getNotDisplayedReason() |
Alasan mendetail mengapa UI tidak ditampilkan. Berikut adalah nilai yang mungkin:
|
isSkippedMoment() |
Apakah notifikasi ini untuk momen yang dilewati? |
getSkippedReason() |
Alasan mendetail momen dilewati. Berikut adalah nilai yang mungkin:
|
isDismissedMoment() |
Apakah notifikasi ini untuk momen yang ditutup? |
getDismissedReason() |
Alasan mendetail penolakan. Berikut adalah kemungkinan nilai:
|
getMomentType() |
Menampilkan string untuk jenis momen. Berikut adalah kemungkinan nilai:
|
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 |
Token ID JWT yang dienkode yang dikeluarkan Google. |
select_by |
Cara pengguna login. |
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 Token Web JSON (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.
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 danhd
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_verfied
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.
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
Kolom ini hanya ditentukan saat pengguna mengklik tombol Login dengan Google untuk
login, dan atribut state
tombol yang diklik ditentukan. Nilai
kolom ini adalah nilai yang sama dengan yang Anda tentukan dalam atribut
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 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 disetel, bahasa tombol akan dirender. |
click_listener |
Jika disetel, fungsi ini dipanggil saat tombol Login dengan Google diklik. |
state |
Jika disetel, string ini akan ditampilkan dengan token ID. |
Jenis atribut
Bagian berikut berisi detail tentang jenis setiap atribut, dan contohnya.
jenis
Jenis tombol. Nilai default-nya adalah standard
.
Lihat tabel berikut untuk mengetahui informasi selengkapnya:
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 mengetahui informasi selengkapnya:
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 mengetahui informasi selengkapnya:
Jenis | Wajib | Contoh |
---|---|---|
string | Opsional | size: "small" |
Tabel berikut mencantumkan ukuran tombol yang tersedia dan 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
berbeda.
Satu-satunya pengecualian adalah saat teks dibaca untuk aksesibilitas layar.
Lihat tabel berikut untuk mengetahui informasi selengkapnya:
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 |
![]() ![]() ![]() icon , maka sama dengan square .
|
pill |
![]() ![]() ![]() icon , maka sama dengan circle .
|
circle |
![]() ![]() ![]() standard , maka sama dengan pill .
|
square |
![]() ![]() ![]() standard , maka sama dengan rectangular .
|
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 | logo_alignment: "center" |
Tabel berikut mencantumkan perataan yang tersedia dan deskripsinya:
logo_alignment | |
---|---|
left |
![]() |
center |
![]() |
lebar
Lebar tombol minimum, dalam piksel. Lebar maksimum adalah 400 piksel.
Lihat tabel berikut untuk mengetahui informasi selengkapnya:
Jenis | Wajib | Contoh |
---|---|---|
string | Opsional | width: "400" |
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 | 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 clicked... 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 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" |
Jenis data: Kredensial
Saat fungsi
native_callback
dipanggil, objek Credential
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, Anda harus memanggil metode
google.accounts.id.disableAutoSelect
untuk mencatat status di cookie. Hal ini
mencegah loop buntu UX. Lihat cuplikan kode metode berikut:
google.accounts.id.disableAutoSelect()
Contoh kode berikut menerapkan 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()
API pengelola kredensial bawaan 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 Satu Ketuk jika Anda 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 menerapkan 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 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 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 credential. |
callback |
fungsi | Handler 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
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 benar (true) jika panggilan metode pencabutan berhasil atau salah (false) jika gagal.
error
Kolom ini adalah nilai string dan berisi pesan error mendetail jika panggilan metode pencabutan gagal, dan tidak ditentukan jika berhasil.