Petunjuk Kredensial Kunci Publik / User-Agent WebAuthn

WebAuthn dan passkey mendapatkan momentum yang kuat dan semakin banyak diadopsi. Selain itu, dari sudut pandang teknis, standar WebAuthn juga berkembang pesat. Petunjuk kredensial kunci publik WebAuthn (juga disebut Petunjuk User-agent) adalah tambahan terbaru pada Web Authentication API, yang bertujuan untuk meningkatkan cara developer mengimplementasikan autentikasi passkey dalam aplikasi mereka.

Dalam artikel ini, kita akan menjawab pertanyaan-pertanyaan berikut:

• Apa itu Petunjuk Kredensial Kunci Publik WebAuthn?
• Mengapa kita memerlukan Petunjuk Kredensial Kunci Publik WebAuthn?
• Bagaimana cara kerja Petunjuk Kredensial Kunci Publik WebAuthn?
• Apa saja batasan dan kasus yang direkomendasikan untuk penggunaan Petunjuk Kredensial Kunci Publik WebAuthn dalam proyek Anda?

Mari kita mulai dengan melihat motivasinya terlebih dahulu.

Saat ini, ada berbagai tempat di mana kita bisa membuat dan menyimpan passkey:

• Pengelola kata sandi pihak ketiga (misalnya, 1Password, Dashlane, Bitwarden, KeePassXC)
• Google Password Manager / Profil Chrome
• iCloud Keychain / Apple Passwords
• Windows Hello
• Smartphone lain (iOS, Android) atau tablet (iPadOS, Android)
• Kunci keamanan perangkat keras (misalnya, YubiKey)

Bagi pengguna, ini bisa menawarkan fleksibilitas dan kebebasan memilih. Namun, beberapa aplikasi dan skenario mengharuskan pembatasan beberapa opsi ini, misalnya jika Anda hanya ingin mengizinkan kunci keamanan perangkat keras karena persyaratan keamanan yang lebih tinggi.

Untuk memengaruhi pembuatan passkey dan penyimpanannya, kita memiliki properti authenticatorAttachment.

Subscribe to our Passkeys Substack for the latest news.

Subscribe

authenticatorAttachment memungkinkan relying party untuk membatasi di mana passkey dapat dibuat.

platform menunjukkan authenticator yang terpasang di perangkat yang menjalankan WebAuthn. WebAuthn berkomunikasi dengannya menggunakan metode transport khusus untuk platform tersebut, seperti API spesifik platform. Kredensial kunci publik yang ditautkan ke authenticator platform disebut kredensial platform. Dari daftar di atas, pengelola kredensial / lokasi berikut dapat menyimpan kredensial platform:

• Pengelola kata sandi pihak ketiga (misalnya, 1Password, Dashlane, Bitwarden, KeePassXC)
• Google Password Manager / Profil Chrome
• iCloud Keychain / Apple Passwords
• Windows Hello

Windows 11 dan Chrome:

macOS 15 (Sequoia) dan Chrome:

Saat mengklik Batal, modal berikut akan muncul:

macOS 15 (Sequoia) dan Safari:

cross-platform menunjukkan authenticator yang berada di luar perangkat yang menjalankan WebAuthn (roaming authenticator) karena dapat digunakan di beberapa perangkat. WebAuthn berinteraksi dengannya menggunakan protokol transport lintas platform seperti Bluetooth atau NFC. Kredensial kunci publik yang terkait dengan roaming authenticator disebut kredensial roaming. Dari daftar di atas, pengelola kredensial / lokasi berikut dapat menyimpan kredensial lintas platform:

• Smartphone lain (iOS, Android) atau tablet (iPadOS, Android)
• Kunci keamanan perangkat keras (misalnya, YubiKey)

Windows 11 dan Chrome:

macOS 15 (Sequoia) dan Chrome:

macOS 15 (Sequoia) dan Safari:

Tidak ditentukan menunjukkan bahwa baik authenticator platform maupun authenticator lintas platform dapat digunakan. Di sini, pengguna dapat memilih di mana mereka ingin menyimpan passkey.

Windows 11 dan Chrome:

macOS 15 (Sequoia) dan Chrome:

macOS 15 (Sequoia) dan Safari:

Saat mengklik Batal, modal berikut akan muncul:

authenticatorAttachment telah digunakan cukup lama. Namun, properti ini juga tidak fleksibel terhadap perkembangan baru seperti Autentikasi Lintas Perangkat (melalui kode QR dan Bluetooth). Di sini, passkey juga disimpan misalnya di Google Password Manager (kredensial platform) tetapi dipicu dengan cross-platform oleh relying party. Selain itu, kontrol dari relying party untuk memengaruhi jenis passkey yang harus digunakan dalam proses login (bukan registrasi) hanya dapat dilakukan dengan memodifikasi nilai transports dari sebuah kredensial.

Di sinilah Petunjuk Kredensial Kunci Publik WebAuthn berperan.

Become part of our Passkeys Community for updates & support.

Join

Petunjuk kredensial kunci publik WebAuthn adalah parameter baru yang diperkenalkan dalam Web Authentication API (secara resmi di WebAuthn Level 3). Petunjuk ini memberikan panduan kepada browser tentang jenis authenticator yang kemungkinan akan digunakan pengguna selama proses autentikasi. Hal ini membantu memberikan pengalaman pengguna yang lebih lancar dan intuitif dengan memfokuskan UI browser pada opsi yang paling relevan.

Tiga Jenis Petunjuk

Petunjuk ini hadir dalam tiga jenis:

1. security-key: Menunjukkan bahwa pengguna diharapkan menggunakan kunci keamanan perangkat keras (misalnya, YubiKey).
2. client-device: Menyarankan bahwa pengguna akan menggunakan authenticator platform yang terpasang pada perangkat klien (seperti Touch ID di macOS, Face ID di iOS, atau Windows Hello di Windows).
3. hybrid: Menyiratkan bahwa pengguna mungkin menggunakan smartphone atau tablet untuk autentikasi lintas perangkat melalui kode QR dan Bluetooth.

Petunjuk ini bukan persyaratan ketat dari relying party, melainkan berfungsi sebagai panduan untuk meningkatkan pengalaman pengguna sebagai petunjuk bagi browser.

Berikut ini, Anda akan melihat tangkapan layar untuk macOS Sequoia (Edge + Chrome) dan Windows 10 (Chrome) dengan authenticatorAttachment tidak ditentukan dan Petunjuk User-agent WebAuthn diatur ke security-key.

Di sini, kita melihat batasan lain, bahwa petunjuk security-key tidak dihormati di Windows 10, setidaknya tidak secara langsung. Alurnya pada dasarnya sama dengan petunjuk client-device.

Saat mengklik Batal, modal berikut akan muncul:

Berikut ini, Anda akan melihat tangkapan layar untuk macOS Sequoia (Edge + Chrome) dan Windows 10 (Chrome) dengan authenticatorAttachment tidak ditentukan dan Petunjuk User-agent WebAuthn diatur ke client-device.

Saat mengklik Batal, modal berikut akan muncul:

Saat mengklik Batal, modal berikut akan muncul:

Saat mengklik Batal, modal berikut akan muncul:

Berikut ini, Anda akan melihat tangkapan layar untuk macOS Sequoia (Edge + Chrome) dan Windows 10 (Chrome) dengan authenticatorAttachment tidak ditentukan dan Petunjuk User-agent WebAuthn diatur ke hybrid.

Dengan diperkenalkannya petunjuk, developer sekarang dapat memberikan serangkaian preferensi dalam urutan prioritas menurun, yang menawarkan lebih banyak fleksibilitas.

Cuplikan kode di bawah ini memberitahu browser bahwa pengguna kemungkinan akan melakukan autentikasi menggunakan kunci keamanan perangkat keras, sehingga UI akan difokuskan sesuai.

Untuk kompatibilitas dengan user agent yang lebih lama, saat petunjuk ini digunakan dalam PublicKeyCredentialCreationOptions, authenticatorAttachment harus diatur ke cross-platform.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: /* your challenge here */,
    hints: ['security-key'],
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

Petunjuk security sangat berharga dalam kasus dengan jaminan keamanan tinggi di mana situs web / relying party hanya ingin mengizinkan kunci keamanan perangkat keras dan mendorong pengguna ke arah ini.

Dalam contoh ini, petunjuk menyarankan bahwa pengguna mungkin akan menggunakan authenticator platform bawaan perangkat saat ini.

Untuk kompatibilitas dengan user agent yang lebih lama, saat petunjuk ini digunakan dalam PublicKeyCredentialCreationOptions, authenticatorAttachment harus diatur ke platform.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: /* your challenge here */,
    residentKey: true,
    hints: ['client-device'],
    authenticatorSelection: {
      authenticatorAttachment: 'platform'
    }
  }
});

Mengatur petunjuk client-device bermanfaat jika ada beberapa passkey yang terkait dengan akun pengguna dan beberapa di antaranya mungkin tersedia di perangkat yang sedang login, sementara yang lain disimpan di perangkat yang berbeda. Jika sistem (passkey intelligence) mendeteksi bahwa pengguna yang mencoba login memiliki kemungkinan besar passkey lokal yang tersedia, maka petunjuk ini dapat diatur dalam PublicKeyCredentialRequestOptions sehingga pengguna tidak perlu melakukan satu klik tambahan untuk memilih passkey yang tepat.

Dalam contoh ini, petunjuk menyarankan bahwa pengguna mungkin akan menggunakan smartphone atau perangkat serupa untuk autentikasi.

Untuk kompatibilitas dengan user agent yang lebih lama, saat petunjuk ini digunakan dalam PublicKeyCredentialCreationOptions, authenticatorAttachment harus diatur ke cross-platform.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: /* your challenge here */,
    residentKey: true,
    hints: ['hybrid'],
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

Petunjuk hybrid dapat membantu jika pengguna memiliki beberapa kunci dan sistem (passkey intelligence) mendeteksi bahwa pada perangkat saat ini, kemungkinan tidak ada passkey lokal yang tersedia. Untuk meningkatkan UX dan menghemat satu klik, Anda dapat mengatur petunjuk User-agent WebAuthn ini dan langsung meminta pengguna untuk melakukan autentikasi lintas perangkat (melalui kode QR dan Bluetooth). Selain itu, jika Anda mencoba membangun sistem passkey mobile-first, maka mengatur petunjuk ini sangat masuk akal.

Untuk mencoba sendiri berbagai opsi, kami merekomendasikan untuk melihat Passkeys Debugger.

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

Try for Free

Sangat penting untuk memahami bagaimana Petunjuk Kredensial Kunci Publik WebAuthn berinteraksi dengan parameter WebAuthn lainnya seperti authenticatorAttachment dan credential transports.

Pertama, penting untuk dicatat bahwa petunjuk ini bukan persyaratan yang ketat. Petunjuk ini tidak mengikat user-agent (browser) tetapi berfungsi sebagai panduan untuk memberikan pengalaman terbaik dengan memanfaatkan informasi kontekstual yang Anda miliki tentang permintaan tersebut. Ini berarti browser dapat memilih untuk mempertimbangkan petunjuk tersebut tetapi tidak diwajibkan untuk mengikutinya secara ketat.

Petunjuk diberikan sebagai sebuah array dalam urutan preferensi menurun. Urutan ini menentukan bagaimana browser harus memprioritaskannya:

• Petunjuk Pertama Diutamakan: Jika dua petunjuk bertentangan, browser akan memberikan prioritas pada yang pertama.
• Petunjuk yang Tumpang Tindih: Jika petunjuk yang lebih spesifik mungkin tidak dikenali oleh semua browser, Anda dapat menyertakan petunjuk yang kurang spesifik setelahnya untuk kompatibilitas yang lebih luas.
• Petunjuk Duplikat: Jika petunjuk yang sama muncul lebih dari sekali, kemunculan berikutnya akan diabaikan.

Contoh:

hints: ['security-key', 'hybrid', 'client-device']

Dalam array ini:

1. Browser pertama-tama memprioritaskan security-key.
2. Jika tidak berlaku, ia akan mempertimbangkan hybrid.
3. Terakhir, ia akan melihat client-device (authenticator platform pada perangkat klien).

Petunjuk dapat bertentangan dengan informasi yang terkandung dalam authenticatorAttachment dan credential transports. Ketika ini terjadi, petunjuk lebih diutamakan. Ini menawarkan lebih banyak fleksibilitas dibandingkan dengan penggunaan authenticatorAttachment yang sebelumnya ketat, yang membatasi authenticator hanya untuk platform atau cross-platform.

Contoh dengan Parameter yang Bertentangan:

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: /* your challenge here */,
    hints: ['hybrid'],
    authenticatorSelection: {
      authenticatorAttachment: 'platform' // Bertentangan dengan petunjuk
    }
  }
});

Dalam kasus ini:

• Petunjuk: Menyarankan preferensi untuk authenticator hybrid.
• authenticatorAttachment: Menentukan platform, yang biasanya membatasi authenticator pada perangkat klien.
• Hasil: Browser memprioritaskan petunjuk di atas authenticatorAttachment, dengan fokus pada opsi hybrid.

Saat ini, petunjuk kredensial kunci publik WebAuthn hanya tersedia di Chrome (sejak versi 128). Sampai sekarang, Edge dan Safari telah mengindikasikan rencana untuk mengintegrasikan fitur ini, sementara Firefox belum mengonfirmasi jadwal rilisnya.

Penting untuk diingat bahwa di Chrome, parameter authenticatorAttachment terus dihormati untuk saat ini. Ini berarti bahwa saat ini authenticatorAttachment adalah faktor penentu, tidak peduli petunjuk mana yang diatur. Namun, kami berharap bahwa di versi Chrome mendatang, petunjuk kredensial kunci publik akan menjadi pendekatan yang lebih disukai dan satu-satunya.

Meskipun versi Chrome terbaru mendukung Petunjuk User-agent WebAuthn, petunjuk ini tidak dihormati oleh Windows 11 dan Windows Hello / Windows Security. Alasan utamanya adalah karena UI dikendalikan oleh sistem operasi (Windows Hello / Windows Security) itu sendiri.

Selain itu, untuk passkey yang disimpan di Google Password Manager dan disinkronkan ke Windows 11, Petunjuk User-agent WebAuthn tidak dihormati, karena autentikasi lokal terakhir di Windows 11 terjadi dengan Windows Hello / Windows Security. Dengan sinkronisasi passkey yang akan datang di Windows 11 melalui akun Microsoft, kami juga mengharapkan perbaikan untuk Windows 11 dan Petunjuk User-agent WebAuthn.

Di Windows 10, Petunjuk User-agent WebAuthn dihormati, karena UI WebAuthn ditangani oleh Chrome dan bukan oleh Windows Hello / Windows Security. Namun selama pengujian kami, kami tidak melihat efek untuk security-key. Ketika petunjuk ini diatur, alurnya terlihat seperti alur untuk client-device.

Petunjuk kredensial kunci publik (user-agent) WebAuthn membawa berbagai manfaat bagi developer dan pengguna. Fitur ini masih baru dan belum diluncurkan ke semua browser dan sistem operasi (per Oktober 2024).

Penting untuk menyadari batasan saat ini yang terutama datang dengan Windows 11. Di Windows 11, UI passkey ditangani oleh Windows Hello (modal keamanan Windows Hello) dan ini saat ini mengesampingkan dukungan Chrome / Edge untuk Petunjuk User-agent WebAuthn. Ini juga berlaku untuk passkey yang disinkronkan dari Google Password Manager ke Windows (di sini, petunjuk juga belum berpengaruh).

Ini berarti petunjuk kredensial kunci publik WebAuthn benar-benar hanya berfungsi di macOS dan Windows 10 (dari sistem operasi desktop utama).

Selain itu, per Oktober 2024, bahkan jika Chrome / Edge digunakan pada sistem operasi ini, jika authenticatorAttachment diatur, maka ini juga akan mengesampingkan Petunjuk User-agent WebAuthn (seperti yang dinyatakan oleh Google).

Dari perspektif kasus penggunaan, kami melihat kasus penggunaan yang direkomendasikan berikut untuk mendapatkan nilai maksimal dari fitur baru ini.

Saat membangun backend dan passkey intelligence Anda, cobalah untuk menyertakan penggunaan petunjuk kredensial kunci publik yang tepat untuk memfasilitasi login dan menghemat klik yang tidak perlu bagi pengguna. Misalnya, jika sistem Anda mendeteksi bahwa pengguna login di perangkat di mana kemungkinan besar passkey lokal tersedia, gunakan petunjuk client-device.

Jika pengguna mengakses situs web dari perangkat baru dan passkey intelligence Anda tahu bahwa passkey mungkin tersedia di perangkat seluler pengguna, atur petunjuk ke hybrid, sehingga pengguna dapat dengan cepat memindai kode QR dan menggunakan passkey hybrid.

Tujuan utamanya di sini adalah untuk memberikan pengalaman pengguna yang lebih mulus dan intuitif. Dengan memandu browser tentang authenticator mana yang kemungkinan akan digunakan, developer dapat mengurangi kebingungan dan gesekan pengguna selama proses login. Alih-alih pengguna dibanjiri dengan opsi autentikasi yang tidak perlu, petunjuk memungkinkan browser untuk fokus pada pilihan yang paling relevan, yang mengarah pada pengalaman yang lebih cepat dan lebih lugas.

Perusahaan dengan jaminan keamanan tinggi atau organisasi pemerintah yang telah menstandarkan penggunaan kunci keamanan perangkat keras untuk autentikasi pengguna akan menemukan petunjuk kredensial passkey sangat berguna. Dengan menggunakan petunjuk security-key, mereka dapat memastikan bahwa browser menampilkan opsi kunci keamanan perangkat keras secara menonjol.

Ini sangat berguna untuk organisasi besar di mana karyawan telah diberikan kunci keamanan perangkat keras dan di mana metode autentikasi lain (seperti authenticator platform) tidak diizinkan. Petunjuk security-key memungkinkan perusahaan untuk mengunci alur autentikasi mereka tanpa membatasi fleksibilitas mereka untuk perbaikan di masa depan.

Petunjuk hybrid bersinar dalam skenario di mana autentikasi lintas perangkat dan pendekatan mobile-first diinginkan atau ketika pengguna sering berpindah antar perangkat atau platform.

Contoh kasus penggunaan ini adalah aplikasi yang menghadap konsumen yang mengantisipasi sebagian besar penggunanya akan menggunakan smartphone mereka untuk autentikasi, baik melalui metode biometrik atau aplikasi authenticator berbasis web (passkey mobile-first). Dengan menentukan hybrid sebagai petunjuk, developer memastikan bahwa UI browser mendorong penggunaan smartphone, meningkatkan kenyamanan dan aksesibilitas.

Petunjuk kredensial kunci publik WebAuthn menawarkan cara yang fleksibel untuk meningkatkan pengalaman pengguna selama autentikasi passkey. Mari kita tinjau kembali pertanyaan-pertanyaan dari pendahuluan dengan wawasan yang telah kita kumpulkan:

1. Apa itu Petunjuk Kredensial Kunci Publik WebAuthn?

   Mereka adalah saran opsional yang diberikan oleh situs web / aplikasi untuk memandu klien tentang metode autentikasi yang paling mungkin digunakan pengguna – apakah itu kunci keamanan perangkat keras, authenticator platform, atau solusi hybrid seperti autentikasi lintas perangkat.

2. Mengapa kita memerlukan Petunjuk Kredensial Kunci Publik WebAuthn?

   Mereka menyederhanakan proses autentikasi dengan mempersempit opsi yang disajikan kepada pengguna, mengurangi gesekan / klik yang tidak perlu, dan meningkatkan pengalaman secara keseluruhan.

3. Bagaimana cara kerja Petunjuk Kredensial Kunci Publik WebAuthn?

   Developer menentukan petunjuk seperti security-key, client-device, atau hybrid berdasarkan konteks, memungkinkan browser untuk memprioritaskan metode autentikasi yang relevan bagi pengguna. Meskipun petunjuk ini bukan persyaratan yang ketat, mereka membantu mengoptimalkan alur UI selama autentikasi.

4. Apa saja batasan dan kasus penggunaan yang direkomendasikan?

   Saat ini, dukungan penuh untuk petunjuk ini terbatas pada Chrome dan Edge, dengan browser dan sistem operasi lain seperti Windows 11 menunjukkan tingkat kompatibilitas yang bervariasi. Kasus penggunaan yang paling efektif termasuk meningkatkan UX login, memberlakukan penggunaan kunci keamanan perangkat keras di lingkungan keamanan tinggi, dan memungkinkan autentikasi lintas perangkat dalam aplikasi mobile-first.

Sebagai kesimpulan, Petunjuk Kredensial Kunci Publik WebAuthn memungkinkan developer untuk menciptakan proses autentikasi yang lebih intuitif dan ramah pengguna dengan memandu browser ke opsi yang paling sesuai untuk setiap skenario pengguna. Meskipun masih berkembang, fitur ini dapat secara signifikan meningkatkan keamanan dan pengalaman pengguna dalam implementasi passkey.