Referensi Login dengan Google JavaScript API

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

Metode: google.accounts.id.inisialisasi

Metode google.accounts.id.initialize menginisialisasi Login dengan Google klien berdasarkan objek konfigurasi. Lihat contoh kode berikut dari 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 klien Login dengan Google yang secara implisit dapat digunakan oleh semua modul dalam laman web yang sama.

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

Anda sebenarnya bisa mengatur ulang konfigurasi setiap kali Anda memanggil google.accounts.id.initialize, dan semua metode berikutnya dalam satu halaman web segera menggunakan konfigurasi baru tersebut.

Peringatan: Metode google.accounts.id.initialize hanya boleh dipanggil satu kali, meskipun jika Anda menggunakan fitur Sekali Ketuk dan tombol di halaman web yang sama.

Jenis data: IdConfiguration

Tabel berikut mencantumkan kolom dan deskripsi IdConfiguration {i>data type<i} (tipe data):

Kolom
client_id	Client ID aplikasi Anda
auto_select	Mengaktifkan pemilihan otomatis.
callback	Fungsi JavaScript yang menangani token ID. Google One Tap dan tombol Login Dengan Google popup mode UX menggunakan ini .
login_uri	URL endpoint login Anda. Tombol Login Dengan Google redirect Mode UX 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 untuk 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 One Tap di domain induk dan subdomainnya, meneruskan domain induk ke kolom ini sehingga satu cookie bersama data
ux_mode	Alur UX tombol Login Dengan Google
allowed_parent_origin	Asal 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 secara manual menutup fitur Sekali Ketuk.
itp_support	Mengaktifkan UX Sekali Ketuk yang diupgrade di browser ITP.
login_hint	Lewati pemilihan akun dengan memberikan petunjuk pengguna.
hd	Batasi pemilihan akun menurut 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 Anda. Lihat tabel berikut untuk informasi selengkapnya:

Jenis	Wajib	Contoh
string	Ya	client_id: "CLIENT_ID.apps.googleusercontent.com"

auto_select

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

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 Google Mode UX Sekali Ketuk atau Login Dengan Google popup digunakan. Lihat tabel berikut untuk informasi lebih lanjut:

Jenis	Wajib	Contoh
fungsi	Diperlukan untuk mode UX Sekali Ketuk dan 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 OAuth 2.0, yang telah Anda konfigurasi di konsol Google Cloud dan harus sesuai dengan validasi URI Pengalihan kami aturan.

Atribut ini dapat dihilangkan jika halaman saat ini adalah halaman login Anda, di mana jika kredensial diposting ke halaman ini secara default.

Respons kredensial token ID diposting ke endpoint login Anda saat pengguna mengklik tombol {i>sign In With Google<i} dan menggunakan mode {i>redirect UX<i}.

Lihat tabel berikut untuk informasi selengkapnya:

Jenis	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

Catatan: Dengan JavaScript API, respons dari Google One Ketuk dan Login Dengan Mode UX tombol Google popup hanya dapat ditampilkan ke JavaScript callback fungsi tersebut. Coba HTML API jika respons harus dikirim secara otomatis ke login_uri.

native_callback

Kolom ini adalah nama fungsi JavaScript yang menangani sandi kredensial 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 prompt. Nilai default-nya adalah true. Anda dapat menonaktifkannya jika Anda mengatur nilai menjadi 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 disetel, Perintah Sekali Ketuk ditampilkan di pojok 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 hingga ukuran JWT maksimum yang didukung oleh lingkungan Anda, serta batasan ukuran HTTP browser dan server individual.

context

Kolom ini mengubah teks judul dan pesan pada dialog 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 fitur Sekali Ketuk 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	Menjalankan alur UX login di jendela pop-up.
redirect	Melakukan alur UX login dengan pengalihan halaman penuh.

allowed_parent_origin

Asal yang diizinkan untuk menyematkan iframe perantara. Lari Sekali Ketuk pada mode iframe perantara jika kolom ini ada. Lihat yang berikut ini tabel 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	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 (mis. news.example.com, login.news.example.com). Hal-hal yang perlu diingat saat menggunakan karakter pengganti:

• String pola tidak dapat hanya terdiri dari karakter pengganti dan karakter tingkat atas {i>Directory<i} Misalnya, https://.com dan https://.co.uk tidak valid; Seperti disebutkan di atas, "https://.example.com" cocok dengan example.com dan subdomainnya. Anda juga dapat menggunakan untuk merepresentasikan 2 domain berbeda. Misalnya, ["https://example1.com", "https://.example2.com"] kecocokan domain example1.com, example2.com, dan subdomain dari example2.com
• Domain karakter pengganti harus dimulai dengan skema https:// yang aman, sehingga "*.example.com" dianggap tidak valid.

Catatan: Tidak seperti API HTML, string dengan URI yang dipisahkan koma tidak valid untuk kolom allowed_parent_origin. Gunakan objek Array JavaScript sebagai gantinya.

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

intermediate_iframe_close_callback

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

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

Jenis	Wajib	Contoh
fungsi	Opsional	intermediate_iframe_close_callback: logBeforeClose

itp_support

Bidang 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 informasi:

Jenis	Wajib	Contoh
boolean	Opsional	itp_support: true

login_hint

Jika aplikasi Anda tahu sebelumnya pengguna mana yang harus login, aplikasi itu 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 lebih lanjut, lihat kolom login_hint di OpenID Connect dokumentasi tambahan.

Jenis	Wajib	Contoh
String, alamat email, atau nilai dari token ID Kolom sub.	Opsional	login_hint: '[e-mail]'

hd

Jika pengguna memiliki beberapa akun dan hanya boleh login dengan Workspace miliknya menggunakan akun ini untuk memberikan petunjuk nama domain ke Google. Jika berhasil, pengguna akun yang ditampilkan selama pemilihan akun dibatasi untuk domain yang disediakan. Nilai karakter pengganti: * hanya menawarkan akun Workspace kepada pengguna dan mengecualikan akun konsumen ([e-mail]) selama pemilihan akun.

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

Jenis	Wajib	Contoh
String. Nama domain atau * yang sepenuhnya memenuhi syarat.	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 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 sesi status dan setelan pengguna di sisi Google, UI perintah Sekali Ketuk mungkin tidak ditampilkan. Untuk mendapatkan notifikasi tentang status UI untuk momen yang berbeda, teruskan untuk menerima notifikasi status UI.

Notifikasi diaktifkan pada momen berikut:

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

• Momen yang dilewati: Hal ini terjadi ketika dialog Sekali Ketuk ditutup oleh tombol otomatis pembatalan, pembatalan manual, atau saat Google gagal memberikan kredensial, seperti saat sesi yang dipilih telah logout dari Google.

  Jika demikian, sebaiknya Anda melanjutkan ke langkah-langkah yang diperlukan penyedia layanan, jika ada.

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

  Peringatan: Saat berada pada momen yang ditutup, jangan coba identitas berikutnya cloud Anda.

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>

Catatan: Untuk meningkatkan privasi pengguna, notifikasi momen tampilan sengaja dibuat tertunda saat FedCM diaktifkan. Notifikasi dapat diterima hingga 1 menit setelah peristiwa sebenarnya terjadi.

Catatan: Untuk pengelola kredensial native, tidak ada notifikasi untuk ditampilkan. momen yang dilewati, atau ditutup, karena terjadi di luar library GIS.

Jenis data: PromptMomentNotification

Tabel berikut mencantumkan metode dan deskripsi atribut Jenis data PromptMomentNotification:

Perhatian: Perubahan FedCM memengaruhi isDisplayMoment(), isDisplayed(), isNotDisplayed(), getNotDisplayedReason(), dan getSkippedReason().Lihat Migrasikan ke halaman FedCM untuk mengetahui informasi selengkapnya.

Metode
isDisplayMoment()	Apakah notifikasi ini untuk momen tampilan? Catatan: Jika FedCM diaktifkan, notifikasi ini tidak akan diaktifkan. Lihat Bermigrasi ke FedCM untuk informasi selengkapnya.
isDisplayed()	Apakah notifikasi ini untuk momen tampilan, dan UI-nya adalah ditampilkan? Catatan: Jika FedCM diaktifkan, notifikasi ini tidak akan diaktifkan. Lihat Bermigrasi ke FedCM untuk informasi selengkapnya.
isNotDisplayed()	Apakah notifikasi ini hanya untuk momen tampilan, dan UI-nya tidak ditampilkan? Catatan: Jika FedCM diaktifkan, notifikasi ini tidak akan diaktifkan. Lihat Bermigrasi ke FedCM untuk informasi selengkapnya.
getNotDisplayedReason()	Alasan mendetail mengapa UI tidak ditampilkan. Berikut ini adalah nilai yang mungkin: 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 Bermigrasi ke FedCM untuk informasi selengkapnya.
isSkippedMoment()	Apakah notifikasi ini dilewati sebentar?
getSkippedReason()	Alasan mendetail untuk momen yang dilewati. Berikut ini adalah nilai yang mungkin: auto_cancel user_cancel tap_outside issuing_failed Catatan: Jika FedCM diaktifkan, metode ini tidak didukung. Lihat Bermigrasi ke FedCM untuk informasi selengkapnya.
isDismissedMoment()	Apakah notifikasi ini untuk momen yang ditutup?
getDismissedReason()	Alasan mendetail atas penolakan tersebut. Hal berikut mungkin terjadi nilai-nilai: credential_returned cancel_called flow_restarted
getMomentType()	Menampilkan string untuk jenis momen. Hal berikut mungkin terjadi nilai-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 Login dengan Google untuk login, dan state dari tombol ditentukan.

kredensial

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

Kapan didekode, JWT terlihat seperti contoh berikut:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "[e-mail]", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "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 fitur Google Akun 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 {i>host<i} dan bersifat otoritatif untuk alamat email. Dalam kasus di mana Google otoritatif, pengguna dipastikan sebagai pemilik akun yang sah.

Kasus saat Google bersifat otoritatif:

• email memiliki akhiran @gmail.com, ini adalah Akun Gmail.
• email_verified benar dan hd ditetapkan, ini adalah Google Workspace menggunakan akun layanan.

Pengguna dapat mendaftar ke Akun Google tanpa menggunakan Gmail atau Google Workspace. Jika email tidak berisi akhiran @gmail.com dan hd tidak ada, Google akan tidak otoritatif dan menggunakan {i>password<i} atau metode verifikasi lainnya disarankan untuk memverifikasi pengguna. email_verfied juga bisa benar karena Google awalnya diverifikasi pengguna saat Akun Google dibuat, namun kepemilikan akun email pihak ketiga mungkin telah berubah.

Kolom exp menunjukkan waktu habis masa berlaku bagi Anda untuk memverifikasi token di sisi server. Satu jam untuk token ID yang diperoleh dari Login dengan Google. Anda harus memverifikasi token sebelum masa berlaku habis baik. Jangan gunakan exp untuk pengelolaan sesi. Token ID yang sudah tidak berlaku bukan berarti pengguna telah logout. Aplikasi Anda bertanggung jawab atas sesi pengelolaan pengguna Anda.

select_by

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

• Pengguna menekan tombol Sekali Ketuk atau Login Dengan Google atau tombol proses login Otomatis tanpa kontak fisik.

• 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 juga

  • menekan tombol {i>Confirm<i} untuk memberikan izin mereka untuk berbagi kredensial, atau
  • sebelumnya telah memberikan izin dan menggunakan fitur Pilih Akun untuk memilih Akun Google.

Nilai isian ini diatur ke salah satu jenis ini,

Nilai	Deskripsi
auto	Proses login otomatis pengguna dengan sesi yang ada dan telah sebelumnya memberikan izin untuk berbagi kredensial. Hanya berlaku untuk yang tidak didukung oleh FedCM.
user	Pengguna yang sudah memiliki sesi, yang sebelumnya telah memberikan izin menekan tombol 'Lanjutkan sebagai' Sekali Ketuk untuk membagikan kredensial. Berlaku hanya untuk browser yang tidak didukung FedCM.
fedcm	Pengguna menekan tombol Sekali Ketuk 'Lanjutkan sebagai' tombol untuk berbagi kredensial menggunakan FedCM. Hanya berlaku untuk FedCM didukung browser.
fedcm_auto	Proses login otomatis pengguna dengan sesi yang ada dan telah sebelumnya memberikan izin untuk membagikan kredensial menggunakan Sekali Ketuk FedCM. Hanya berlaku untuk FedCM didukung browser.
user_1tap	Pengguna dengan sesi yang ada menekan tombol Sekali Ketuk 'Lanjutkan sebagai' untuk memberikan izin dan membagikan kredensial. Hanya berlaku untuk Chrome v75 dan yang lebih tinggi.
user_2tap	Pengguna tanpa sesi yang ada menekan tombol Sekali Ketuk 'Lanjutkan sebagai' untuk memilih akun, lalu menekan tombol Konfirmasi di untuk memberikan izin dan membagikan kredensial. Berlaku untuk browser yang tidak berbasis Chromium.
btn	Pengguna dengan sesi yang sudah ada, yang sebelumnya memberikan izin menekan tombol Sign In With Google dan memilih Akun Google dari 'Pilih Akun' untuk berbagi kredensial.
btn_confirm	Pengguna dengan sesi yang ada menekan tombol Login Dengan Google dan menekan tombol {i>Confirm<i} untuk memberikan izin dan membagikan kredensial.
btn_add_session	Pengguna yang tidak memiliki sesi yang sebelumnya telah mengizinkan izin menekan tombol Login Dengan Google untuk memilih Akun Google dan berbagi kredensial.
btn_confirm_add_session	Pengguna tanpa sesi yang ada terlebih dahulu menekan tombol Login dengan Google untuk memilih Akun Google, lalu menekan tombol Konfirmasi 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. Tujuan isian ini adalah nilai yang sama dengan yang Anda tetapkan dalam atribut Atribut state.

Karena beberapa tombol Login dengan Google dapat dirender di halaman yang sama, Anda menetapkan setiap tombol dengan {i>string<i} unik. Oleh karena itu, Anda dapat mengubah kolom state ini untuk mengidentifikasi tombol mana yang diklik pengguna untuk masuk.

Metode: google.accounts.id.renderButton

Metode google.accounts.id.renderButton merender Login dengan Google di laman 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 atribut Jenis data GsiButtonConfiguration:

Atribut
type	Jenis tombol: ikon, atau tombol standar.
theme	Tema tombol. Misalnya, fill_blue ataufilled_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 akan dipanggil saat 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 contoh.

jenis

Jenis tombol. Nilai default-nya adalah standard.

Lihat tabel berikut untuk informasi selengkapnya:

Jenis	Wajib	Contoh
string	Ya	type: "icon"

Tabel berikut mencantumkan jenis tombol yang tersedia dan deskripsi:

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 informasi lebih lanjut:

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 berisi warna biru.
filled_black	Tema tombol berwarna hitam.

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 dan deskripsinya:

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

teks

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

Lihat tabel berikut untuk informasi selengkapnya:

Jenis	Wajib	Contoh
string	Opsional	text: "signup_with"

Tabel berikut mencantumkan semua teks tombol yang tersedia dan deskripsi:

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

logo_alignment

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

Jenis	Wajib	Contoh
string	Opsional	logo_alignment: "center"

Tabel berikut mencantumkan penyelarasan yang tersedia dan deskripsinya:

logo_alignment
left	Rata kiri logo Google.
center	Rata tengah logo Google.

lebar

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

Lihat tabel berikut untuk informasi selengkapnya:

Jenis	Wajib	Contoh
string	Opsional	width: "400"

locale

Opsional. Tampilkan teks tombol menggunakan lokal yang ditentukan, jika tidak, akan digunakan secara default dengan setelan Akun Google atau browser pengguna. Tambahkan parameter hl dan kode bahasa Anda ke perintah src saat memuat library, misalnya: gsi/client?hl=<iso-639-code>.

Jika tidak disetel, lokalitas default browser atau bahasa pengguna sesi Google preferensi yang 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:

Jenis	Wajib	Contoh
string	Opsional	locale: "zh_CN"

click_listener

Anda dapat menentukan fungsi JavaScript yang akan dipanggil saat 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 ketika tombol {i> sign in with Google<i} diklik.

dengan status tersembunyi akhir

Opsional, karena beberapa tombol Login dengan Google dapat dirender secara bersamaan Anda dapat menetapkan setiap tombol dengan string unik. {i>String<i} yang sama akan kembali dengan token ID, sehingga Anda dapat mengidentifikasi pengguna tombol mana mengklik untuk login.

Lihat tabel berikut untuk informasi selengkapnya:

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

Jenis data: Kredensial

Jika native_callback dipanggil, objek Credential diteruskan sebagai parameter. Tujuan 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. Ini dan mencegah UX berhenti berfungsi. Lihat cuplikan kode metode berikut:

google.accounts.id.disableAutoSelect()

Contoh kode berikut mengimplementasikan 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() native browser kredensial API. Oleh karena itu, sandi hanya dapat digunakan untuk menyimpan sandi kredensial. Lihat contoh kode metode berikut:

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

Contoh kode berikut mengimplementasikan 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 pihak tepercaya DOM. 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. Ini diberi tahu setelah Tanda Di Dengan library JavaScript 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 dari payload kredensial.
callback	fungsi	Pengendali RevocationResponse opsional.

Contoh kode berikut menunjukkan cara menggunakan metode revoke dengan sebuah ID.

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

Poin Penting: Memanggil metode ini akan mencabut semua cakupan OAuth 2.0 yang sebelumnya diberikan di library klien Login Dengan Google.

Jenis data: RevocationResponse

Saat fungsi callback dipanggil, objek RevocationResponse akan diteruskan sebagai parameter. Tabel berikut mencantumkan kolom yang terdapat di 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 disetel ke benar (true) jika panggilan metode pencabutan berhasil atau false jika gagal.

error

Kolom ini berupa nilai string dan berisi pesan error mendetail jika operasi pencabutan panggilan metode gagal, panggilan tidak terdefinisi jika berhasil.