Geçiş anahtarlarından yararlanırken mevcut şifre kullanıcılarını kullanmaya devam eden bir oturum açma deneyimi oluşturun.
Geçiş anahtarları şifrelerin yerini alır ve web'deki kullanıcı hesaplarının daha güvenli, basit ve kullanımı kolay olmasını sağlar. Ancak şifre tabanlı kimlik doğrulama yönteminden geçiş anahtarı tabanlı kimlik doğrulamaya geçiş, kullanıcı deneyimini karmaşık hale getirebilir. Geçiş anahtarı önermek için form otomatik doldurmayı kullanmak, birleşik bir deneyim oluşturmanıza yardımcı olabilir.
Geçiş anahtarıyla oturum açmak için formu otomatik doldurma özelliği neden kullanılmalıdır?
Geçiş anahtarı sayesinde kullanıcılar parmak izi, yüz veya cihaz PIN'ini kullanarak web sitesinde oturum açabilir.
İdeal koşullarda şifre kullanıcısı olmaz ve kimlik doğrulama akışı tek bir oturum açma düğmesi kadar basit olabilir. Kullanıcı düğmeye dokunduğunda bir hesap seçici iletişim kutusu açılır. Kullanıcı bir hesap seçip ekranın kilidini açarak doğrulamayı ve oturum açabilir.
Ancak şifreden geçiş anahtarı tabanlı kimlik doğrulamaya geçiş zor olabilir. Kullanıcılar geçiş anahtarına geçtikçe şifre kullanan kişilerin ve web sitelerinin her iki kullanıcı türünü de barındırması gerekecektir. Kullanıcıların geçiş anahtarlarına geçiş yaptıkları siteleri hatırlamaları beklenmemelidir. Bu nedenle, kullanıcılardan en başta hangi yöntemi kullanacaklarını seçmelerini istemek kötü bir kullanıcı deneyimi olacaktır.
Geçiş anahtarları da yeni bir teknolojidir. Bunları açıklamak ve kullanıcıların rahatça kullanabileceğinden emin olmak web siteleri için zor olabilir. Her iki sorunu da çözmek için şifreleri otomatik olarak doldurma konusunda tanıdık kullanıcı deneyimlerine güvenebiliriz.
Koşullu kullanıcı arayüzü
Hem geçiş anahtarı hem de şifre kullanıcıları için verimli bir kullanıcı deneyimi oluşturmak amacıyla geçiş anahtarlarını otomatik doldurma önerilerine ekleyebilirsiniz. Buna koşullu kullanıcı arayüzü adı verilir ve WebAuthn standardının bir parçasıdır.
Kullanıcı, kullanıcı adı giriş alanına dokunduğunda otomatik doldurma önerisi iletişim kutusu açılır. Bu iletişim kutusunda kayıtlı geçiş anahtarları ve otomatik şifre doldurma önerileri vurgulanır. Kullanıcı daha sonra bir hesap seçebilir ve oturum açmak için cihazın ekran kilidini kullanabilir.
Böylece kullanıcılar web sitenizde hiçbir şey değişmemiş gibi mevcut formla, ancak varsa geçiş anahtarlarının sağladığı ek güvenlik avantajından oturum açabilir.
İşleyiş şekli
Geçiş anahtarıyla kimlik doğrulamak için WebAuthn API'yi kullanırsınız.
Geçiş anahtarı kimlik doğrulama akışındaki dört bileşen şunlardır: kullanıcı:
- Arka uç: Ortak anahtarı ve geçiş anahtarıyla ilgili diğer meta verileri depolayan hesap veritabanını barındıran arka uç sunucunuz.
- Ön uç: Tarayıcıyla iletişim kuran ve getirme isteklerini arka uca gönderen ön ucunuz.
- Tarayıcı: Kullanıcının JavaScript'inizi çalıştıran tarayıcısı.
- Authenticator: Geçiş anahtarını oluşturup saklayan, kullanıcının kimlik doğrulayıcısı. Bu işlem, tarayıcıyla aynı cihazda (ör. Windows Hello kullanırken) veya telefon gibi başka bir cihazda olabilir.
- Kullanıcı ön uca ulaşır ulaşmaz, geçiş anahtarıyla kimlik doğrulamak için arka uçtan bir sorgulama ister ve geçiş anahtarıyla kimlik doğrulama başlatmak için
navigator.credentials.get()yöntemini çağırır. Bu, birPromisedöndürür. - Kullanıcı, imleci oturum açma alanına getirdiğinde tarayıcı, geçiş anahtarlarını içeren bir şifre otomatik doldurma iletişim kutusu görüntüler. Kullanıcı bir geçiş anahtarı seçerse kimlik doğrulama iletişim kutusu görüntülenir.
- Kullanıcı, cihazın ekran kilidini kullanarak kimliğini doğruladıktan sonra, söz konusu çözüm sonlandırılır ve ortak anahtar kimlik bilgisi ön uca döndürülür.
- Ön uç, ortak anahtar kimlik bilgilerini arka uca gönderir. Arka uç, imzayı veritabanındaki eşleşen hesabın ortak anahtarıyla karşılaştırarak doğrular. Başarılı olursa kullanıcı oturum açmış demektir.
Ön koşullar
Koşullu WebAuthn kullanıcı arayüzü, iOS 16, iPadOS 16 ve macOS Ventura'daki Safari'de herkese açık bir şekilde desteklenmektedir. Ayrıca Android, macOS ve Windows 11'in 22H2 sürümlerini çalıştıran Chrome'da da kullanılabilir.
Form otomatik doldurma özelliğini kullanarak geçiş anahtarıyla kimlik doğrulayın
Bir kullanıcı oturum açmak istediğinde geçiş anahtarlarının otomatik doldurma önerilerine dahil edilebileceğini belirtmek için koşullu bir WebAuthn get çağrısı yapabilirsiniz. WebAuthn'un navigator.credentials.get() API'sine yapılan koşullu çağrı kullanıcı arayüzünü göstermez ve kullanıcı, otomatik doldurma önerilerinden oturum açmak için bir hesap seçinceye kadar beklemede kalır. Kullanıcı bir geçiş anahtarı seçerse tarayıcı, oturum açma formunu doldurmak yerine sözü kimlik bilgileriyle çözer. Bu durumda, kullanıcının oturum açmasını
sağlamak sayfanın sorumluluğundadır.
Form giriş alanına ek açıklama ekle
Gerekirse kullanıcı adı input alanına autocomplete özelliği ekleyin.
Geçiş anahtarı önerebilmesi için username ve webauthn kodlarını jeton olarak ekleyin.
<input type="text" name="username" autocomplete="username webauthn" ...>
Özellik algılama
Koşullu WebAuthn API çağrısı çağırmadan önce şunları kontrol edin:
- Tarayıcı WebAuthn'u destekliyor.
- Tarayıcı, WebAuthn koşullu kullanıcı arayüzünü destekler.
// 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
}
}
RP sunucusundan bir giriş sorgulaması al
RP sunucusundan navigator.credentials.get() çağırmak için gereken bir sorgulama alın:
challenge: ArrayBuffer'da sunucu tarafından oluşturulan bir sorgulama. Bu, tekrar oynatma saldırılarını önlemek için gereklidir. Her oturum açma denemesinde yeni bir sorgu oluşturduğunuzdan emin olun ve belirli bir süre sonra veya oturum açma denemesi doğrulanamadıktan sonra bunu yoksayın. Bunu bir CSRF jetonu gibi düşünün.allowCredentials: Bu kimlik doğrulama için kabul edilebilir kimlik bilgileri dizisi. Kullanıcının, tarayıcı tarafından gösterilen listeden kullanılabilir bir geçiş anahtarı seçmesine izin vermek için boş bir dizi iletin.userVerification: Cihaz ekran kilidi kullanılarak yapılan kullanıcı doğrulama işleminin"required","preferred"veya"discouraged"olduğunu belirtir. Varsayılan değer"preferred"şeklindedir. Bu, kimlik doğrulayıcının kullanıcı doğrulamasını atlayabileceği anlamına gelir. Bunu"preferred"olarak ayarlayın veya özelliği atlayın.
Kullanıcının kimliğini doğrulamak için conditional işaretiyle birlikte WebAuthn API'yi çağırın
Kullanıcı kimlik doğrulamasını beklemeye başlamak için navigator.credentials.get() numaralı telefonu arayın.
// To abort a WebAuthn call, instantiate an `AbortController`.
const abortController = new AbortController();
const publicKeyCredentialRequestOptions = {
// Server generated challenge
challenge: ****,
// The same RP ID as used during registration
rpId: 'example.com',
};
const credential = await navigator.credentials.get({
publicKey: publicKeyCredentialRequestOptions,
signal: abortController.signal,
// Specify 'conditional' to activate conditional UI
mediation: 'conditional'
});
rpId: RP kimliği bir alandır. Web sitesi, kendi alanını veya kaydedilebilir bir son eki belirtebilir. Bu değer, geçiş anahtarı oluşturulurken kullanılan rp.id ile eşleşmelidir.
İsteği koşullu hale getirmek için mediation: 'conditional' değerini belirtmeyi unutmayın.
Döndürülen ortak anahtar kimlik bilgisini RP sunucusuna gönder
Kullanıcı bir hesap seçtikten ve cihazın ekran kilidini kullanarak izin verdikten sonra, RP ön ucuna bir PublicKeyCredential nesnesi döndürme sözü çözümlenir.
Bir söz, birkaç farklı nedenden dolayı reddedilebilir. Hataları, Error nesnesinin name özelliğine bağlı olarak uygun şekilde işlemeniz gerekir:
NotAllowedError: Kullanıcı, işlemi iptal etti.- Diğer istisnalar: Beklenmedik bir şey oldu. Tarayıcı, kullanıcıya bir hata iletişim kutusu gösterir.
Ortak anahtar kimlik bilgisi nesnesi aşağıdaki özellikleri içerir:
id: Kimliği doğrulanmış geçiş anahtarı kimlik bilgisinin base64url kodlanmış kimliği.rawId: Kimlik bilgisi kimliğinin bir ArrayBuffer sürümü.response.clientDataJSON: İstemci verilerinden oluşan bir ArrayBuffer. Bu alanda, RP sunucusunun doğrulaması gereken meydan okuma ve kaynak gibi bilgiler yer alır.response.authenticatorData: Kimlik doğrulayıcı verilerinden oluşan bir ArrayBuffer. Bu alanda RP kimliği gibi bilgiler bulunur.response.signature: İmzanın bir ArrayBuffer'ı. Bu değer, kimlik bilgisinin temelini oluşturur ve sunucuda doğrulanması gerekir.response.userHandle: Oluşturulma sırasında ayarlanan kullanıcı kimliğini içeren bir ArrayBuffer. Sunucunun kullandığı kimlik değerlerini seçmesi gerekiyorsa veya arka uç, kimlik bilgisi kimlikleri üzerinde bir dizin oluşturmaktan kaçınmak istiyorsa, kimlik bilgisi yerine bu değer kullanılabilir.authenticatorAttachment: Bu kimlik bilgisi yerel cihazdan geldiğindeplatformdeğerini döndürür. Aksi takdirdecross-platform(özellikle kullanıcı oturum açmak için telefon kullandığında). Kullanıcının oturum açmak için telefon kullanması gerekiyorsa yerel cihazda geçiş anahtarı oluşturmasını isteyebilirsiniz.type: Bu alan her zaman"public-key"olarak ayarlanır.
RP sunucusundaki ortak anahtar kimlik bilgisi nesnesini işlemek için bir kitaplık kullanıyorsanız, nesneyi base64url ile kısmen kodladıktan sonra tüm nesneyi sunucuya göndermenizi öneririz.
İmzayı doğrulayın
Sunucuda ortak anahtar kimlik bilgisini aldığınızda, nesneyi işlemek için FIDO kitaplığına geçirin.
id özelliğiyle eşleşen kimlik bilgisi kimliğini arayın (Kullanıcı hesabını belirlemeniz gerekiyorsa kimlik bilgisini oluştururken belirttiğiniz user.id özelliği olan userHandle özelliğini kullanın). Kimlik bilgilerinin signature saklanan ortak anahtarla doğrulanıp doğrulanamayacağına bakın. Bunun için kendi kodunuzu yazmak yerine bir sunucu tarafı kitaplığı veya bir çözüm kullanmanızı öneririz. Açık kaynak kitaplıkları, Awesome-webauth GitHub deposunda bulabilirsiniz.
Kimlik bilgisi eşleşen bir ortak anahtarla doğrulandıktan sonra kullanıcının oturum açmasını sağlayın.