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 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 benzerdir. Kimlik bilgileri mevcut olduğunda 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 yerel olarak uygun kimlik bilgilerinin 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 özelliğini PublicKeyCredential.getClientCapabilities() yöntemiyle destekleyip desteklemediğini doğrulayın. Desteklenmiyorsa e-posta ve şifre formları, telefon numarası doğrulama veya sosyal girişler gibi mevcut giriş 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 oturum açma akışını tetiklemek için navigator.credentials.get() alanını 'immediate' olarak ayarlayarak uiMode işlevini çağırın.

İsteğinize password: true ekleyerek tarayıcı şifre kimlik bilgilerini destekliyorsa kullanıcılar bu deneyimden yararlanabilir.

// 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 öğesini catch bloğunda işlemeniz gerekir.

Oturum açma akışlarını işleme

Anında kullanıcı arayüzü modunu iki temel senaryoda uygulayabilirsiniz.

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 bilgilerini bulursa kullanıcıya bir hesap seçmesi için anında 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 oluşturulur.
6. NotAllowedError istisnası oluşursa siteniz standart giriş sayfasıyla devam eder.

Ödeme yapmadan ö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ıklamak 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 hemen bir giriş iletişim kutusu göstermez. Kullanıcı deneyimi değişmeden kalır ve kullanıcıyı mevcut ödeme ekranına yönlendirebilirsiniz. Bu ekranda başka oturum açma seçenekleri veya Giriş Yapmadan Öde 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. Arama, etkinleştirmeyi kullanmaz.
• Gizli mod kısıtlamaları: Gizli veya özel oturumlardaki istekler her zaman NotAllowedError döndürür.
• İ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.