Penjelasan WebAuthn Immediate Mediation

60-page Enterprise Passkey Whitepaper:
Learn how leaders get +80% passkey adoption. Trusted by Rakuten, Klarna & Oracle

Get free Whitepaper

Transisi ke passkey menciptakan sebuah "paradoks passkey": beberapa pengguna sudah memiliki passkey, sementara banyak yang masih menggunakan kata sandi tradisional. Hal ini menyebabkan layar login yang penuh dengan banyak tombol: "Sign in with Password", "Sign in with Google", dan "Sign in with Passkey". Fragmentasi ini menimbulkan hambatan. Seorang pengguna mungkin mengklik "Sign in with Passkey" di perangkat baru hanya untuk dihadapkan pada prompt kode QR yang membingungkan karena passkey mereka tidak tersedia secara lokal. Masalah utamanya adalah ketidakmampuan situs web untuk mengetahui konteks pengguna sebelum memulai alur autentikasi.

Salah satu solusinya adalah pendekatan identifier-first dan menentukan metode login terbaik untuk pengguna. Solusi potensial lainnya adalah satu tombol "Sign In" yang cerdas yang mengatur alur yang paling mulus untuk setiap pengguna. Tombol ini seharusnya langsung meminta passkey jika tersedia di perangkat, atau beralih dengan lancar ke metode lain jika tidak.

Ada fitur WebAuthn baru yang diumumkan yang dapat mewujudkan hal ini: Immediate Mediation (mediation: 'immediate'). Dengan mengatur properti ini dalam panggilan API WebAuthn, developer dapat membangun pengalaman sign-in yang cerdas dan terpadu yang memecahkan paradoks passkey. Artikel ini menyediakan analisis yang berfokus pada developer mengenai mediation: 'immediate', menjelajahi apa itu, cara kerjanya, dan cara mengimplementasikannya.

Untuk memahami Immediate Mediation, ada baiknya kita mengetahui opsi lainnya terlebih dahulu. Mediasi pengguna dalam WebAuthn adalah cara browser mengelola interaksi antara situs web Anda (Relying Party) dan authenticator pengguna (misalnya, Face ID, YubiKey).

Ini adalah alur WebAuthn klasik yang eksplisit. Ketika sebuah Relying Party memanggil navigator.credentials.get() tanpa menentukan preferensi mediation, browser selalu menampilkan dialog modal. Dialog ini menutupi konten halaman, menuntut perhatian langsung dari pengguna dan menghentikan semua interaksi lain dengan situs web.

• Kasus Penggunaan: Paling baik untuk tombol khusus "Sign in with Passkey" di mana pengguna telah menyatakan niat mereka dengan jelas.
• Keterbatasan: Jika pengguna tidak memiliki passkey di perangkat saat ini, mereka akan diperlihatkan alur lintas perangkat (misalnya, kode QR), yang bisa menjadi jalan buntu yang membingungkan.

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

Try for Free

Diperkenalkan untuk membantu pengguna bertransisi ke passkey, mode ini lebih halus. Dengan mediation: 'conditional', permintaan WebAuthn dilampirkan ke kolom input (misalnya, nama pengguna) dengan atribut autocomplete="webauthn". Ketika pengguna mengklik kolom tersebut, UI autofill browser akan menyarankan passkey yang tersedia.

• Kasus Penggunaan: Ideal untuk meningkatkan formulir login tradisional secara progresif, memungkinkan pengguna menemukan dan menggunakan passkey tanpa tombol terpisah.
• Keterbatasan: Mode ini sangat memprioritaskan privasi sehingga jika pengguna tidak memiliki passkey atau tidak berinteraksi dengan prompt, promise dari panggilan API tidak akan pernah resolve. Situs web tidak mendapatkan sinyal apa pun, sehingga tidak mungkin untuk mengatur UI fallback.

mediation: 'immediate' adalah solusi untuk masalah "satu tombol sign-in". Fitur ini menyediakan cara yang andal bagi situs web untuk memeriksa ketersediaan passkey sebelum menampilkan UI apa pun.

Alih-alih menyuruh pengguna untuk melakukan autentikasi dengan passkey melalui modal, mediasi immediate bertanya kepada browser: "Apakah ada passkey yang siap tersedia untuk pengguna ini di perangkat ini saat ini juga?"

Yang terpenting, kueri ini hanya memeriksa kredensial yang tersedia secara lokal (misalnya, authenticator di perangkat seperti Windows Hello atau passkey yang disinkronkan melalui password manager). Fitur ini dirancang untuk menghindari pemicuan alur kode QR lintas perangkat, yang merupakan titik hambatan umum.

Want to try passkeys yourself in a passkeys demo?

Try Passkeys

Kekuatan fitur ini terletak pada hasil binernya yang jelas. Promise yang dikembalikan oleh navigator.credentials.get() akan berhasil atau gagal, memberikan sinyal yang jelas kepada developer.

• Jalur 1 (Berhasil): Kredensial Ada. Jika browser menemukan passkey yang tersedia secara lokal, ia akan melewati UI situs web dan langsung menampilkan modal aslinya, seperti pemilih akun. Jika pengguna berhasil melakukan autentikasi, promise akan me-resolve dengan objek PublicKeyCredential.
• Jalur 2 (Gagal): Tidak Ada Kredensial. Jika browser tidak menemukan kredensial yang tersedia secara lokal, ia tidak menampilkan UI. Sebaliknya, promise navigator.credentials.get() langsung me-reject dengan DOMException bernama NotAllowedError.

NotAllowedError bukanlah bug. Ini lebih seperti sebuah fitur. Ini adalah sinyal yang andal dan instan bahwa situs web harus melanjutkan dengan metode autentikasi fallback. Hal ini memungkinkan developer untuk menggunakan blok try...catch yang sederhana: blok try mencoba alur passkey yang mulus, dan blok catch mendengarkan NotAllowedError untuk merender formulir login tradisional. Ini dengan elegan memecahkan masalah satu tombol sign-in dengan menciptakan satu titik masuk yang secara cerdas beradaptasi dengan konteks pengguna.

Memilih mode mediasi yang tepat adalah keputusan UX yang krusial. Tabel ini menyediakan perbandingan berdampingan.

Berikut adalah panduan praktis langkah demi langkah untuk mengimplementasikan mediation: 'immediate'.

Karena mediation: 'immediate' adalah fitur baru, deteksi fitur yang kuat sangatlah penting.

// Feature detection is essential for progressive enhancement.
let immediateMediationAvailable = false;
 
if (window.PublicKeyCredential && PublicKeyCredential.getClientCapabilities) {
    try {
        const capabilities = await PublicKeyCredential.getClientCapabilities();
        // The 'immediateGet' capability signals browser support.
        immediateMediationAvailable = capabilities.immediateGet === true;
    } catch (e) {
        console.error("Error getting client capabilities:", e);
    }
}

Panggilan ini harus dipicu oleh aksi pengguna, seperti klik tombol.

// This function should be the event handler for your primary "Sign In" button.
async function handleSignInClick() {
    if (!immediateMediationAvailable) {
        // Fall back to showing a legacy login form if the feature isn't supported.
        showLegacyLoginForm();
        return;
    }
 
    try {
        // Fetch a fresh, random challenge from your server for each attempt.
        const challenge = await fetchChallengeFromServer();
 
        const publicKeyCredentialRequestOptions = {
            challenge: challenge, // The server-provided challenge as a Uint8Array
            rpId: "example.com",
            // The allowCredentials list MUST be empty for immediate mediation
            // to protect user privacy.
            allowCredentials: [],
        };
 
        const credential = await navigator.credentials.get({
            publicKey: publicKeyCredentialRequestOptions,
            // This is the key that enables the immediate mediation flow.
            mediation: "immediate",
        });
 
        // If the promise resolves, send the credential to your server for verification.
        await verifyCredentialOnServer(credential);
    } catch (error) {
        // The catch block is a critical part of the control flow.
        handleAuthError(error);
    }
}

Blok catch adalah tempat "kecerdasan" dari tombol sign-in tunggal diwujudkan.

// Handling the NotAllowedError is the key to the fallback mechanism.
function handleAuthError(error) {
    // Check the 'name' property of the DOMException.
    if (error.name === "NotAllowedError") {
        // This is the expected signal to show the traditional login form.
        console.log("No local passkey found. Showing legacy login form.");
        showLegacyLoginForm();
    } else {
        // This handles other potential errors, like the user dismissing the prompt.
        console.error("Authentication error:", error);
    }
}

Untuk pengalaman yang paling mulus, Anda dapat meminta browser untuk mencari passkey dan kata sandi yang tersimpan dalam permintaan yang sama dengan menambahkan password: true.

// Combining passkeys and passwords for a truly unified sign-in experience.
const credential = await navigator.credentials.get({
    publicKey: publicKeyCredentialRequestOptions,
    password: true, // Ask the browser to include saved passwords.
    mediation: "immediate",
});
 
// The returned 'credential' object will either be a PublicKeyCredential
// or a PasswordCredential. Your server-side logic must handle both.

1. Request WebAuthn Bersamaan: Permintaan conditional yang tertunda (sering dimulai saat halaman dimuat) dapat memblokir permintaan immediate yang baru. Pertimbangkan untuk menggunakan AbortController untuk membatalkan permintaan yang tertunda sebelum memulai yang baru.
2. Batasan allowCredentials: Array allowCredentials harus kosong. Memberikan ID kredensial akan menyebabkan panggilan gagal. Ini adalah perlindungan privasi yang krusial untuk mencegah situs memeriksa pengguna tertentu yang dikenal.
3. Persyaratan Aksi Pengguna: Panggilan harus dimulai dari aksi pengguna (misalnya, event 'click'). Memanggilnya secara terprogram saat halaman dimuat akan diblokir oleh browser sebagai tindakan perlindungan privasi.

mediation: 'immediate' dirancang dengan pemahaman yang jelas tentang trade-off keamanan dan privasinya.

Trade-off intinya adalah "bocoran satu-bit." Dengan mengukur waktu resolusi promise, sebuah Relying Party dapat menyimpulkan satu bit informasi: apakah promise langsung ditolak (tidak ada kredensial lokal) atau tertunda (prompt UI ditampilkan karena kredensial lokal ditemukan). Tujuan dari kebocoran ini adalah untuk memungkinkan UX yang lebih baik.

Para perancang mengantisipasi potensi penyalahgunaan (misalnya, pelacakan pengguna) dan membangun beberapa perlindungan yang tidak dapat ditawar:

1. Aksi Pengguna Wajib: Panggilan API harus dipicu oleh tindakan pengguna seperti klik. Ini mencegah situs secara diam-diam menyelidiki akun saat halaman dimuat dan membuat fingerprinting skala besar tidak praktis.
2. Dinonaktifkan dalam Mode Pribadi/Penyamaran: Fitur ini tidak diizinkan dalam mode penjelajahan pribadi untuk mencegah penautan aktivitas pengguna antara sesi normal dan pribadi.
3. Daftar allowCredentials yang Dilarang: Array allowCredentials harus kosong. Ini mencegah situs menggunakan fitur ini untuk memeriksa apakah pengguna tertentu yang dikenal sedang berkunjung.
4. Hanya Konteks Pihak Pertama: Fitur ini tidak diizinkan dalam konteks pihak ketiga (misalnya, iframe dari origin lain) untuk mencegah pelacakan lintas situs.

Mitigasi ini memastikan bahwa jaminan keamanan inti WebAuthn tetap utuh. Upacara autentikasi itu sendiri tidak berubah dan tetap tahan-phishing.

mediation: 'immediate' adalah fitur canggih dari spesifikasi WebAuthn Level 3, dan peluncurannya sedang berlangsung. Hingga pertengahan 2025, strategi progressive enhancement sangat penting.

Meskipun mediation: 'immediate' menyediakan alat tingkat rendah yang hebat untuk tombol login yang lebih cerdas, penting untuk membedakannya dari solusi "Passkey Intelligence" yang lebih luas, seperti yang ditawarkan oleh Corbado. Keduanya bertujuan untuk memecahkan paradoks passkey dan meningkatkan adopsi, tetapi mereka melakukannya dengan cara yang berbeda.

Passkey Intelligence melangkah lebih jauh dengan mengumpulkan dan mengevaluasi data dari waktu ke waktu. Hal ini memungkinkan intervensi pengguna yang lebih canggih dan tepat waktu. Misalnya, backend Passkey Intelligence dapat mendeteksi:

• Seorang pengguna berhasil melakukan autentikasi dengan kata sandi di perangkat baru yang mampu menggunakan passkey dan meminta mereka untuk menambahkan passkey untuk waktu berikutnya.
• Seorang pengguna menyelesaikan login "hybrid" lintas perangkat dan segera menyarankan mereka untuk mendaftarkan perangkat baru tersebut.
• Seorang pengguna gagal login di perangkat baru dan menawarkan pembuatan passkey sebagai opsi pemulihan atau penyiapan (pemulihan otomatis).

Pendekatan berbasis data ini tidak tergantung pada dukungan browser untuk mediation: 'immediate', yang berarti dapat memberikan alur login yang lebih cerdas untuk semua pengguna Anda, saat ini juga.

Yang Terbaik dari Keduanya

Pada akhirnya, kedua pendekatan ini tidak saling eksklusif; mereka saling melengkapi. Solusi ideal menggabungkan keduanya:

1. Gunakan layanan Passkey Intelligence sebagai otak dari proses login Anda.
2. Layanan tersebut kemudian dapat menggunakan mediation: 'immediate' sebagai salah satu sinyalnya pada browser yang didukung untuk melakukan pemeriksaan awal yang cepat.
3. Berdasarkan hasilnya—atau kurangnya dukungan untuk fitur tersebut—layanan intelijen kemudian dapat menggunakan datanya yang lebih kaya dan historis untuk mengatur fallback yang sempurna, baik itu menampilkan kolom kata sandi atau menawarkan prompt pembuatan passkey yang tepat waktu.

Dengan menggabungkan kecepatan asli mediation: 'immediate' dengan wawasan mendalam dari backend Passkey Intelligence, Anda dapat memberikan pengalaman login yang paling mulus, adaptif, dan efektif, dengan lembut membimbing setiap pengguna menuju masa depan tanpa kata sandi.

Immediate Mediation adalah peningkatan besar pada pengalaman login. Fitur ini memberikan kecerdasan yang dibutuhkan untuk menghilangkan titik-titik hambatan dan kebingungan umum bagi pengguna selama transisi ke passkey.

• Mengurangi Kebingungan Pengguna: Dengan mengaktifkan satu tombol "Sign In", mediasi immediate menghilangkan beban kognitif bagi pengguna. Mereka tidak lagi harus mengingat metode autentikasi mana yang mereka atur atau memilih dari daftar opsi yang berantakan. Proses login menjadi lebih sederhana dan lebih intuitif.
• Mencegah Pembatalan Login Passkey: Alasan umum pengguna membatalkan login passkey adalah kemunculan kode QR yang tidak terduga untuk alur lintas perangkat. Karena mediation: 'immediate' hanya mencari kredensial lokal, ia menghindari keadaan yang membingungkan ini sepenuhnya. Alih-alih pengguna membatalkan alur, aplikasi menerima sinyal yang jelas (NotAllowedError) untuk beralih dengan lancar ke metode lain, menghasilkan perjalanan yang lebih mulus.
• Menciptakan Alur yang Mulus dan Cerdas: Manfaat intinya adalah pengalaman login yang cerdas. Aplikasi dapat bertanya kepada browser apakah login passkey yang mulus dimungkinkan sebelum menampilkan UI. Pendekatan "Tanya, Jangan Suruh" ini memastikan pengguna hanya melihat prompt yang relevan bagi mereka. Ini membuat login terasa cerdas dan adaptif, memperkuat kenyamanan passkey dan mendorong penggunaannya secara berkelanjutan.

Immediate Mediation adalah fitur WebAuthn baru yang memecahkan masalah pengalaman login yang terfragmentasi selama periode transisi passkey. Fitur ini memungkinkan pembuatan satu tombol "Sign In" yang cerdas yang beradaptasi dengan konteks pengguna, menghilangkan kebingungan dan hambatan. Meskipun memperkenalkan trade-off privasi yang diperhitungkan, fitur ini mencakup perlindungan yang kuat untuk mengurangi risiko tanpa mengorbankan keamanan inti WebAuthn.

Bagi para developer, langkah ke depan adalah progressive enhancement. Bangun pengalaman dasar yang solid, dan lapisi dengan mediasi immediate untuk browser yang didukung. Mengadopsi fitur ini adalah langkah strategis untuk mempercepat adopsi passkey, meningkatkan keamanan, menurunkan biaya operasional, dan meningkatkan konversi.

Mengimplementasikan alur autentikasi canggih ini bisa jadi rumit. Platform Enterprise Passkey dari Corbado mengabstraksi kompleksitas ini. Infrastruktur kami menangani orkestrasi alur yang optimal—termasuk mediasi kondisional dan immediate yang memungkinkan tim Anda untuk menerapkan pengalaman autentikasi canggih dan tanpa hambatan dengan percaya diri.