Girişler için anında kullanıcı arayüzü modu

Eiji Kitamura
José Luis Zapata

Yayınlanma tarihi: 12 Mayıs 2026

Girişler için anında kullanıcı arayüzü modu, oturum açma akışlarını kolaylaştırmak üzere tasarlanmış bir web özelliğidir. Bu özellik, kullanıcılarınız oturum açma anına ulaştığında (ör. Oturum Aç veya Ödeme düğmesini tıkladığında) doğrudan onlara geçiş anahtarları ve yönetilen şifreler sunmanıza olanak tanır.

Soyut

Anında kullanıcı arayüzü modu, kimlik bilgileri yerel olarak mevcut değilse hemen başarısız olan bir mod sağlar. Bu davranış, Android ve iOS gibi mobil platformlarda bulunan preferImmediatelyAvailableCredentials API'lerle aynıdır. Kimlik bilgileri varsa tarayıcı, kullanıcıya anında giriş iletişim kutusu gösterir. Aksi takdirde, söz sessizce reddedilir ve kullanıcı deneyimini kesintiye uğratmadan alternatif oturum açma yöntemleri (ör. oturum açma formu) sunmanıza olanak tanınır.

Mayıs 2026 itibarıyla Chrome, anında kullanıcı arayüzü modunu destekleyen tek tarayıcıdır.

Ön koşulları kontrol etme

Anında kullanıcı arayüzü modunu kullanmak için kullanıcının cihazında uygun kimlik bilgilerinin yerel olarak bulunması gerekir. Chrome'da bu kimlik bilgileri şunları içerir:

  • Google Şifre Yöneticisi, Windows Hello veya iCloud Anahtar Zinciri gibi bir geçiş anahtarı sağlayıcıya kaydedilen geçiş anahtarları.
  • Google Şifre Yöneticisi'ne kaydedilen şifreler

Yerel kimlik bilgileri yoksa API, anında giriş iletişim kutusunu göstermeden isteği reddeder.

Özellik desteğini algılama

Anlık kullanıcı arayüzü modunu çağırmadan önce, tarayıcının immediateGet capability nesnesini destekleyip desteklemediğini PublicKeyCredential.getClientCapabilities() yöntemini kullanarak doğrulayın. Desteklenmiyorsa e-posta ve şifre formları, telefon numarası doğrulama veya sosyal medya hesaplarıyla giriş gibi mevcut oturum açma yöntemlerine geri dönün.

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);
  }
}

Daha geniş tarayıcı desteği için WebAuthn Polyfills GitHub deposunda bulunan polyfill'i kullanın.

Kimlik bilgisi isteğinde bulunma

Anında giriş akışını tetiklemek için navigator.credentials.get() alanını 'immediate' olarak ayarlayıp uiMode işlevini çağırın.

İsteğinize password: true ekleyerek, tarayıcı şifre kimlik bilgilerini destekliyorsa kullanıcıların bu deneyimden yararlanmasını sağlayabilirsiniz.

// 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();
    }
  }
});

Yedek oturum açma deneyimi sağlamak için NotAllowedError değerini bir catch bloğunda işlemeniz gerekir.

Oturum açma akışlarını yönetme

Anında kullanıcı arayüzü modunu iki temel senaryoda uygulayabilirsiniz. Daha fazla kullanıcı deneyimi rehberliği ve kaçınılması gereken anti-pattern'ler için Anında kullanıcı arayüzü modu için kullanıcı deneyimi kalıpları başlıklı makaleyi inceleyin.

Düğmeyle oturum açma

Beklenmedik istemler olmadan temiz bir deneyim sunan özel bir oturum açma düğmesi sağlayın.

  1. Kullanıcı bir Oturum aç düğmesini tıklar.
  2. Siteniz, uiMode: "immediate" ile navigator.credentials.get()'yı çağırıyor.
  3. Tarayıcı, yerel kimlik bilgilerini kontrol eder.
  4. Tarayıcı kimlik bilgileri bulursa kullanıcının hesap seçmesi için anında bir giriş iletişim kutusu gösterir.
  5. Tarayıcı kimlik bilgisi bulamazsa veya kullanıcı anında oturum açma iletişim kutusunu kapatırsa NotAllowedError hatası verilir.
  6. NotAllowedError istisnası oluşursa siteniz standart giriş sayfasıyla devam eder.

Ödeme işleminden önce oturum açma

Kullanıcı, kimlik doğrulama işleminden yararlanacağı bir işlem (ör. online mağazada ödeme adımları başlatma) yapmadan önce kimlik bilgilerini proaktif olarak sunun.

E-ticarette misafir kullanıcılar genellikle mevcut bir hesaba giriş yapma veya misafir olarak ödeme yapma seçeneklerinden birini belirler. Anında giriş iletişim kutusu sunmak, geri gelen müşteriler için ödeme sürecini kolaylaştırabilir.

  1. Kullanıcı, alışveriş akışı sırasında Ödeme düğmesini tıklama gibi bir işlem başlatır.
  2. Siteniz, uiMode: "immediate" ile navigator.credentials.get()'yı çağırıyor.
  3. Kimlik bilgileri varsa kullanıcı, oturum açma işlemini tamamlamak için birini seçer.
  4. Kimlik bilgileri yoksa tarayıcı hata verir ve anında giriş iletişim kutusu göstermez. Kullanıcı deneyimi değişmez ve kullanıcıyı mevcut ödeme ekranına yönlendirebilirsiniz. Bu ekranda başka oturum açma seçenekleri veya misafir ödeme formu sunulabilir.

Gizlilik ve güvenlik önlemlerini inceleme

Tarayıcı, kullanıcı gizliliğini korumak için önemli önlemler uygular:

  • Kullanıcı hareketi şartı: Sessiz yoklamayı önlemek için API çağrısını bir kullanıcı hareketiyle (ör. tıklama) başlatmanız gerekir. Çağrı, etkinleştirmeyi kullanmaz.
  • Gizli mod kısıtlamaları: Gizli veya özel oturumlardaki istekler her zaman NotAllowedError hatası verir.
  • İzin verilenler listesi yok: Boş olmayan bir allowCredentials listesi içeren istekler, oturumlar arası izlemeyi önlemek için NotAllowedError oluşturur.
  • Programatik iptal yok: Anında giriş iletişim kutusunu programatik olarak kapatmak için signal parametresini kullanamazsınız.