Deteksi fitur WebAuthn yang lebih sederhana dengan getClientCapabilities()

Eiji Kitamura

Dipublikasikan: 15 Januari 2025

WebAuthn menyediakan kemampuan unik seperti interaksi dengan Bluetooth untuk protokol campuran, komunikasi dengan penyedia kunci sandi, dan menyarankan kunci sandi dalam isi otomatis. Namun, klien dan pengautentikasi yang berbeda menawarkan tingkat dukungan yang bervariasi untuk fitur WebAuthn. Perbedaan ini dapat menyebabkan pengalaman pengguna yang terfragmentasi, dengan 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 yang beradaptasi dengan variasi ini.

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

Kompatibilitas

getClientCapabilities()

getClientCapabilities() adalah WebAuthn API yang memungkinkan pihak tepercaya untuk menentukan kemampuan yang tersedia. Untuk menggunakan API, Anda perlu memanggil PublicKeyCredential.getClientCapabilities(). Promise yang ditampilkan di-resolve ke objek yang berisi kemampuan, yang masing-masing menunjukkan ketersediaannya dengan true atau false. Jika kemampuannya adalah undefined, anggap 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 memberi izin untuk membuatnya.

conditionalGet

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

hybridTransport

Perangkat dapat menggunakan Bluetooth sehingga browser dapat membuat kredensial dan melakukan autentikasi dengan kredensial tersebut di seluruh perangkat menggunakan protokol campuran. Hal ini biasanya berarti browser dapat menampilkan kode QR sehingga pengguna dapat memindainya dan login dengan ponsel yang memiliki kredensial.

passkeyPlatformAuthenticator

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

relatedOrigins

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

signalAllAcceptedCredentials

Browser dapat memberi sinyal kredensial yang tersedia di server ke penyedia kunci sandi, sehingga penyedia kunci sandi dapat membuat daftar kunci sandi tetap konsisten dengan server.

signalCurrentUserDetails

Browser dapat memberi sinyal informasi pengguna seperti nama pengguna dan nama tampilan di server kepada penyedia kunci sandi, sehingga penyedia kunci sandi dapat menjaga informasi kunci sandinya tetap konsisten dengan server.

signalUnknownCredential

Browser dapat memberi sinyal kredensial yang dihapus di server ke penyedia kunci sandi, sehingga penyedia kunci sandi dapat menjaga daftar kunci sandi tetap konsisten dengan server.

userVerifyingPlatformAuthenticator

Browser dapat membuat dan mengautentikasi dengan kredensial di pengautentikasi platform. Hal ini tidak berarti browser mendukung protokol campuran. 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 Login tanpa sandi dengan kunci sandi.