Deteksi fitur WebAuthn yang lebih sederhana dengan getClientCapabilities()

Eiji Kitamura

Dipublikasikan: 15 Januari 2025

WebAuthn menyediakan kemampuan unik seperti interaksi dengan Bluetooth untuk protokol hibrida, komunikasi dengan penyedia kunci sandi, dan menyarankan kunci sandi dalam isi otomatis. Namun, klien dan pengautentikasi yang berbeda menawarkan tingkat dukungan yang berbeda untuk fitur WebAuthn. Perbedaan ini dapat menyebabkan pengalaman pengguna yang terfragmentasi, di mana beberapa pengguna mungkin mengalami error atau tidak dapat menggunakan opsi autentikasi tertentu. Dengan menyediakan cara bagi developer untuk menentukan kemampuan klien, mereka dapat membuat alur autentikasi yang lebih andal dan beradaptasi dengan variasi ini.

Metode PublicKeyCredential.getClientCapabilities() memungkinkan pihak tepercaya untuk menentukan fitur WebAuthn mana yang didukung oleh browser. Metode ini menampilkan promise yang di-resolve ke daftar kemampuan yang didukung, sehingga developer dapat menyesuaikan pengalaman dan alur kerja autentikasi berdasarkan kemampuan spesifik klien.

Kompatibilitas

getClientCapabilities()

getClientCapabilities() adalah WebAuthn API yang memungkinkan pihak tepercaya menentukan kemampuan yang tersedia. Untuk menggunakan API, Anda perlu memanggil PublicKeyCredential.getClientCapabilities(). Promise yang ditampilkan diselesaikan ke objek yang berisi kemampuan, yang masing-masing menunjukkan ketersediaannya dengan true atau false. Jika kemampuan undefined, pertimbangkan ketersediaannya tidak diketahui.

if (window.PublicKeyCredential &&
  if (PublicKeyCredential.getClientCapabilities) {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.conditionalGet === true &&
        capabilities.passkeyPlatformAuthenticator === true) {
      // The browser supports passkeys and the conditional mediation.
    }
  }
}

conditionalCreate

Browser dapat membuat kredensial tanpa UI modal yang jelas jika pengguna telah menyetujui untuk membuatnya.

conditionalGet

Browser dapat melakukan autentikasi dengan menampilkan kunci sandi sebagai bagian dari dialog isi otomatis, bukan UI modal yang jelas. Nilai setara yang ada adalah PublicKeyCredential.isConditionalMediationAvailable().

hybridTransport

Perangkat dapat menggunakan Bluetooth sehingga browser dapat membuat kredensial dan mengautentikasi dengannya di seluruh perangkat menggunakan protokol hybrid. Biasanya, hal ini berarti browser dapat menampilkan kode QR sehingga pengguna dapat memindainya dan login dengan ponsel yang memiliki kredensial di dalamnya.

passkeyPlatformAuthenticator

Browser dapat membuat kredensial dan mengautentikasi dengannya melalui pengautentikasi platform verifikasi pengguna atau perangkat lain yang mendukungnya melalui protokol hibrida. Setara dengan hybridTransport || userVerifyingPlatformAuthenticator.

relatedOrigins

Browser dapat membuat kredensial dan melakukan autentikasi dengannya yang tidak cocok dengan ID RP, selama kredensial tersebut ditentukan dalam file asal terkait.

signalAllAcceptedCredentials

Browser dapat memberikan sinyal kredensial yang tersedia di server ke penyedia kunci sandi, sehingga penyedia kunci sandi dapat menjaga konsistensi daftar kunci sandi dengan server.

signalCurrentUserDetails

Browser dapat mengirimkan sinyal informasi pengguna seperti nama pengguna dan nama tampilan di server ke penyedia kunci sandi, sehingga penyedia kunci sandi dapat menjaga konsistensi informasi kunci sandi mereka dengan server.

signalUnknownCredential

Browser dapat memberikan sinyal kredensial yang dihapus di server ke penyedia kunci sandi, sehingga penyedia kunci sandi dapat menjaga konsistensi daftar kunci sandi dengan server.

userVerifyingPlatformAuthenticator

Browser dapat membuat dan melakukan autentikasi dengan kredensial di autentikator platform. Hal ini tidak berarti browser mendukung protokol hybrid. Nilai setara yang ada adalah PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable().

ekstensi

RP juga dapat menentukan ekstensi yang tersedia dengan getClientCapabilities().

if (capabilities['extension:appid'] === true) {
  // appId extension is supported
}

ID diawali dengan extension:, diikuti dengan nama ekstensi. Lihat ID Ekstensi WebAuthn yang ditentukan di IANA untuk nama ekstensi.

Pelajari lebih lanjut

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