Credential Management API

Eiji Kitamura
Meggin Kearney
Meggin Kearney

Credential Management API adalah API browser berbasis standar yang menyediakan antarmuka terprogram antara situs dan browser untuk login yang lancar di seluruh perangkat.

Credential Management API:

  • Menghilangkan hambatan dari alur login - Pengguna dapat otomatis login kembali ke situs meskipun sesi mereka telah berakhir atau mereka menyimpan kredensial di perangkat lain.
  • Memungkinkan login dengan satu ketukan menggunakan pemilih akun - Pengguna dapat memilih akun di pemilih akun native.
  • Menyimpan kredensial - Aplikasi Anda dapat menyimpan kombinasi nama pengguna dan sandi atau bahkan detail akun gabungan. Kredensial ini dapat disinkronkan di seluruh perangkat oleh browser.

Ingin melihat cara kerjanya? Coba Demo Credential Management API dan lihat kodenya.

Memeriksa dukungan browser Credential Management API

Dukungan Browser

  • Chrome: 51.
  • Edge: 18.
  • Firefox: 60.
  • Safari: 13.

Sumber

Sebelum menggunakan Credential Management API, periksa terlebih dahulu apakah PasswordCredential atau FederatedCredential didukung.

if (window.PasswordCredential || window.FederatedCredential) {
  // Call navigator.credentials.get() to retrieve stored
  // PasswordCredentials or FederatedCredentials.
}

Login pengguna

Untuk memproses login pengguna, ambil kredensial dari pengelola sandi browser dan gunakan untuk memproses login pengguna.

Contoh:

  1. Saat pengguna membuka situs Anda dan mereka tidak login, panggil navigator.credentials.get().
  2. Gunakan kredensial yang diambil untuk memproses login pengguna.
  3. Perbarui UI untuk menunjukkan bahwa pengguna telah login.

Pelajari lebih lanjut di Membuat Pengguna Login.

Menyimpan atau memperbarui kredensial pengguna

Jika pengguna login dengan penyedia identitas gabungan seperti Login Google, Facebook, GitHub:

  1. Setelah pengguna berhasil login atau membuat akun, buat FederatedCredential dengan alamat email pengguna sebagai ID dan tentukan penyedia identitas dengan FederatedCredentials.provider.
  2. Simpan objek kredensial menggunakan navigator.credentials.store().

Pelajari lebih lanjut di Membuat Pengguna Login.

Jika pengguna login dengan nama pengguna dan sandi:

  1. Setelah pengguna berhasil login atau membuat akun, buat PasswordCredential dengan ID pengguna dan sandi.
  2. Simpan objek kredensial menggunakan navigator.credentials.store().

Pelajari lebih lanjut di Menyimpan Kredensial dari Formulir.

Logout

Saat pengguna logout, panggil navigator.credentials.preventSilentAccess() untuk mencegah pengguna login kembali secara otomatis.

Dengan menonaktifkan login otomatis, pengguna juga dapat beralih akun dengan mudah, misalnya, antara akun kerja dan pribadi, atau antara akun di perangkat bersama, tanpa harus memasukkan kembali informasi login mereka.

Pelajari lebih lanjut di Keluar.

Masukan