Uji coba origin: Mediasi langsung WebAuthn untuk login yang lancar

José Luis Zapata

Dipublikasikan: 19 Agustus 2025

Mediasi langsung WebAuthn adalah kemampuan web baru yang dirancang untuk menyederhanakan alur login pengguna. Uji coba origin ini memberikan ringkasan fitur, manfaat, dan detail implementasinya, serta mengundang Anda untuk berpartisipasi dan membantu membentuk masa depan autentikasi web.

Latar belakang

Autentikasi di web sering kali menimbulkan hambatan, sehingga mempersulit login pengguna. Alur WebAuthn yang ada, meskipun canggih, mengalami masalah dengan tombol "Login", terutama saat kredensial tidak langsung tersedia, sehingga menyebabkan penggantian formulir standar.

Fitur baru ini memperkenalkan alur login tanpa hambatan, mirip dengan API preferImmediatelyAvailableCredentials di perangkat seluler. Fitur ini menyederhanakan proses login, sering kali sebelum formulir login standar, dengan mengurangi hambatan dan meningkatkan pengalaman pengguna.

Cara kerjanya

Mediasi langsung WebAuthn memungkinkan pengalaman login yang lebih langsung dan efisien. API ini memungkinkan browser langsung menawarkan kredensial yang tersedia, atau langsung menandakan ketiadaannya tanpa meminta autentikasi lintas perangkat atau kunci keamanan, sehingga menyederhanakan penerapan bagi developer.

Jenis mediasi immediate

Kami memperkenalkan jenis mediasi immediate untuk permintaan navigator.credentials.get(). Jika opsi ini disetel, promise akan ditolak dengan NotAllowedError jika tidak ada kredensial yang tersedia secara lokal. Jika kredensial ada, browser akan menangani proses autentikasi seperti biasa.

Fleksibilitas ini memungkinkan situs menyesuaikan alur loginnya, dengan memberikan metode alternatif yang tepat saat kredensial langsung tidak tersedia.

Yang penting, browser masih dapat menampilkan NotAllowedError untuk menjaga privasi dan keamanan pengguna, sehingga mencegah masalah seperti pembuatan sidik jari atau pelacakan.

Deteksi fitur

Anda dapat mendeteksi apakah mediasi langsung tersedia menggunakan PublicKeyCredential.getClientCapabilities(). Developer dapat memeriksa kemampuan immediateGet pada objek capabilities yang ditampilkan.

async function checkImmediateMediationAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet && window.PasswordCredential) {
      console.log("Immediate Mediation with passwords supported.");
    } else if (capabilities.immediateGet) {
      console.log("Immediate Mediation without passwords supported.");
    } else { console.log("Immediate Mediation unsupported."); }
  } catch (error) {
    console.error("Error getting client capabilities:", error);
  }
}

Catatan: Untuk membantu dukungan browser yang lebih luas, polyfill untuk getClientCapabilities() tersedia dari repositori WebAuthn Polyfills GitHub.

Contoh penerapan

Untuk menggunakan API, panggil navigator.credentials.get() dengan mediation: 'immediate'. Sebaiknya sertakan password: true dalam permintaan, karena sebagian besar pengguna saat ini kemungkinan memiliki sandi tersimpan dan dapat langsung memperoleh manfaat dari pengalaman ini.

button.addEventListener('click', async (event) => {
  event.preventDefault();
  event.stopPropagation();
  const cred = await navigator.credentials.get({
    password: true,
    publicKey: {
      challenge, // Your server-generated challenge
      rpId: 'example.com' // Your Relying Party ID
    },
    mediation: 'immediate',
  });
});

Developer harus menangani NotAllowedError di blok catch untuk memberikan pengalaman login penggantian yang lancar.

Alur langkah demi langkah untuk mediasi langsung

Mediasi langsung WebAuthn mendukung dua kasus penggunaan utama untuk menyederhanakan login pengguna: mengaktifkan tombol "Login dengan kunci sandi" khusus yang menyembunyikan opsi penggantian yang tidak diinginkan, dan memfasilitasi alur login dinamis yang menawarkan kredensial secara proaktif sebelum tindakan penting pengguna.

Kasus penggunaan 1: Login eksplisit dengan tombol login

Skenario ini berfokus pada penyediaan tombol login khusus, yang memastikan pengalaman pengguna yang lancar tanpa perintah yang tidak terduga atau harus membuka halaman login.

1. Pengguna memulai login: Pengguna mengklik tombol "Login". Pihak yang mengandalkan kemudian memanggil navigator.credentials.get() dengan mediation: "immediate".
2. Browser meminta pemilihan kredensial (jika tersedia): Browser memeriksa kunci sandi yang tersedia secara lokal atau sandi yang diminta. Jika menemukan akun, aplikasi akan segera menampilkan UI modal agar pengguna dapat memilih akun. Akun diurutkan berdasarkan stempel waktu terakhir digunakan, lalu menurut abjad. Catatan: Jika sandi dan kunci sandi dari beberapa pengelola sandi ditemukan untuk akun yang sama, browser akan memprioritaskan kunci sandi. Jika ada beberapa kunci sandi untuk akun yang sama dari penyedia yang berbeda, kunci sandi yang terakhir digunakan akan diprioritaskan.
3. Login berhasil: Pengguna memilih kunci sandi dari UI browser. Jika browser memerlukan verifikasi, browser akan meminta pengguna untuk memverifikasi identitas mereka menggunakan metode yang telah disiapkan sebelumnya (seperti PIN, input biometrik, atau pola). Login berhasil diselesaikan.
4. Jalur penggantian: tidak ada kunci sandi atau penolakan pengguna: Jika tidak ada kunci sandi lokal atau sandi yang diminta tersedia untuk situs, atau jika pengguna menutup UI browser, browser akan menampilkan NotAllowedError ke pihak tepercaya, dan browser tidak akan menampilkan UI apa pun untuk opsi kunci keamanan atau lintas perangkat. Pihak tepercaya kemudian dapat melanjutkan dengan halaman login standarnya atau menawarkan mekanisme autentikasi alternatif.

Kasus penggunaan 2: Alur login implisit sebelum tindakan pengguna

Skenario ini memungkinkan pengalaman login proaktif, yang menawarkan kunci sandi dan sandi sebelum pengguna melakukan tindakan yang memerlukan status terautentikasi, seperti checkout.

1. Pengguna memulai tindakan yang memerlukan login: Pengguna mengklik tombol untuk tindakan yang mengharuskan mereka login (misalnya, tombol "Checkout"). Pihak tepercaya kemudian memanggil navigator.credentials.get() dengan mediation: "immediate".

2. Dialog browser untuk pemilihan kredensial (jika tersedia): Browser memeriksa kunci sandi atau sandi yang tersedia secara lokal. Jika menemukannya, browser akan langsung menampilkan UI modal agar pengguna dapat memilih akun. Akun diurutkan berdasarkan stempel waktu terakhir kali digunakan, lalu menurut abjad, dan dihapus duplikatnya untuk menampilkan satu entri per akun. Catatan: Jika sandi dan kunci sandi dari beberapa pengelola sandi ditemukan untuk akun yang sama, browser akan memprioritaskan kunci sandi. Jika ada beberapa kunci sandi untuk akun yang sama dari penyedia yang berbeda, kunci sandi yang terakhir digunakan akan diprioritaskan.

3. Login berhasil: Pengguna memilih kredensial dari UI browser. Jika browser memerlukan verifikasi, browser akan meminta pengguna untuk memverifikasi identitas mereka menggunakan metode yang sebelumnya telah disiapkan (seperti PIN, input biometrik, atau pola). Login berhasil diselesaikan.

4. Jalur penggantian: tidak ada kredensial atau penolakan pengguna: Jika tidak ada kredensial lokal yang tersedia untuk situs, atau jika pengguna menutup UI browser, browser akan menampilkan NotAllowedError ke pihak tepercaya, dan browser tidak akan menampilkan UI apa pun. Pengalaman login pengguna tetap tidak berubah mulai hari ini. Pihak tepercaya kemudian dapat meminta detail lebih lanjut kepada pengguna (misalnya, alamat email) atau menampilkan mekanisme autentikasi alternatif seperti formulir sandi, verifikasi SMS, atau permintaan modal WebAuthn yang mendukung autentikator lintas perangkat.

Manfaat

Mediasi langsung WebAuthn menawarkan beberapa keuntungan utama bagi developer dan pengguna:

• Login tanpa hambatan: Fitur ini memberikan pengalaman login yang lebih lancar dan tanpa hambatan bagi pengguna yang memiliki kunci sandi atau sandi yang langsung tersedia dan disimpan di browser atau pengelola sandi mereka.
• Login cerdas: API mengaktifkan alur login saat pengguna ingin melakukan aktivitas yang mengharuskan mereka login. Tombol ini beradaptasi secara cerdas dengan status kredensial pengguna. Fitur ini menawarkan autentikasi langsung jika memungkinkan, sehingga menghindari pengalihan yang tidak perlu dan menyederhanakan alur.
• Pengelolaan kredensial yang ditingkatkan: Jika beberapa pengelola sandi menawarkan kredensial untuk akun yang sama, browser akan memilih opsi yang paling tepat secara cerdas, sehingga menyederhanakan pengelolaan kredensial bagi pengguna.
• Mengurangi kebingungan pengguna: Dengan menampilkan kredensial yang diketahui secara langsung, fitur ini meminimalkan kebingungan pengguna yang sering dikaitkan dengan beberapa opsi login atau formulir standar.
• Penggantian yang lancar: Fitur ini memastikan penggantian yang lancar ke halaman login standar bagi pengguna tanpa kredensial langsung, yang berarti pengalaman mereka tetap tidak berubah dari alur saat ini.

Privasi dan keamanan

Mediasi langsung WebAuthn memungkinkan situs mengidentifikasi keberadaan kredensial yang tersedia langsung sebelum pengguna secara eksplisit mengizinkan upaya login. Untuk melindungi privasi pengguna dan mencegah potensi penyalahgunaan, kami menerapkan beberapa tindakan penting:

• Persyaratan gestur pengguna: Panggilan API memerlukan gestur pengguna (aktivasi pengguna sementara). Hal ini membuat probing dan pembuatan sidik jari secara diam-diam menjadi sulit dilakukan oleh situs.
• Sesi samaran dan pribadi: Dalam sesi samaran atau pribadi, setiap permintaan mediasi langsung akan memunculkan NotAllowedError.
• Batasan pada daftar allowCredentials: Permintaan menggunakan daftar allowCredentials akan menampilkan NotAllowedError. Tindakan ini mencegah situs menyimpulkan histori interaksi pengguna atau melacak pengguna di seluruh sesi.
• Pembatalan: Menetapkan parameter signal pada permintaan dengan mediasi langsung tidak valid. Hal ini mencegah situs menutup UI browser secara terprogram.

Cobalah

Sebaiknya Anda bereksperimen dengan mediasi langsung WebAuthn.

Status di Chrome

Fitur ini sedang dalam siklus pengembangan Chromium:

• Desktop: Uji Coba Dev di Chrome 136, dengan Uji Coba Origin dari Chrome 139 hingga 141.
• Android: Uji Coba Developer di Chrome 140.

Untuk pengujian lokal

Untuk menguji mediasi langsung WebAuthn secara lokal:

1. Download Chrome 139: Dapatkan dan buka Chrome versi terbaru di desktop Anda.
2. Aktifkan tanda Mediasi Langsung: Buka chrome://flags/#web-authentication-immediate-get di kolom URL dan aktifkan tanda "Web Authentication Immediate Get".
3. Siapkan kredensial: Pastikan Anda telah menyimpan kunci sandi dan sandi yang dapat digunakan:
   • Sandi yang disimpan di Pengelola Sandi Google.
   • Kunci sandi yang disimpan di Pengelola Sandi Google (memerlukan login dan menyinkronkan Chrome dengan Akun Google), Windows Hello, atau iCloud Keychain.

Untuk pengujian publik (uji coba origin)

Untuk menguji mediasi langsung WebAuthn dengan uji coba origin di lingkungan publik:

1. Daftar: Buka halaman Uji Coba Origin Chrome dan daftar untuk uji coba "Mediasi langsung WebAuthn".
2. Menambahkan token ke header HTTP: Sertakan token uji coba origin yang diberikan di header HTTP situs Anda: HTML Origin-Trial: [YOUR_TRIAL_TOKEN]

Catatan: Anda juga dapat memberikan token secara terprogram dengan JavaScript.

Skenario pengujian

Kami menyediakan implementasi referensi dan mendorong Anda untuk membuat prototipe sendiri guna menguji berbagai skenario.

• Demo referensi: Anda dapat mencoba implementasi referensi di https://deephand.github.io/webauthn-immediate-demo/.
  • Terapkan prototipe: Saat menerapkan prototipe di situs Anda, pastikan Anda melakukan panggilan navigator.credentials.get() dengan mediation: 'immediate' setelah pengguna mengklik (misalnya, tombol "Login", atau interaksi apa pun yang mengharuskan pengguna login).
• Alur 1: Login tanpa sandi atau kunci sandi: Jika Anda tidak memiliki kunci sandi atau sandi yang tersedia untuk situs, mengklik "Login" akan langsung membuka halaman login standar Anda, tanpa UI browser muncul.
• Alur 2: Login dengan kunci sandi lokal yang tersedia secara langsung: Jika Anda memiliki kunci sandi yang disimpan untuk situs, mengklik "Login" akan memicu UI Mediasi Langsung, yang menawarkan kunci sandi untuk dipilih.
• Alur 3: Login dengan kunci sandi atau sandi lokal: Jika Anda memiliki kunci sandi dan sandi yang disimpan, aktifkan opsi "Minta sandi" (dengan menetapkan password: true dalam kode Anda). Mengklik "Login" akan menawarkan opsi kunci sandi dan sandi di UI Mediasi Langsung.