WebAuthn Conditional UI (Geçiş Anahtarları Otomatik Doldurma) Teknik Açıklaması

Passkeys Cheat Sheet. Passkey programları için pratik rehberler, geçiş kalıpları ve KPI'lar.

Cheat sheet al

Geçiş anahtarlarının (ve temel WebAuthn protokolünün) hızla benimsenmesiyle birlikte, kimlik doğrulama birçok kullanıcı için daha güvenli ve kullanıcı dostu hale geldi. Geçiş anahtarlarının göze çarpan ilerlemelerinden biri, genellikle "geçiş anahtarı otomatik doldurma (passkey autofill)" veya Conditional Mediation olarak adlandırılan Conditional UI entegrasyonu olmuştur (aşağıda Conditional UI terimiyle devam edeceğiz).

Yakın zamanda tanıtılmasına ve tarayıcılar tarafından sürekli olarak benimsenmesine rağmen, Conditional UI için teknik belgelerde ve uygulama tavsiyelerinde gözle görülür bir boşluk bulunmaktadır. Bu makale, Conditional UI'nin ne olduğunu, nasıl çalıştığını ve uygulaması sırasındaki yaygın zorlukların nasıl üstesinden gelineceğini açıklayarak bu boşluğu doldurmayı amaçlamaktadır.

Conditional UI, geçiş anahtarları / WebAuthn oturum açma süreçleri için yeni bir modu temsil eder. Kullanıcı, yalnızca cihazının (örn. dizüstü bilgisayar, akıllı telefon) kimlik doğrulayıcısında saklanan ve güvenen taraf (çevrimiçi hizmet) ile kayıtlı olan, geçiş anahtarının bir türü olan keşfedilebilir bir kimlik bilgisine (yerleşik anahtar - resident key) sahip olduğunda geçiş anahtarlarını bir kullanıcı arayüzünde (UI) seçici olarak görüntüler. Geçiş anahtarları, otomatik olarak doldurulan parolalarla karışık bir seçim açılır menüsünde görüntülenir. Bu sayede kullanıcılar her ikisini de aynı bağlamda gördüğünden, geleneksel parola sistemleri ile gelişmiş geçiş anahtarı kimlik doğrulaması arasında sorunsuz bir geçiş sağlanır. Bu akıllı yaklaşım, kullanıcıların gereksiz seçeneklerle bunalmamasını ve oturum açma sürecinde daha sorunsuz bir şekilde ilerlemesini sağlar.

Igor Gjorgjioski

Head of Digital Channels & Platform Enablement, VicRoads

We hit 80% mobile passkey activation across 5M+ users without replacing our IDP.

See how VicRoads scaled passkeys to 5M+ users — alongside their existing IDP.

Read the case study

Conditional UI'nin temeli üç ana sütun üzerine inşa edilmiştir:

1. Kullanıcı Gizliliğine Saygı Duymak: Mevcut kimlik bilgilerinin ifşa edilmesini veya bu kimlik bilgilerini ortaya çıkarmak için kullanıcı onayının alınmamasını önleyerek kullanıcı gizliliğini sağlamak.
2. Geçiş Anahtarı Olmasa Bile Harika Kullanıcı Deneyimi: Güvenen tarafları WebAuthn'i fırsatçı bir şekilde uygulamaları için güçlendirmek, geçiş anahtarları mevcut olmasa bile kullanıcı deneyiminin iyi kalmasını sağlamak.
3. Parolalardan Geçiş Anahtarlarına Sorunsuz Geçiş: Kullanıcıların aşina olduğu kullanıcı deneyimi paradigmalarından yararlanarak parolasız kimlik doğrulama yöntemlerine geçişi yumuşatmak için geçiş anahtarlarını parola tabanlı kimlik doğrulaması ile birleştirmek.

• Akıcı Kimlik Doğrulama: Süreç, genellikle birden fazla kimlik doğrulama yöntemiyle ilişkili karmaşıklıkları ortadan kaldırarak daha akıcı ve verimli hale gelir.
• Kullanıcı Hatalarının Azaltılması: Yalnızca ilgili seçenekler sunularak, kullanıcıların kimlik doğrulama işlemi sırasında hata yapma olasılığı azaltılır.
• Artan Kullanıcı Memnuniyeti: Gereksiz adımların kaldırılması, kullanıcıların daha hızlı ve daha zahmetsizce oturum açabileceği anlamına gelir ve bu da kullanıcı memnuniyetinin artmasını sağlar.
• Basit Arayüz (Frontend) Entegrasyonu: Conditional UI'nin öne çıkan özelliklerinden biri, entegrasyon kolaylığıdır. Geliştiriciler, birkaç satır kodla arayüze sorunsuz bir şekilde dahil edebilirler (aşağıya bakın).
• Parolasız ve Kullanıcı Adı Olmadan Oturum Açma: En büyük avantajlardan biri, Conditional UI'nin yalnızca parolasız kimlik doğrulamayı değil, aynı zamanda kullanıcı adı olmayan veya hesapsız bir deneyimi teşvik etmesidir. Kullanıcılar, kayıt aşamasındaki belirli e-posta adreslerini veya kullanıcı adlarını hatırlamanın zihinsel yükünden kurtulurlar. Bunun yerine, otomatik doldurma menüsünde uygun geçiş anahtarıyla eşleştirilmiş e-posta adresini/kullanıcı adını içeren tarayıcı önerilerine güvenebilirler.
• Başlangıç İkileminin Çözülmesi: Geleneksel kullanıcı adı-parola sistemlerinden geçiş anahtarlarına geçiş korkutucu olabilir. Conditional UI bu geçiş zorluğunu çözer. Web siteleri, bir cihaz gerekli kimlik bilgilerinden yoksunsa olası kalıcı (modal) iletişim kutusu hataları konusunda endişelenmeden, geleneksel bir parola isteminin yanı sıra bir geçiş anahtarı / WebAuthn çağrısı başlatabilir.

Son haberler için Passkeys Substack'e abone olun.

Abone ol

• Geliştiriciler İçin Öğrenme Eğrisi: Conditional UI, yeni bir paradigma sunar ve bu da onun inceliklerine aşina olmayan geliştiriciler için bir öğrenme eğrisi olduğu anlamına gelir.
• Cihaz / Tarayıcı Bağımlılığı: Conditional UI'nin başarısı, kullanıcının cihazına veya tarayıcı uyumluluğuna bağlıdır. Şu anda tüm tarayıcıların veya cihazların bunu desteklememesi göz önüne alındığında, bu durum uygulamasını sınırlayabilir.
• Parola Yöneticilerinin Otomatik Tamamlamayı Devre Dışı Bırakması: Bazı modern parola yöneticileri ve tarayıcı uzantıları, web sitelerinin DOM'unu değiştirir ve kendi otomatik tamamlama özelliklerini desteklemek için giriş alanlarındaki autocomplete etiketini devre dışı bırakır veya üzerine yazar. Bu, tutarsız ve tatmin edici olmayan bir kullanıcı deneyimine yol açabilir. Conditional UI standartları nispeten yeni olduğu için, örneğin iki otomatik doldurma menüsünün üst üste binmemesi veya istenenin hiç gösterilmemesi gibi durumların iyileşeceğini umuyoruz.

Aşağıda, tüm bir Conditional UI akışının tekil adımlarının adım adım bir dökümünü sunuyoruz:

Genel olarak, Conditional UI işlem akışı iki aşamaya ayrılabilir. Sayfa yükleme aşamasında, Conditional UI mantığı arka planda gerçekleşirken, kullanıcı işlemi aşamasında kullanıcının aktif olarak bir şeyler yapması gerekir.

1. Conditional UI Kullanılabilirlik Kontrolü: İstemci (tarayıcı), mevcut tarayıcı / cihaz kombinasyonunun Conditional UI'yi destekleyip desteklemediğini algılamak için isConditionalMediationAvailable() işlevini çağırır. Yalnızca yanıt doğruysa işlem devam eder, aksi takdirde Conditional UI işlemi iptal edilir.
2. Conditional UI Uç Noktasını Çağırma: Ardından, istemci PublicKeyCredentialRequestOptions'ı almak için sunucuların Conditional UI uç noktasını çağırır.
3. PublicKeyCredentialRequestOptions'ı Alma: Sunucu, sorguyu (challenge) ve daha fazla WebAuthn sunucu seçeneğini (örn. allowCredentials, extensions, userVerification) içeren PublicKeyCredentialRequestOptions'ı döndürür.
4. Yerel Kimlik Doğrulamayı Başlatma: Alınan PublicKeyCredentialRequestOptions ve conditional olarak ayarlanmış mediation özelliği ile credentials.get() çağrılarak cihaz üzerinde yerel kimlik doğrulama işlemi başlar.
5. Otomatik Doldurma Seçimini Gösterme: Geçiş anahtarları için otomatik doldurma menüsü açılır. Belirli biçimlendirme tarayıcıya ve cihaza bağlıdır (örneğin bazıları kullanıcının imleci giriş alanına yerleştirmesini gerektirir, bazıları sayfayı yüklerken menüyü otomatik olarak görüntüler, aşağıya bakın).
6. Yerel Kullanıcı Kimlik Doğrulaması: Kullanıcı, kullanmak istediği geçiş anahtarını otomatik doldurma menüsünden seçer ve cihazının kimlik doğrulama iletişim kutusu (örn. Face ID, Touch ID, Windows Hello) aracılığıyla kimlik doğrulamasını gerçekleştirir.
7. Kimlik Doğrulayıcı Yanıtını Sunucuya Gönderme: Yerel kullanıcı kimlik doğrulaması başarılı olduysa, kimlik doğrulayıcı yanıtı sunucuya geri gönderilir.
8. Kullanıcının Oturum Açması ve Yönlendirilmesi: Sunucu kimlik doğrulayıcı yanıtını aldıktan sonra, veritabanındaki ilgili kullanıcı hesabının genel anahtarına karşı imzayı doğrular. Doğrulama başarılı olursa, kullanıcıya erişim izni verilir, oturumu açılır ve oturum açılmış sayfaya yönlendirilir.

Bu süreç akışını izleyerek Conditional UI, sorunsuz ve kullanıcı dostu bir kimlik doğrulama deneyimi sunar.

Conditional UI'nin çalışmasını sağlamak için bazı genel hususların dikkate alınması gerekir:

• Kimlik Bilgisi Özellikleri: Conditional UI, özellikle yalnızca yerleşik anahtarlarla (resident keys) / keşfedilebilir kimlik bilgileriyle çalışmak üzere tasarlanmıştır. Bunun arkasındaki neden, kimlik doğrulayıcıların yerleşik olmayan anahtarlar / keşfedilemeyen kimlik bilgileri için kullanıcıya özgü verileri (örn. isim, görünen isim) depolamamasıdır. Sonuç olarak, bunları geçiş anahtarı otomatik doldurma için kullanmak mümkün değildir.
• Kimlik Bilgisi Filtreleme: allowCredentials özelliği desteklenmeye devam eder ve zaten kullanıcının kimliğinin farkında olan web sitelerinin (örneğin, ilk arabuluculuk çağrısında bir kullanıcı adı gönderildiyse, çünkü bu tarayıcıların LocalStorage'ında saklanıyor olabilir), otomatik doldurma sırasında kullanıcılara gösterilen kimlik bilgilerinin listesini hassaslaştırmasını sağlar.

Güncellemeler ve destek için Passkeys Community'ye katılın.

Katıl

İstemci tarafında Conditional UI'nin çalışmasını sağlamak için aşağıdaki gereksinimlerin karşılanması gerekir:

• Uyumlu Tarayıcı: Kullanıcının Conditional UI'yi destekleyen modern bir tarayıcı kullandığından emin olun (en son tarayıcı kapsamı için buraya bakın).
• Etkinleştirilmiş JavaScript: Conditional UI işlemlerini kolaylaştırmak için JavaScript etkinleştirilmelidir.
• Conditional UI Kullanılabilirliğini Test Etme: Güvenen taraf (sunucu tarafı), WebAuthn mediation çağrısını aldığında Conditional UI'nin desteklenmediği senaryolarda kullanıcı tarafından görülebilen herhangi bir hatayı tetiklemekten kaçınmak için Conditional UI'nin istemci tarafında mevcut olduğundan emin olmalıdır. Bunu ele almak için, Conditional UI'nin teknik kullanılabilirliğini kontrol etmek üzere isConditionalMediationAvailable() yöntemini kullanmanız önerilir (daha fazla ayrıntı için aşağıya bakın).
• HTML Giriş Alanı Gerekli: Conditional UI'nin çalışması için web sayfanızda bir HTML giriş alanına ihtiyacınız vardır. Bir tane yoksa, bir düğme tıklaması gibi bir kullanıcı etkileşimi ile tetiklenen standart geçiş anahtarı / WebAuthn oturum açma süreci için destek sağlamanız gerekir.
• Zaman Aşımı Protokollerini Kaldırma: Bu kurulumda zaman aşımı parametreleri (örneğin, kullanıcının otomatik doldurma menüsünde bir geçiş anahtarına karar vermesi çok uzun sürüyorsa) dikkate alınmamalıdır.

Conditional UI'nin çalışmasını sağlamak için sunucu tarafında da bazı gereksinimlerin karşılanması gerekir:

• Çalışan WebAuthn Sunucusu: Hala geçiş anahtarları / WebAuthn bağlamında olduğumuz için, kimlik doğrulama prosedürlerini yöneten bir WebAuthn sunucusunun çalışması gerekir.
• Mediation Başlangıç Uç Noktası Sağlama: Standart WebAuthn oturum açma uç noktalarına kıyasla, benzer işlevselliğe sahip ancak isteğe bağlı bir kullanıcı tanıtıcısıyla (örn. e-posta adresi, telefon numarası, kullanıcı adı) başa çıkabilen başka bir uç nokta sağlamak yararlıdır.

Conditional UI'nin 2022'nin sonlarındaki resmi lansmanından ve önceki beta sürümlerinden bu yana, onu kapsamlı bir şekilde test ediyor ve üzerinde çalışıyoruz. Aşağıda, Conditional UI'nin uygulanması sırasında yardımcı olan pratik ipuçlarını sizinle paylaşmak istiyoruz.

Passkeys Debugger içinde passkey akışlarını deneyin.

Ücretsiz dene

Bir Conditional UI yöntemi için eksiksiz ve minimalist bir kod örneği şu şekilde görünür:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Conditional UI</title>
    </head>
    <body>
        <input type="text" id="username" autocomplete="username webauthn" />
 
        <script>
            async function passkeyLogin() {
                try {
                    // retrieve the request options (incl. the challenge) from the WebAuthn server
                    let options = await WebAuthnClient.getPublicKeyRequestOptions();
 
                    const credential = await navigator.credentials.get({
                        publicKey: options.publicKeyCredentialRequestOptions,
                        mediation: "conditional",
                    });
 
                    const userData = await WebAuthnClient.sendSignedChallenge(credential);
                    window.location.href = "/logged-in";
                } catch (error) {
                    console.log(error);
                }
            }
 
            passkeyLogin();
        </script>
    </body>
</html>

Conditional UI'nin yalnızca mevcut cihaz / tarayıcı kombinasyonu desteklediğinde kullanıldığından emin olan Conditional UI algılamasını uygulayın. Bu, Conditional UI desteği olmadığında kullanıcı tarafından görülebilen hatalar sunmadan çalışmalıdır. isConditionalMediationAvailable() yöntemini kullanıcı arayüzüne dahil etmek bu endişeyi giderir. Conditional UI desteği varsa, Conditional UI oturum açma işlemi başlatılabilir.

// source: https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/isConditionalMediationAvailable#examples
 
// Availability of `window.PublicKeyCredential` means WebAuthn is usable.
if (window.PublicKeyCredential && PublicKeyCredential.isConditionalMediationAvailable) {
    // Check if conditional mediation is available.
    const isCMA = await PublicKeyCredential.isConditionalMediationAvailable();
    if (isCMA) {
        // Call WebAuthn authentication start endpoint
 
        let options = await WebAuthnClient.getPublicKeyRequestOptions();
 
        const credential = await navigator.credentials.get({
            publicKey: options.publicKeyCredentialRequestOptions,
            mediation: "conditional",
        });
        /*
        ...
        */
    }
}

Giriş alanı bir webauthn HTML otomatik doldurma belirteci (token) almalıdır. Bu, istemciye devam eden isteğe geçiş anahtarlarını doldurmasını bildirir. Geçiş anahtarlarının yanı sıra diğer otomatik doldurma değerleri de gösterilebilir. Bu otomatik doldurma belirteçleri diğer mevcut belirteçlerle eşleştirilebilir, örn:

• autocomplete="username webauthn": Geçiş anahtarlarını görüntülemenin yanı sıra, kullanıcı adı otomatik doldurmayı da önerir.
• autocomplete="current-password webauthn": Geçiş anahtarlarını görüntülemenin yanı sıra, parola otomatik doldurma için daha fazla istemde bulunur.

<label for="name">Username:</label>
<input type="text" name="name" autocomplete="username webauthn" />
<label for="password">Password:</label>
<input type="password" name="password" autocomplete="current-password webauthn" />

Daha fazla ayrıntı için, geçiş anahtarları ve parolalar için otomatik doldurma / otomatik tamamlama belirteçleri hakkında daha fazla ayrıntı sağlayan bu blog gönderisini okumanızı öneririz.

PublicKeyCredentialRequestOptions nesnesini aldıktan sonra mevcut geçiş anahtarlarını almak için, navigator.credentials.get() işlevi çağrılmalıdır (bu hem geçiş anahtarlarına hem de parolalara hizmet eder). İstemcide Conditional UI'yi etkinleştirmek için PublicKeyCredentialRequestOptions nesnesinin mediation parametresinin conditional olarak ayarlanması gerekir. Bunun yerine kalıcı (modal) bir geçiş anahtarı istemi istediğiniz durumlar için immediate mediation'a bakın.

const credential = await navigator.credentials.get({
    publicKey: options.publicKeyCredentialRequestOptions,
    mediation: "conditional",
});

Kullanılabilir bir geçiş anahtarı yoksa veya kullanıcı önerilen geçiş anahtarlarını ihmal edip e-postasını girerse, Conditional UI akışı durdurulur. Bu durum, her zaman kalıcı (modal) bir iletişim kutusu aracılığıyla standart geçiş anahtarı / WebAuthn oturum açma işleminin de desteklenmesinin önemini vurgular.

Burada vurgulanması gereken kritik bir nokta, devam eden bir Conditional UI isteğini durdurma potansiyel ihtiyacıdır. Kalıcı deneyimlerin aksine, otomatik doldurma açılır menülerinde bir iptal düğmesi bulunmaz. WebAuthn'in tasarımına göre, herhangi bir zamanda yalnızca tek bir aktif kimlik bilgisi isteği sürüyor olmalıdır. WebAuthn standardı, hem normal hem de Conditional UI oturum açma süreçlerine uygulanabilen bir WebAuthn sürecini iptal etmek için bir AbortController kullanılmasını önerir (ayrıntılar için buraya bakın).

Üretim telemetrisinde (production telemetry), bu iptal yolu genellikle sistem hatası değil, beklenen bir kontrol akışı sonucudur. Yüksek hacimli hatalar görürseniz, bunları regresyon olarak ele almadan önce işlem türüne ve zamanlamasına göre beklenen ve beklenmeyen durumları sınıflandırmanız gerekir (bkz. WebAuthn hataları).

Conditional UI oturum açma işlemi, bir kullanıcı sayfaya girdiği anda etkinleşir. İlk görev, global kapsamlı bir AbortController nesnesi oluşturmak olmalıdır. Bu, özellikle kullanıcı normal geçiş anahtarı oturum açma işlemini gerçekleştirmeye karar verirse, istemcinizin otomatik doldurma isteğini sonlandırması için bir sinyal görevi görecektir. AbortController'ın diğer işlevler tarafından çağrılabildiğinden ve Conditional UI işleminin yeniden başlatılması gerekirse sıfırlandığından emin olun. navigator.credentials.get() çağrısı içindeki sinyal özelliğini kullanın ve AbortController sinyalinizi bunun değeri olarak ekleyin. Bu, geçiş anahtarı / WebAuthn işlevine, sinyal iptal edilirse isteğin durdurulması gerektiğini bildirir. Conditional UI'yi her tetiklediğinizde yeni bir AbortController kurmayı unutmayın. Zaten iptal edilmiş bir AbortController kullanmak, geçiş anahtarı / WebAuthn işlevinin anında iptal edilmesine yol açacaktır. Kalan adımlar normal bir geçiş anahtarı oturum açma süreciyle uyumludur. Aşağıda, bahsedilen adımların bir kod örneğini görebilirsiniz:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Conditional UI</title>
    </head>
    <body>
        <input type="text" id="username" autocomplete="username webauthn" />
 
        <script>
            async function passkeyLogin() {
                try {
                    // retrieve the request options (incl. the challenge) from the WebAuthn server
                    let options = await WebAuthnClient.getPublicKeyRequestOptions();
 
                    const credential = await navigator.credentials.get({
                        publicKey: options.publicKeyCredentialRequestOptions,
                        mediation: "conditional",
                    });
 
                    const userData = await WebAuthnClient.sendSignedChallenge(credential);
                    window.location.href = "/logged-in";
                } catch (error) {
                    console.log(error);
                }
            }
 
            passkeyLogin();
        </script>
    </body>
</html>

Conditional UI desteği yoksa, kullanıcıları normal geçiş anahtarı oturum açma sürecine yönlendirin. Bu yolu sunmak, donanım güvenlik anahtarlarına (örn. YubiKey) güvenen veya kimlik doğrulayıcı kısıtlamaları nedeniyle yerleşik olmayan anahtarları (non-resident keys) / keşfedilemeyen kimlik bilgilerini kullanmaya zorlanan kullanıcılar için önemlidir.

Kaç kişinin gerçekten passkeys kullandığını görün.

Adoption verilerini gör

Örneğin iOS veya Android için yerel (native) bir uygulama geliştirdiğinizde, Conditional UI de çalışır. Flutter, Kotlin veya Swift dillerinden birinde yerel olarak uygulamanız ya da Chrome Custom Tabs (CCT), SFSafariViewController veya SFAuthenticationSession / ASWebAuthenticationSession seçenekleriyle ilerlemeniz fark etmez. Her iki yaklaşım da Conditional UI'yi destekler.

Genel olarak, iOS uygulamaları için Conditional UI desteğinin nasıl uygulanacağına dair neredeyse hiçbir belge bulamadık. Ancak araştırmamız sırasında, kullanıcı deneyimi de farklılık göstereceğinden, bir iOS uygulamasına Conditional UI desteği eklemenin iki yolunu keşfettik.

A Tipi: Neredeyse Tüm Ekranı Kaplayan Katman / Açılır Pencere

İlk A tipi, neredeyse tüm ekranı kaplayan bir katman (overlay) / açılır pencere (popup) gösterir. Burada, bu güvenen taraf için mevcut tüm geçiş anahtarlarını görebilirsiniz. Conditional UI'yi bu şekilde uygulayan önemli bir örnek KAYAK'tır. Kullanıcı doğru ekranı açtığında katman / açılır pencere otomatik olarak çıkar.

B Tipi: Klavye Otomatik Doldurma

İkinci B tipi, klavyenin otomatik doldurma bölümünde (parolaların da otomatik doldurma için önerildiği yer) uygun bir geçiş anahtarı görüntüler. Önerilen değere tıklamak, Face ID kimlik doğrulamasını gerçekleştirecek ve giriş yapmanızı sağlayacaktır. Corbado geliştirici panelinin mevcut iOS uygulaması sürümünde, bunu bu şekilde uyguladık (WebAuthn kullanıcı adıyla birlikte <güvenen taraf kimliği> için geçiş anahtarıyla giriş yapın mesajına bakın). Görünmesi için kullanıcının giriş alanına dokunması gerekir:

Klavyedeki bu geçiş anahtarı otomatik doldurma özelliği, iOS yeni yüklendiğinde sorun yaşayabilir, çünkü görünüşe göre arka planda bu güvenen taraf için mevcut tüm geçiş anahtarlarını arayan bir tür önbelleğe alma işlemi gerçekleşir.

Önerilen geçiş anahtarının sağındaki anahtar simgesine tıklamak, iOS'ta parola / geçiş anahtarı seçmek için bilinen siteye yönlendirir:

Lütfen resmi belgeler bulamadığımızı ve içgörülerimizin doğru uygulamanın somut kanıtlarından ziyade deneyimlerimize ve hipotezlerimize dayandığını unutmayın.

Android'de, Conditional için durum biraz daha nettir, çünkü Android Credential Manager API'sini kullanan Conditional UI / geçiş anahtarı otomatik doldurma için yalnızca bir tür vardır (belgelere buradan bakın). Android sağlayıcıları farklılık gösterebileceğinden, Credential Manager geçiş anahtarı hatalarını yalnızca tarayıcıya özgü WebAuthn hata desenlerinden ayrı olarak izleyin.

Conditional UI'nin uygulandığı sayfayı açmak, oturum açmak için farklı yollar bulabileceğiniz aşağıdaki ekranı gösterir:

Daha fazla kayıtlı oturum açma (More saved sign-ins) seçeneğine tıklamak, oturum açma için seçebileceğiniz daha fazla seçenek sunar (cihazlar arası kimlik doğrulama ve farklı bir geçiş anahtarı senkronizasyon platformu seçimi dahil, örn. Samsung Pass veya 1Password):

Son kullanıcı için Conditional UI'nin neye benzediğini göstermek amacıyla, https://passkeys.eu kullanarak bir Conditional UI otomatik doldurma menüsünün çeşitli ekran görüntülerini ekledik.

Canlı demo ile passkeys deneyin.

Passkeys dene

Gerçek yaşam uygulamalarındaki bazı yaygın senaryolara göz atalım.

Bir site için kaydedilmiş geçiş anahtarı yoksa, Conditional UI tarayıcıya ve işletim sistemine bağlı olarak farklı davranacaktır.

macOS üzerinde Chrome'da giriş alanına tıklandığında boş bir otomatik doldurma açılır menüsü görünür:

macOS üzerinde Safari'de açılır menü gösterilmez - yalnızca giriş alanında ince bir simge görünür:

Android veya iOS'ta, otomatik doldurma arayüzü yalnızca kullanıcı alana dokunursa ve işletim sistemi eşleşen kimlik bilgileri bulursa görünür.

Bu değişkenlik kasıtlıdır ve WebAuthn'in gizlilik modelinin bir parçasıdır: web siteleri, kullanıcı aktif olarak birini seçmediği sürece kullanıcının bir geçiş anahtarı olup olmadığını tespit edemez.

Bir kullanıcının birden fazla geçiş anahtarı sağlayıcısı yüklüyse (örn. iCloud Keychain, Google Password Manager, 1Password), tarayıcı veya işletim sistemi tipik olarak kullanıcının birincil kimlik bilgisi yöneticisini varsayılan olarak kullanır.

Geçiş anahtarlarını destekleyen farklı geçiş anahtarı sağlayıcılarının / kimlik bilgisi yöneticilerinin bir listesi için aşağıdaki GitHub bağlantısına göz atmanızı öneririz.

Android'de Credential Manager, Samsung Pass veya 1Password gibi farklı sağlayıcıları açığa çıkarır.

1. Kullanıcı tanımlayıcı giriş alanına tıklandığında, kullanıcının bir geçiş anahtarı seçebileceği bu menü açılır.

2. Kullanıcı önceki ekranda "Daha fazla geçiş anahtarı (More passkeys)" seçeneğine tıkladıysa, diğer geçiş anahtarı sağlayıcılarının / kimlik bilgisi yöneticilerinin ve geçiş anahtarlarının bir ön seçimi görünür:

3. Kullanıcı önceki ekranda "Daha fazla kayıtlı oturum açma (More saved sign-ins)" seçeneğine tıkladıysa, kullanıcının geçiş anahtarı seçebileceği mevcut öğelerin tam bir listesi gelir.

iOS'ta, anahtar simgesi çeşitli kaynaklardan gelen geçiş anahtarlarının tam listesini açar.

1. İlk olarak, iOS 18+ üzerinde, varsayılan geçiş anahtarı sağlayıcısıyla normal Conditional UI gelir.

2. Klavye simgesine tıklandığında aşağıdaki seçim menüsü görünür.

3. Bir kimlik bilgisi yöneticisi / geçiş anahtarı sağlayıcısı seçildikten sonra, kullanıcı kullanılacak geçiş anahtarını seçebilir.

Geçiş anahtarları (passkeys), Conditional UI / geçiş anahtarı otomatik doldurma yetenekleriyle çevrimiçi kimlik doğrulaması yapmanın yeni yoludur. Parolaların giderek geçiş anahtarlarıyla değiştirildiği bir döneme geçerken, sağlam ve kullanıcı dostu geçiş mekanizmalarına olan ihtiyaç inkar edilemez. Bu makale, geçiş sürecinde büyük bir yardımcı olan Conditional UI'nin nasıl doğru şekilde uygulanacağını ve hangi yönlere özel dikkat gösterilmesi gerektiğini anlamaya yardımcı olmuştur.

Corbado Hakkında

Corbado, büyük ölçekte tüketici kimlik doğrulaması yöneten CIAM ekipleri için Authentication Intelligence Platform'tur. IDP loglarının ve genel analytics araçlarının göremediğini görmenizi sağlarız: hangi cihazların, OS sürümlerinin, tarayıcıların ve credential manager'ların passkey desteklediğini; kayıtların neden girişe dönüşmediğini; WebAuthn akışının nerede başarısız olduğunu; bir OS ya da tarayıcı güncellemesinin girişi sessizce ne zaman bozduğunu — hem de Okta, Auth0, Ping, Cognito veya kendi IDP'nizi değiştirmeden. İki ürün: Corbado Observe, passkey'ler ve diğer tüm giriş yöntemleri için observability sağlar. Corbado Connect, analytics entegre managed passkey'ler sunar (IDP'nizin yanında). VicRoads, Corbado ile 5M+ kullanıcı için passkey çalıştırıyor (%80+ passkey aktivasyonu). Bir Passkey uzmanıyla görüşün →

PublicKeyCredential.isConditionalMediationAvailable() işlevini çağırın ve yalnızca true döndürürse devam edin. Bu kontrol, desteklenmeyen tarayıcı ve cihaz kombinasyonlarında kullanıcı tarafından görülebilen hataları önler. Bu yöntem, mediation: "conditional" ile navigator.credentials.get() çağrılmadan önce her sayfa yüklemesinde değerlendirilmelidir.

Kimlik doğrulayıcılar yalnızca yerleşik anahtarlar (keşfedilebilir kimlik bilgileri - resident keys) için ad ve görünen ad gibi kullanıcıya özgü verileri saklar. Yerleşik olmayan anahtarlar bu bilgileri tutmaz, bu nedenle otomatik doldurma menüsü kullanıcının seçmesi için hesap ayrıntılarını dolduramaz.

Davranış platforma göre değişir. MacOS üzerindeki Chrome boş bir otomatik doldurma açılır menüsü gösterir, macOS üzerindeki Safari giriş alanında yalnızca ince bir simge gösterir ve Android veya iOS'ta otomatik doldurma arayüzü yalnızca işletim sistemi kullanıcı alana dokunduktan sonra eşleşen kimlik bilgileri bulursa görünür. Bu değişkenlik kasıtlıdır ve WebAuthn'in gizlilik modelinin bir parçasıdır: web siteleri, kullanıcı aktif olarak bir tane seçmediği sürece bir geçiş anahtarının var olup olmadığını tespit edemez.

Global kapsamlı bir AbortController oluşturun ve sinyalini navigator.credentials.get() işlevine iletin. Kullanıcı kalıcı (modal) bir oturum açma akışı başlattığında denetleyicide .abort() işlevini çağırın. Zaten iptal edilmiş bir denetleyiciyi yeniden kullanmak WebAuthn isteğinin anında iptal edilmesine neden olacağından, Conditional UI her yeniden başladığında her zaman yeni bir AbortController örneği oluşturun.

Conditional UI hem yerel iOS hem de Android uygulamalarında çalışır. iOS iki varyantı destekler: tam ekran katman (overlay) açılır penceresi ve klavye otomatik doldurma önerisi. Android, geçiş anahtarlarını Samsung Pass veya 1Password gibi birden fazla sağlayıcıdan ortaya çıkarabilen Credential Manager API'sini kullanır.