Masuk dengan referensi Google JavaScript API

Halaman referensi ini menjelaskan API JavaScript Masuk. Anda dapat menggunakan API ini untuk menampilkan prompt Sekali Ketuk atau tombol Masuk Dengan Google di halaman web Anda.

Metode: google.accounts.id.initialize

Metode google.accounts.id.initialize menginisialisasi klien Masuk Dengan Google berdasarkan objek konfigurasi. Lihat contoh kode metode berikut ini:

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>

Tipe data: IdConfiguration

Tabel berikut mencantumkan bidang dan deskripsi IdConfiguration data IdConfiguration :

client_id

Bidang ini adalah ID klien aplikasi Anda, yang ditemukan dan dibuat di Google Developers Console. Lihat tabel berikut untuk informasi lebih lanjut:

auto_select

Bidang ini menentukan apakah token ID secara otomatis dikembalikan tanpa interaksi pengguna ketika hanya ada satu sesi Google yang telah menyetujui aplikasi Anda sebelumnya. Nilai defaultnya false . Lihat tabel berikut untuk informasi lebih lanjut:

panggilan balik

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

login_uri

Atribut ini adalah URL titik akhir login Anda. Atribut ini diperlukan jika mode UX redirect tombol Masuk Dengan Google digunakan. Lihat tabel berikut untuk informasi lebih lanjut:

native_callback

Bidang ini adalah nama fungsi JavaScript yang menangani kredensial kata sandi yang dikembalikan dari pengelola kredensial asli browser. Lihat tabel berikut untuk informasi lebih lanjut:

cancel_on_tap_outside

Field ini mengatur apakah akan membatalkan permintaan One Tap jika pengguna mengklik di luar prompt. Nilai defaultnya true . Anda dapat menonaktifkannya jika Anda menyetel nilainya ke false . Lihat tabel berikut untuk informasi lebih lanjut:

prompt_parent_id

Atribut ini menyetel ID DOM dari elemen kontainer. Jika tidak diatur, perintah One Tap ditampilkan di sudut kanan atas jendela. Lihat tabel berikut untuk informasi lebih lanjut:

nonce

Bidang ini adalah string acak yang digunakan oleh token ID untuk mencegah serangan replay. Lihat tabel berikut untuk informasi lebih lanjut:

konteks

Bidang ini mengubah teks judul dan pesan di prompt Satu Ketukan. Lihat tabel berikut untuk informasi lebih lanjut:

Tabel berikut mencantumkan konteks yang tersedia dan deskripsinya:

state_cookie_domain

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

ux_mode

Gunakan bidang ini untuk menyetel aliran UX yang digunakan oleh tombol Masuk Dengan Google. Nilai defaultnya adalah popup . Atribut ini tidak memengaruhi OneTap UX. Lihat tabel berikut untuk informasi lebih lanjut:

Tabel berikut mencantumkan mode UX yang tersedia dan deskripsinya.

Allowed_parent_origin

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

Tabel berikut mencantumkan tipe nilai yang didukung dan deskripsinya.

Awalan karakter pengganti juga didukung. Misalnya, "https://*.example.com" akan cocok dengan example.com dan subdomainnya di semua level (mis. 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 level teratas. Misalnya https://*.com dan https://*.co.uk tidak valid; Seperti disebutkan di atas, "https://*.example.com" akan cocok dengan example.com dan subdomainnya. Anda juga dapat menggunakan larik untuk mewakili 2 domain berbeda. Misalnya, ["https://example1.com", "https://*.example2.com"] akan cocok dengan domain example1.com , example2.com , dan subdomain dari example2.com
• Domain karakter pengganti harus dimulai dengan skema https: // yang aman. "*.example.com" akan dianggap tidak valid.

Jika nilai bidang allowed_parent_origin tidak valid, inisialisasi Satu Ketuk dari mode iframe perantara akan gagal dan berhenti.

intermediate_iframe_close_callback

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

Bidang intermediate_iframe_close_callback hanya berlaku dalam mode iframe menengah. Dan itu hanya berdampak pada iframe menengah, bukan iframe Satu Ketuk. UI One Tap dihapus sebelum callback dipanggil.

Metode: google.accounts.id.prompt

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

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

Biasanya, metode prompt() dipanggil saat pemuatan halaman. Karena status sesi dan pengaturan pengguna di sisi Google, UI prompt Satu Ketukan mungkin tidak ditampilkan. Untuk mendapatkan pemberitahuan tentang status UI untuk momen yang berbeda, teruskan fungsi untuk menerima pemberitahuan status UI.

Notifikasi diaktifkan pada saat-saat berikut:

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

• Momen yang dilewati: Ini terjadi saat perintah Satu Ketukan ditutup dengan pembatalan otomatis, pembatalan manual, atau saat Google gagal mengeluarkan kredensial, seperti saat sesi yang dipilih telah keluar dari Google.

  Dalam kasus ini, kami menyarankan Anda untuk melanjutkan ke penyedia identitas berikutnya, jika ada.

• Momen ditutup: Ini terjadi saat Google berhasil mengambil kredensial atau pengguna ingin menghentikan aliran pengambilan kredensial. Misalnya, saat pengguna mulai memasukkan nama pengguna dan sandi mereka dalam dialog login Anda, Anda dapat memanggil metode google.accounts.id.cancel() untuk menutup prompt Satu google.accounts.id.cancel() 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 PromptMomentNotification data PromptMomentNotification :

Jenis data: CredentialResponse

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

mandat

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

Saat didekodekan, 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": "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": "Eliza",
  "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"
}

sub bidang berisi pengenal unik global untuk akun Google.

Dengan menggunakan bidang email , email_verified , dan hd Anda dapat menentukan apakah Google menghosting dan berwenang untuk sebuah alamat email. Jika Google berwenang, pengguna saat ini diketahui sebagai pemilik akun yang sah.

Kasus di mana Google berwibawa:

• email memiliki akhiran @gmail.com , ini adalah akun Gmail.
• email_verified benar dan hd disetel, ini adalah akun G Suite.

Pengguna dapat mendaftar untuk Akun Google tanpa menggunakan Gmail atau G Suite. Jika email tidak berisi akhiran @gmail.com dan hd tidak ada, Google tidak berwibawa dan sandi atau metode tantangan lainnya disarankan untuk memverifikasi pengguna. email_verfied juga bisa benar karena Google awalnya memverifikasi pengguna saat akun Google dibuat, namun kepemilikan akun email pihak ketiga mungkin telah berubah.

select_by

Tabel berikut mencantumkan nilai yang mungkin untuk bidang select_by . Jenis tombol yang digunakan bersama dengan sesi dan status persetujuan digunakan untuk menyetel nilainya,

• Pengguna menekan tombol Sekali Ketuk atau Masuk Dengan Google atau menggunakan proses masuk Otomatis tanpa sentuh.

• Sesi yang ada ditemukan, atau pengguna memilih dan masuk ke Akun Google untuk membuat sesi baru.

• Sebelum membagikan kredensial token ID dengan aplikasi Anda, pengguna juga

  • menekan tombol Konfirmasi untuk memberikan persetujuan mereka untuk berbagi kredensial, atau
  • sebelumnya telah memberikan persetujuan dan menggunakan Pilih Akun untuk memilih Akun Google.

Nilai bidang ini ditetapkan ke salah satu jenis ini,

client_id

Bidang ini adalah ID klien OAuth.

Metode: google.accounts.id.renderButton

Metode google.accounts.id.renderButton merender tombol Masuk Dengan Google di laman web Anda.

Lihat contoh kode metode berikut ini:

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

Contoh kode berikut membuat tombol Masuk Dengan Google pada pemuatan halaman:

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: '<var>YOUR_GOOGLE_CLIENT_ID</var>',
      callback: handleCredentialResponse
    });
    google.accounts.id.renderButton(buttonDiv, {
      theme: 'outline',
      size: 'large',
    });
  };
</script>

Jenis data: GsiButtonConfiguration

Tabel berikut mencantumkan bidang dan deskripsi jenis data GsiButtonConfiguration :

Jenis atribut

Bagian berikut berisi detail tentang setiap jenis atribut, dan sebuah contoh.

Tipe

Jenis tombol. Nilai defaultnya adalah standard .

Lihat tabel berikut untuk informasi lebih lanjut:

Tabel berikut mencantumkan jenis tombol yang tersedia dan deskripsinya:

Tipe
standard	Tombol dengan teks atau informasi yang dipersonalisasi:
icon	Tombol ikon tanpa teks:

tema

Tema tombol. Nilai defaultnya adalah outline . Lihat tabel berikut untuk informasi lebih lanjut:

Tabel berikut mencantumkan tema yang tersedia dan deskripsinya:

Tema
outline	Tema tombol standar:
filled_blue	Tema tombol berisi biru:
filled_black	Tema tombol berisi hitam:

ukuran

Ukuran tombol. Nilai defaultnya large . Lihat tabel berikut untuk informasi lebih lanjut:

Tabel berikut mencantumkan ukuran tombol yang tersedia dan deskripsinya:

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

teks

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

Lihat tabel berikut untuk informasi lebih lanjut:

Tabel berikut mencantumkan teks tombol yang tersedia dan deskripsinya:

Teks
signin_with	Teks tombolnya adalah "Masuk dengan Google":
signup_with	Teks tombolnya adalah "Daftar dengan Google":
continue_with	Teks tombolnya adalah "Lanjutkan dengan Google":
signup_with	Teks tombolnya adalah "Masuk":

bentuk

Bentuk kancingnya. Nilai defaultnya adalah rectangular . Lihat tabel berikut untuk informasi lebih lanjut:

Tabel berikut mencantumkan bentuk tombol yang tersedia dan deskripsinya:

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

logo_alignment

Penjajaran logo Google. Nilai defaultnya left . Atribut ini hanya berlaku untuk jenis tombol standard . Lihat tabel berikut untuk informasi lebih lanjut:

Tabel berikut mencantumkan perataan yang tersedia dan deskripsinya:

logo_alignment
left	Logo Google rata kiri.
center	Logo Google diratakan tengah.

lebar

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

Lihat tabel berikut untuk informasi lebih lanjut:

lokal

Lokal teks tombol yang telah ditentukan sebelumnya. Jika tidak disetel, lokal default browser atau preferensi pengguna sesi Google akan digunakan. Oleh karena itu, pengguna yang berbeda mungkin melihat versi berbeda dari tombol yang dilokalkan, dan mungkin dengan ukuran yang berbeda.

Lihat tabel berikut untuk informasi lebih lanjut:

Jenis data: Kredensial

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

Metode: google.accounts.id.disableAutoSelect

Saat pengguna keluar dari situs web Anda, Anda perlu memanggil metode google.accounts.id.disableAutoSelect untuk mencatat status dalam cookie. Ini mencegah loop mati UX. Lihat cuplikan kode metode berikut:

google.accounts.id.disableAutoSelect()

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

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

Metode: google.accounts.id.storeCredential

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

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 aliran Satu Ketuk jika Anda menghapus permintaan dari DOM pihak pengandal. Operasi pembatalan diabaikan jika kredensial sudah dipilih. Lihat contoh kode metode berikut ini:

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>

Library load callback: onGoogleLibraryLoad

Anda dapat mendaftarkan panggilan balik onGoogleLibraryLoad . Ini diberitahukan setelah masuk dengan perpustakaan JavaScript Google dimuat:

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

Callback ini hanyalah jalan pintas 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 kepada pengguna yang ditentukan. Lihat cuplikan kode metode berikut: google.accounts.id.revoke(hint, callback)

Contoh kode berikut menunjukkan bagaimana 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 bidang yang terdapat dalam objek respons pencabutan:

sukses

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

kesalahan

Bidang ini adalah nilai string dan berisi pesan kesalahan mendetail jika panggilan metode pencabutan gagal, tidak ditentukan tentang keberhasilan.