Kapabilitas Client WebAuthn

WebAuthn adalah standar modern di balik passkey. Alih-alih mengandalkan kata sandi tradisional, WebAuthn memanfaatkan kriptografi kunci publik, yang memungkinkan pengguna untuk melakukan autentikasi dengan passkey. Passkey ini bisa berupa biometrik (seperti sidik jari atau pengenalan wajah) atau kunci keamanan fisik. Perubahan ini tidak hanya meningkatkan keamanan, tetapi juga menyempurnakan pengalaman pengguna dengan menghilangkan kebutuhan untuk mengelola kata sandi.

Standar WebAuthn Level 3 memperkenalkan kapabilitas client baru (yang dapat diambil melalui API browser getClientCapabilities()), yang bertujuan untuk memberikan developer dan platform lebih banyak kontrol dan fleksibilitas saat mengimplementasikan passkey. Pembaruan ini membawa peningkatan yang menyederhanakan proses integrasi passkey di berbagai perangkat, browser, dan platform, memastikan perjalanan pengguna yang lebih lancar dan konsisten.

Dalam postingan blog ini, kita akan menjawab pertanyaan-pertanyaan berikut:

1. Apa itu kapabilitas client WebAuthn?
2. Kapabilitas client WebAuthn apa saja yang ada?
3. Bagaimana kapabilitas client WebAuthn meningkatkan implementasi passkey?
4. Mengapa kapabilitas client WebAuthn penting bagi developer dan manajer produk?

Di akhir artikel, kita akan memahami bagaimana fitur-fitur ini dapat membantu menciptakan alur autentikasi yang lancar dan aman, sejalan dengan ekspektasi pengguna modern.

Kapabilitas client WebAuthn adalah serangkaian fitur yang memungkinkan browser dan platform untuk mengomunikasikan jenis fungsionalitas WebAuthn apa yang mereka dukung. Sederhananya, kapabilitas ini berfungsi seperti 'daftar periksa fitur' yang memberi tahu situs web metode autentikasi dan pengaturan apa saja yang tersedia di perangkat pengguna. Hal ini memungkinkan developer untuk menyesuaikan alur autentikasi berdasarkan kapabilitas client, sehingga memastikan pengalaman pengguna yang lebih lancar dan aman.

Misalnya, jika sebuah browser memberi sinyal bahwa ia mendukung autentikasi biometrik, developer dapat merancang alur login mereka untuk menawarkan opsi masuk dengan sidik jari kepada pengguna. Sebaliknya, jika browser tidak mendukung fitur tertentu, developer dapat menyediakan opsi cadangan, seperti kata sandi atau OTP SMS.

Standar WebAuthn Level 3 memperkenalkan beberapa kapabilitas client baru yang membuat implementasi passkey lebih serbaguna dan ramah pengguna. Dukungan pertama untuk panggilan API getClientCapabilities() diperkenalkan di Safari 17.4.

Untuk mendeteksi dukungan di browser, cuplikan berikut bisa berguna:

// Check if PublicKeyCredential is supported in the current browser
if (typeof PublicKeyCredential === "undefined") {
    console.log("PublicKeyCredential is not supported in this browser.");
}
 
// Check if getClientCapabilities method exists on PublicKeyCredential
if (typeof PublicKeyCredential.getClientCapabilities === "function") {
    try {
        let capabilities = await PublicKeyCredential.getClientCapabilities();
        console.log(capabilities);
    } catch (error) {
        console.error("Error getting client capabilities:", error);
    }
} else {
    console.log("getClientCapabilities is not supported in this browser");
}

getClientCapabilities() memungkinkan situs web dan aplikasi untuk menanyakan client (misalnya, browser atau perangkat) untuk menentukan fitur WebAuthn mana yang didukungnya. Dengan memahami kapabilitas client, developer dapat mengoptimalkan alur autentikasi untuk memanfaatkan fitur yang tersedia, seperti autentikasi biometrik, dan menyediakan metode alternatif jika kapabilitas tertentu tidak ada.

Subscribe to our Passkeys Substack for the latest news.

Subscribe

Berikut adalah penjelasan lebih mendalam tentang kapabilitas client WebAuthn dan dampaknya terhadap integrasi passkey:

conditionalCreate memungkinkan pembuatan passkey otomatis berdasarkan kondisi tertentu. Sebuah aplikasi mungkin menggunakan kapabilitas ini untuk secara otomatis membuat passkey selama proses isi otomatis kata sandi jika pengelola kata sandi memiliki dukungan yang sesuai. Fitur ini membantu meningkatkan adopsi passkey dan penggunaan selanjutnya dengan secara otomatis mentransisikan pengguna dari kata sandi ke passkey.

Mirip dengan conditionalCreate, conditionalGet memicu login passkey secara otomatis. Ini berguna dalam skenario di mana UX passkey terbaik harus diaktifkan, membuat proses login tidak hanya tanpa kata sandi tetapi juga tanpa nama pengguna (pengguna hanya perlu mengklik passkey yang dipilih di modal / dropdown dan dapat melakukan autentikasi). Dengan menggunakan kapabilitas ini, developer dapat memastikan autentikasi passkey hanya terjadi saat diperlukan, meminimalkan permintaan yang tidak perlu dan meningkatkan pengalaman pengguna.

hybridTransport memastikan passkey dapat digunakan di berbagai perangkat, memungkinkan autentikasi lintas perangkat yang lancar (melalui kode QR dan Bluetooth). Misalnya, seorang pengguna dapat menggunakan passkey yang tersimpan di smartphone mereka untuk masuk ke layanan di desktop mereka. Kapabilitas ini memungkinkan pengguna untuk melakukan autentikasi dengan aman tanpa perlu mentransfer passkey secara manual atau mengandalkan metode login konvensional untuk setiap perangkat, menciptakan pengalaman autentikasi yang terpadu.

Autentikator platform, seperti Windows Hello, Face ID, atau Touch ID, terpasang langsung di perangkat dan menawarkan pengalaman passkey yang lebih cepat, lancar, dan aman dengan memungkinkan pengguna untuk melakukan autentikasi dengan biometrik atau metode asli perangkat lainnya (misalnya pola PIN).

Become part of our Passkeys Community for updates & support.

Join

userVerifyingPlatformAuthenticator memastikan bahwa autentikasi passkey melibatkan verifikasi pengguna, seperti pemindaian sidik jari aktif atau pengenalan wajah, yang memberikan lapisan keamanan ekstra.

Kapabilitas relatedOrigins memungkinkan autentikasi yang lancar di berbagai domain yang dimiliki oleh organisasi yang sama (misalnya, amazon.com dan amazon.de). Misalnya, jika sebuah perusahaan mengelola beberapa domain atau memiliki subdomain yang berbeda, pengguna dapat masuk sekali dan mengakses semua properti tanpa perlu melakukan autentikasi ulang di setiap properti. Kapabilitas ini menyederhanakan pengalaman pengguna, mengurangi friksi, dan sangat berharga bagi perusahaan di lingkungan internasional atau dengan platform multi-layanan.

Metode signalAllAcceptedCredentials(options) menyediakan daftar lengkap ID kredensial WebAuthn untuk pengguna tertentu. Relying Party WebAuthn sebaiknya menggunakan metode ini daripada signalUnknownCredential() saat pengguna sudah terautentikasi, karena tidak ada risiko kebocoran privasi. Metode ini menawarkan gambaran komprehensif tentang kredensial kunci publik pengguna, termasuk perubahan terbaru yang mungkin belum diperbarui pada autentikator yang sedang terhubung.

Mari kita lihat sebuah contoh. Seorang pengguna (userId: A) memiliki 2 passkey dengan ID Kredensial yang di-encode Base64URL menjadi X dan Y. Kemudian, pengguna menghapus passkey X di pengaturan akun layanan web (example.com) (sehingga kunci publiknya dihapus). Sekarang, jalankan cuplikan berikut:

PublicKeyCredential.signalAllAcceptedCredentials({
    rpId: "example.com",
    userId: "A", // WebAuthn User Handle, Base64URL.
    allAcceptedCredentialIds: ["Y"],
});

Jika autentikator tersedia pada saat kode di atas dieksekusi, maka autentikator akan menghapus atau menyembunyikan passkey X dari seremoni autentikasi di masa mendatang. Namun, autentikator mungkin tidak terpasang pada saat eksekusi, jadi disarankan agar relying party secara berkala menjalankan kode ini, misalnya, pada setiap kali sign in.

Passkey yang tidak ada dalam allAcceptedCredentialIds akan dihapus atau disembunyikan, yang berpotensi tidak dapat diurungkan. Jadi, penting bagi relying party untuk memperhatikan agar ID kredensial WebAuthn yang valid tidak pernah dihapus dari daftar. Jika ID kredensial yang valid tidak sengaja terhapus, maka relying party harus segera memasukkannya kembali dalam panggilan signalAllAcceptedCredentials(options) lain sesegera mungkin untuk "memunculkan kembali" passkey tersebut. Jika passkey tidak disembunyikan tetapi dihapus, maka tidak banyak yang bisa dilakukan untuk memperbaikinya.

Want to experiment with passkey flows? Try our Passkeys Debugger.

Try for Free

Metode signalCurrentUserDetails(options) memberi sinyal nama pengguna saat ini dan Nama Tampilan WebAuthn. Ketika signalCurrentUserDetails(options) dipanggil, client mengikuti serangkaian langkah yang ditentukan untuk menjalankan tindakan ini.

Mari kita lihat sebuah contoh. Seorang pengguna dengan ID Pengguna WebAuthn A memperbarui namanya di pengaturan akun sebuah situs web (example.com). Kemudian, relying party dapat menjalankan kode berikut:

PublicKeyCredential.signalCurrentUserDetails({
    rpId: "example.com",
    userId: "A", // user ID, Base64URL.
    name: "New user name",
    displayName: "New display name",
});

Autentikator kemudian akan memperbarui metadata passkey yang tersimpan secara lokal. Manfaat besarnya adalah bahwa dalam permintaan UI Kondisional / isi otomatis passkey di masa mendatang, menu pilihan / dropdown UI Kondisional akan menampilkan nama dan Nama Tampilan WebAuthn yang telah diperbarui.

Metode signalUnknownCredential(options) memberi sinyal bahwa ID Kredensial WebAuthn tidak dikenali oleh Relying Party WebAuthn, misalnya, jika passkey telah dihapus oleh pengguna. Berbeda dengan signalAllAcceptedCredentials(options), metode ini tidak memerlukan penyediaan daftar lengkap ID kredensial yang diterima dan User Handle WebAuthn, sehingga mencegah potensi kebocoran privasi ke pemanggil yang tidak terautentikasi.

Mari kita lihat sebuah contoh. Seorang pengguna menghapus passkey dengan ID kredensial X di pengaturan akun sebuah situs web (example.com) (sehingga kunci publiknya dihapus). Namun, kunci privatnya masih tersedia di perangkat pengguna. Ini berarti bahwa dalam permintaan login UI Kondisional / isi otomatis passkey di masa mendatang (dengan daftar allowCredentials yang kosong), passkey tersebut masih dapat dipilih. Upaya login akan gagal, karena kunci publik sudah dihapus, jadi relying party harus menjalankan:

PublicKeyCredential.signalUnknownCredential({
    rpId: "example.com",
    credentialId: "X", // credential ID the user just tried, Base64URL
});

Autentikator kemudian akan menghapus atau menyembunyikan passkey dengan ID kredensial X dari seremoni autentikasi di masa mendatang.

Karena standar WebAuthn Level 3 masih dalam status draf, adopsi kapabilitas client baru ini belum sepenuhnya meluas. Berbagai browser secara bertahap telah mengimplementasikan fitur-fitur ini, tetapi dukungannya bervariasi. Di bawah ini adalah gambaran terbaru tentang ketersediaan di browser-browser utama yang disebutkan di atas:

Laju adopsi kemungkinan akan meningkat seiring dengan matangnya Level 3 dan semakin banyaknya browser yang merilis fitur-fitur ini. Jika ingin melihat berapa banyak pengguna yang dapat memanfaatkan getClientCapabilities() saat ini, kita bisa memeriksa data dunia nyata menggunakan Passkeys Analyzer gratis. Pantau terus catatan rilis browser dan dokumentasi terkait untuk merencanakan kompatibilitas yang lebih luas seiring perkembangannya.

Are your users passkey-ready?

Test Passkey-Readiness

Sebagai developer, kita mungkin bertanya-tanya apa arti deteksi kapabilitas client WebAuthn yang baru ini dan bagaimana cara menggunakannya di aplikasi kita. Berikut ini adalah rekomendasi untuk menggunakannya.

Namun, perlu diingat bahwa belum semua browser mendukung panggilan API getClientCapabilities() (per November 2024). Tersedia polyfill di sini, yang dapat digunakan sampai semua browser mengejar ketertinggalan.

Gunakan getClientCapabilities() di awal kode untuk mendeteksi fitur yang didukung client pada saat halaman dimuat / alur autentikasi dimulai. Ini akan memungkinkan kita untuk menyesuaikan pengalaman secara dinamis, dan menyediakan fitur passkey yang berfungsi di perangkat / browser, misalnya mendorong autentikasi platform jika didukung atau menawarkan metode alternatif (misalnya, OTP SMS atau kunci keamanan perangkat keras) jika tidak.

Jika kita menambahkan passkey ke situs web / aplikasi yang saat ini menggunakan kata sandi, fitur conditionalCreate bisa menjadi pendorong nyata untuk adopsi passkey kita. Di latar belakang, selama proses isi otomatis kata sandi dengan pengelola kredensial yang sesuai (hanya Apple Passwords per Oktober 2024), sebuah passkey akan dibuat secara otomatis dan akan lebih diutamakan dalam proses isi otomatis di masa mendatang.

Agar tidak hanya memiliki adopsi passkey yang tinggi, tetapi juga penggunaan login passkey yang tinggi, coba periksa apakah perangkat / browser dapat menggunakan UI Kondisional / Isi Otomatis Passkey dengan memeriksa conditionalGet. Dengan cara ini, kita akan mendorong pengguna untuk menggunakan passkey yang telah dibuat untuk login, karena secara proaktif disarankan oleh sistem operasi / browser dan memerlukan lebih sedikit usaha daripada mengisi otomatis kata sandi.

Manfaatkan hybridTransport untuk mengaktifkan autentikasi lintas perangkat (melalui kode QR dan Bluetooth), yang memungkinkan pengguna untuk login dengan lancar dari smartphone mereka, bahkan jika mereka mengakses layanan Anda di desktop.

Kapabilitas client WebAuthn merupakan langkah maju yang signifikan dalam mengatasi kesenjangan passkey yang ada saat ini. Dalam postingan blog ini, kita telah membahas pertanyaan-pertanyaan kunci tentang kapabilitas client WebAuthn:

1. Apa itu kapabilitas client WebAuthn? Kita telah menjelaskan bagaimana fitur-fitur ini memungkinkan browser dan platform untuk memberi sinyal dukungan mereka terhadap fungsionalitas tertentu, memberikan developer lebih banyak kontrol atas alur autentikasi.
2. Kapabilitas client WebAuthn apa saja yang ada? Kita telah memberikan gambaran umum tentang kapabilitas baru yang diperkenalkan dalam standar Level 3, termasuk getClientCapabilities, conditionalCreate, hybridTransport, dan lainnya.
3. Bagaimana kapabilitas client WebAuthn meningkatkan implementasi passkey? Kita telah membahas bagaimana kapabilitas ini menyederhanakan integrasi, meningkatkan penggunaan lintas perangkat, dan meningkatkan keamanan.
4. Mengapa kapabilitas client WebAuthn penting bagi developer? Fitur-fitur ini membantu menciptakan pengalaman autentikasi yang lancar dan aman yang sejalan dengan ekspektasi pengguna modern, membuat implementasi lebih mudah dan lebih efektif.

Kami mendorong Anda untuk menjelajahi fitur-fitur baru WebAuthn Level 3 dan tetap mengikuti perkembangannya di berbagai browser. Jika Anda ingin mengimplementasikan passkey dan memanfaatkan kapabilitas canggih ini, hubungi kami untuk mendapatkan panduan dan dukungan ahli.