Membantu pengguna menggunakan kunci sandi dengan lebih lancar

Eiji Kitamura

Dipublikasikan: 09 Mei 2025

Kunci sandi menawarkan autentikasi yang kuat dan tahan terhadap phishing. Namun, meminta pengguna untuk mengadopsinya dapat menimbulkan hambatan. Dengan pembuatan kunci sandi otomatis, Anda dapat membuat kunci sandi untuk pengguna pada saat yang tepat, selama mereka sudah menyimpan sandi untuk situs Anda. Pembuatan Bersyarat, yang memungkinkan pembuatan kunci sandi otomatis, adalah bagian dari spesifikasi WebAuthn.

Cara kerjanya

Untuk membantu pengguna menggunakan kunci sandi dengan lebih mudah, gunakan fitur WebAuthn API yang disebut Pembuatan Bersyarat. Pembuatan Bersyarat memungkinkan situs Anda meminta kunci sandi untuk pengguna tanpa memerlukan tindakan apa pun dari mereka.

Alur ini berfungsi jika kondisi berikut terpenuhi:

• Pengguna memiliki sandi tersimpan di pengelola sandi default mereka.
• Sandi baru-baru ini digunakan. Idealnya, panggil Pembuatan Bersyarat segera setelah login berbasis sandi berhasil.

Jika kedua kondisi terpenuhi, Anda dapat meminta pengelola sandi untuk membuat kunci sandi bagi pengguna dengan memanggil Pembuatan Bersyarat. Setelah berhasil membuat kunci sandi, pengguna akan diberi tahu, bergantung pada pengelola sandi.

Kompatibilitas

Pembuatan Bersyarat didukung oleh Safari di macOS dan iOS, serta Chrome di desktop.

Menerapkan Pembuatan Bersyarat

Pembuatan kunci sandi otomatis didasarkan pada fitur WebAuthn API yang disebut Pembuatan Bersyarat. Ini adalah permintaan create() WebAuthn reguler dengan parameter mediation yang ditetapkan ke "conditional" yang berfungsi mirip dengan isi otomatis kunci sandi untuk permintaan get().

Gunakan Pembuatan Bersyarat setelah pengguna login dengan sandi. Apakah pembuatan berhasil bergantung pada pengelola sandi dan kondisi tertentu yang terpenuhi. Kondisi ini dapat bervariasi menurut pengelola sandi dan dapat berubah dari waktu ke waktu. Misalnya, di Chrome dengan Pengelola Sandi Google (GPM), pengguna harus baru-baru ini login menggunakan sandi tersimpan untuk situs.

Jika berhasil membuat kunci sandi, browser akan menampilkan kredensial kunci publik. Kirim kredensial ini ke backend Anda untuk menyelesaikan pendaftaran dan mengaktifkan autentikasi di masa mendatang.

Deteksi fitur

Anda dapat menentukan apakah Pembuatan Bersyarat tersedia di browser dengan memanggil PublicKeyCredential.getClientCapabilities(). Lihat apakah objek yang ditampilkan berisi true untuk properti conditionalCreate.

if (window.PublicKeyCredential && PublicKeyCredential.getClientCapabilities) {
  const capabilities = await PublicKeyCredential.getClientCapabilities();
  if (capabilities.conditionalCreate) {
    // Conditional create is available
  }
}

Jika getClientCapabilities tidak tersedia, Pembuatan Bersyarat juga tidak tersedia.

Membuat kunci sandi secara kondisional

Untuk melakukan pembuatan kunci sandi otomatis, panggil navigator.credentials.create(), tetapi dengan mediation: "conditional" seperti ini.

const cred = await navigator.credentials.create({
  publicKey: options,
  // Request conditional creation
  mediation: 'conditional'
});

Anda harus menggunakan pembuatan kunci sandi otomatis segera setelah pengguna login untuk memiliki peluang terbaik dalam memenuhi kriteria pengelola sandi untuk pembuatan otomatis.

Anda dapat mengirim kredensial kunci publik yang dihasilkan ke server untuk memverifikasi dan mendaftarkan kunci sandi. Di server, pastikan pengguna login.

Peringatan

Pembuatan Bersyarat itu sendiri tidak sulit diterapkan, tetapi ada beberapa peringatan saat benar-benar mengintegrasikan fitur ini ke dalam sistem yang ada.

Mengabaikan kehadiran pengguna dan verifikasi pengguna di server

Respons pendaftaran menampilkan "Kehadiran Pengguna" dan "Pengguna Diverifikasi" sebagai false, sehingga server harus mengabaikan tanda ini selama verifikasi kredensial.

Membatalkan panggilan WebAuthn yang sedang berlangsung sebelum melakukan pembuatan kunci sandi otomatis

Jika RP mengharapkan pengguna untuk login dengan kunci sandi atau sandi, melakukan pengambilan bersyarat adalah pilihan terbaik. Hal ini dapat menyebabkan panggilan get bersyarat dibatalkan sebelum melakukan pembuatan bersyarat.

Untuk melakukannya, Anda harus menggunakan AbortController dan memanggil .abort().

// To abort a WebAuthn call, instantiate an AbortController.
const controller = new AbortController();

const cred = await navigator.credentials.get({
  publicKey: options,
  signal: controller.signal,
  // Request conditional get
  mediation: 'conditional'
});

// Abort the call
controller.abort();

Mengabaikan pengecualian dengan baik

Saat pembuatan kunci sandi bersyarat dilakukan, ada beberapa kasus yang harus Anda abaikan pengecualiannya:

• InvalidStateError: Kunci sandi sudah ada di penyedia kunci sandi (Jangan lupa untuk menentukan excludeCredentials).
• NotAllowedError: Membuat kunci sandi tidak memenuhi kondisi.
• AbortError: Panggilan WebAuthn dibatalkan.

Menampilkan error dalam kasus ini dapat membingungkan pengguna karena browser menanganinya secara diam-diam: browser hanya menampilkan notifikasi jika berhasil, dan kegagalan tidak memicu pesan yang terlihat.

Sinyal saat pendaftaran kunci sandi gagal

Jika kunci sandi dibuat, tetapi gagal didaftarkan di server, pengguna akan mengalami upaya login yang gagal. Hal ini dapat terjadi jika daftar kunci sandi tidak konsisten antara penyedia kunci sandi dan server.

Untuk menghindari situasi tersebut, gunakan Signal API agar tetap konsisten.

Upgrade dari login tanpa sandi tidak didukung

Pada tahap ini, pembuatan kunci sandi secara bersyarat dibatasi setelah pengguna memasukkan sandi yang valid. Artinya, pendekatan login tanpa sandi seperti link ajaib, verifikasi nomor telepon, atau federasi identitas tidak akan memenuhi kondisi tersebut.

Ringkasan

Pembuatan kunci sandi otomatis dapat mempercepat adopsi kunci sandi di situs Anda, sehingga membantu pengguna situs Anda melakukan transisi dari sandi ke metode autentikasi yang lebih aman.

Untuk mempelajari kunci sandi lebih lanjut, mulai dari Login tanpa sandi dengan kunci sandi.