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 akan segera gagal jika tidak ada kredensial yang tersedia secara lokal. Perilaku ini mencerminkan API preferImmediatelyAvailableCredentials yang ditemukan di platform seluler seperti Android dan iOS. Jika kredensial ada, browser akan menampilkan dialog login langsung kepada pengguna. Jika tidak, promise akan ditolak 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 yang tersedia secara lokal di perangkat mereka. Di Chrome, kredensial ini mencakup:

  • Kunci sandi yang disimpan di penyedia kunci sandi seperti Pengelola Sandi Google, Windows Hello, atau Rantai Kunci iCloud.
  • 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 dengan akun media 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 repositori GitHub WebAuthn Polyfills.

Meminta kredensial

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

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

// 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 penggantian.

Menangani alur login

Anda dapat menerapkan mode UI langsung untuk dua skenario utama. Untuk panduan UX dan anti-pola lainnya yang harus dihindari, lihat Pola UX untuk mode UI Langsung.

Login dengan tombol

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

  1. Pengguna mengklik tombol Login.
  2. Situs Anda memanggil navigator.credentials.get() dengan uiMode: "immediate".
  3. Browser akan memeriksa kredensial lokal.
  4. Jika browser menemukan kredensial, browser akan menampilkan dialog login langsung bagi pengguna untuk 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 dengan halaman login standar.

Login sebelum checkout

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

Dalam e-commerce, pengguna tamu sering kali 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 memilih salah satunya untuk menyelesaikan proses 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 penyelidikan diam-diam. Panggilan tidak menggunakan aktivasi.
  • Batasan mode samaran: Permintaan dalam sesi samaran atau pribadi selalu memunculkan NotAllowedError.
  • Tidak ada daftar yang diizinkan: Permintaan dengan daftar allowCredentials yang tidak kosong akan memunculkan NotAllowedError untuk mencegah pelacakan lintas sesi.
  • Tidak ada pembatalan terprogram: Anda tidak dapat menggunakan parameter signal untuk menutup dialog login langsung secara terprogram.