Mode UI langsung untuk login

Eiji Kitamura

José Luis Zapata

Dipublikasikan: 12 Mei 2026

Mode UI langsung untuk login adalah kemampuan web yang dirancang untuk menyederhanakan alur login. Fitur ini memungkinkan Anda menawarkan kunci sandi dan sandi terkelola secara proaktif langsung kepada pengguna saat mereka mencapai momen login, seperti mengklik tombol Login atau Checkout.

Abstrak

Mode UI langsung menyediakan mode yang langsung gagal jika tidak ada kredensial yang tersedia secara lokal. Perilaku ini mencerminkan preferImmediatelyAvailableCredentials API yang ditemukan di platform seluler seperti Android dan iOS. Jika kredensial ada, browser akan menampilkan dialog login langsung kepada pengguna. Jika tidak, browser akan menolak promise secara diam-diam, sehingga Anda dapat menyediakan metode login alternatif, misalnya, formulir login, tanpa mengganggu pengalaman pengguna.

Mulai Mei 2026, Chrome adalah satu-satunya browser yang mendukung mode UI langsung.

Memeriksa prasyarat

Untuk menggunakan mode UI langsung, pengguna harus sudah memiliki kredensial yang memenuhi syarat dan tersedia secara lokal di perangkatnya. Di Chrome, kredensial ini mencakup:

• Kunci sandi yang disimpan di penyedia kunci sandi seperti Pengelola Sandi Google, Windows Hello, atau iCloud Keychain.
• Sandi yang disimpan di Pengelola Sandi Google.

Jika tidak ada kredensial lokal, API akan menolak permintaan tanpa menampilkan dialog login langsung.

Mendeteksi dukungan fitur

Sebelum memanggil mode UI langsung, verifikasi apakah browser mendukung kemampuan immediateGet menggunakan metode PublicKeyCredential.getClientCapabilities(). Jika tidak didukung, kembali ke metode login yang ada, seperti formulir email dan sandi, verifikasi nomor telepon, atau login sosial.

async function checkImmediateAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet) {
      console.log("Immediate UI mode is supported.");
    } else {
      console.log("Immediate UI mode is NOT supported.");
    }
  } catch (error) {
    console.error("Error checking client capabilities:", error);
  }
}

Untuk dukungan browser yang lebih luas, gunakan polyfill yang tersedia di WebAuthn Polyfills GitHub repository.

Meminta kredensial

Untuk memicu alur login langsung, panggil navigator.credentials.get() dengan uiMode kolom yang ditetapkan ke 'immediate'.

Dengan menyertakan password: true dalam permintaan Anda, pengguna dapat memanfaatkan pengalaman ini jika browser mendukung sandi kredensial.

// This call must follow a user gesture, like a button click
button.addEventListener('click', async (event) => {
  event.preventDefault();
  try {
    const cred = await navigator.credentials.get({
      password: true,
      publicKey: {
        challenge: serverGeneratedChallenge,
        rpId: 'example.com'
      },
      uiMode: 'immediate',
    });
    // Handle successful sign-in
  } catch (error) {
    if (error.name === 'NotAllowedError') {
      // Provide a fallback sign-in experience
      showFallbackUI();
    }
  }
});

Anda harus menangani NotAllowedError dalam blok catch untuk memberikan pengalaman login pengganti.

Menangani alur login

Anda dapat menerapkan mode UI langsung untuk dua skenario utama.

Login dengan tombol

Sediakan tombol login khusus yang menawarkan pengalaman bersih tanpa dialog yang tidak terduga.

1. Pengguna mengklik tombol Login.
2. Situs Anda memanggil navigator.credentials.get() dengan uiMode: "immediate".
3. Browser memeriksa kredensial lokal.
4. Jika browser menemukan kredensial, browser akan menampilkan dialog login langsung agar pengguna dapat memilih akun.
5. Jika browser tidak menemukan kredensial atau pengguna menutup dialog login langsung, browser akan menampilkan NotAllowedError.
6. Jika NotAllowedError ditampilkan, situs Anda akan melanjutkan ke halaman login standar.

Login sebelum checkout

Tawarkan kredensial secara proaktif sebelum pengguna melakukan tindakan yang akan mendapatkan manfaat dari autentikasi, seperti memulai alur checkout di etalase online.

Dalam e-commerce, pengguna tamu sering memilih antara login ke akun yang ada atau checkout sebagai tamu. Menyediakan dialog login langsung dapat menyederhanakan proses checkout untuk pelanggan yang kembali.

1. Pengguna memulai tindakan, seperti mengklik tombol Checkout selama alur belanja.
2. Situs Anda memanggil navigator.credentials.get() dengan uiMode: "immediate".
3. Jika kredensial ada, pengguna akan memilih salah satu untuk menyelesaikan login.
4. Jika kredensial tidak ada, browser akan menampilkan error dan tidak menampilkan dialog login langsung. Pengalaman pengguna tetap tidak berubah, dan Anda dapat mengarahkan pengguna ke layar checkout yang ada, yang mungkin menyediakan opsi login lain atau formulir checkout tamu.

Meninjau langkah-langkah privasi dan keamanan

Browser menerapkan langkah-langkah penting untuk melindungi privasi pengguna:

• Persyaratan gestur pengguna: Anda harus memulai panggilan API dengan gestur pengguna, seperti klik, untuk mencegah probing senyap. Panggilan tidak menggunakan aktivasi.
• Batasan mode samaran: Permintaan dalam sesi samaran atau pribadi selalu menampilkan NotAllowedError.
• Tidak ada daftar yang diizinkan: Permintaan dengan daftar allowCredentials yang tidak kosong akan menampilkan NotAllowedError untuk mencegah pelacakan lintas sesi.
• Tidak ada pembatalan terprogram: Anda tidak dapat menggunakan parameter signal untuk menutup dialog login langsung secara terprogram.