Formu otomatik doldurma yoluyla geçiş anahtarıyla oturum açın

Geçiş anahtarları parolaları değiştirin ve web’deki kullanıcı hesaplarını daha güvenli, basit ve kullanımı kolay hale getirin. Ancak, parola tabanlı kimlik doğrulamadan geçiş anahtarı tabanlı kimlik doğrulamasına geçiş, kullanıcı deneyimini karmaşıklaştırabilir. Geçiş anahtarları önermek için otomatik form doldurma özelliğini kullanmak, birleşik bir deneyim oluşturmaya yardımcı olabilir.

Geçiş anahtarıyla oturum açmak için neden otomatik doldurma formunu kullanmalısınız? #

Parolayla, bir kullanıcı yalnızca parmak izi, yüz veya cihaz PIN’i kullanarak bir web sitesinde oturum açabilir.

İdeal olarak, parola kullanan kullanıcılar 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çebilir, doğrulamak ve oturum açmak için ekranın kilidini açabilir.

Ancak paroladan geçiş anahtarı tabanlı kimlik doğrulamasına geçiş zor olabilir. Kullanıcılar geçiş anahtarlarına geçiş yaptıkça, parola kullananlar olmaya devam edecek ve web sitelerinin her iki kullanıcı türünü de barındırması gerekecek. Kullanıcıların hangi sitelerde geçiş anahtarlarına geçtiklerini hatırlamaları beklenmemelidir, bu nedenle kullanıcılardan hangi yöntemi kullanacaklarını önceden seçmelerini istemek zayıf bir UX olacaktır.

Parolalar da yeni bir teknolojidir. Bunları açıklamak ve kullanıcıların bunları rahatça kullandığından emin olmak web siteleri için zor olabilir. Her iki sorunu da çözmek için parolaları otomatik doldurma konusunda tanıdık kullanıcı deneyimlerine güvenebiliriz.

koşullu kullanıcı arayüzü #

Hem geçiş anahtarı hem de parola kullanıcıları için verimli bir kullanıcı deneyimi oluşturmak üzere otomatik doldurma önerilerine geçiş anahtarları ekleyebilirsiniz. buna denir koşullu kullanıcı arayüzü ve bu bir parçası WebAuthn standardı.

Kullanıcı, kullanıcı adı giriş alanına dokunur dokunmaz, şifre otomatik doldurma önerileriyle birlikte saklanan geçiş anahtarlarını vurgulayan bir otomatik doldurma önerisi iletişim kutusu açılır. Kullanıcı daha sonra bir hesap seçebilir ve oturum açmak için cihaz ekran kilidini kullanabilir.

Bu şekilde, kullanıcılar hiçbir şey değişmemiş gibi mevcut formla web sitenize giriş yapabilir, ancak geçiş anahtarlarının ek güvenlik avantajı eğer bir tane varsa.

Nasıl çalışır #

Parolayla kimlik doğrulamak için şunu kullanırsınız: WebAuthn API’si.

Geçiş anahtarı kimlik doğrulama akışındaki dört bileşen şunlardır: kullanıcı:

• arka uç: Genel anahtarı ve geçiş anahtarıyla ilgili diğer meta verileri depolayan hesap veritabanını tutan arka uç sunucunuz.
• Başlangıç ​​aşaması: Tarayıcı ile iletişim kuran ve arka uca getirme isteklerini gönderen ön yüzünüz.
• Tarayıcı: Javascript’inizi çalıştıran kullanıcının tarayıcısı.
• Doğrulayıcı: Geçiş anahtarını oluşturan ve depolayan kullanıcının kimlik doğrulayıcısı. Bu, tarayıcıyla aynı cihazda (örn. Windows Hello kullanırken) veya telefon gibi başka bir cihazda olabilir.

1. Bir kullanıcı ön uca gelir gelmez, arka uçtan bir parola ile kimlik doğrulaması yapmak için bir meydan okuma talep eder ve çağrılar navigator.credentials.get() bir parola ile kimlik doğrulamayı başlatmak için. Bu bir döndürür Promise.
2. Kullanıcı imleci oturum açma alanına getirdiğinde, tarayıcı geçiş anahtarlarını içeren otomatik parola doldurma iletişim kutusunu görüntüler. Kullanıcı bir geçiş anahtarı seçerse bir kimlik doğrulama iletişim kutusu görünür.
3. Kullanıcı, cihazın ekran kilidini kullanarak kimliğini doğruladıktan sonra söz çözülür ve ön uca bir genel anahtar kimlik bilgisi döndürülür.
4. Ön uç, ortak anahtar kimlik bilgisini arka uca gönderir. Arka uç, eşleşen hesabın veritabanındaki genel anahtarına göre imzayı doğrular. Başarılı olursa, kullanıcı oturum açmıştır.

Önkoşullar #

Koşullu WebAuthn UI, iOS 16, iPadOS 16 ve macOS Ventura’da Safari’de genel olarak desteklenir. Ayrıca Android, macOS ve Windows 11 22H2’de Chrome’da mevcuttur.

Otomatik form doldurma aracılığıyla geçiş anahtarıyla kimlik doğrulaması yapın #

Bir kullanıcı oturum açmak istediğinde, koşullu bir WebAuthn yapabilirsiniz. get geçiş anahtarlarının otomatik doldurma önerilerine dahil edilebileceğini belirtmek için arayın. koşullu çağrı Web Yetkilendirmesi‘S navigator.credentials.get() API, kullanıcı arabirimini göstermez ve kullanıcı otomatik doldurma önerilerinden oturum açmak için bir hesap seçene kadar beklemede kalır. Kullanıcı bir geçiş anahtarı seçerse, tarayıcı, oturum açma formunu doldurmak yerine bir kimlik bilgisi ile taahhüdü çözecektir. Kullanıcının oturum açması sayfanın sorumluluğundadır.

Form giriş alanına açıklama ekleyin #

ekle autocomplete kullanıcı adına öznitelik input gerekirse alan. Ekle username Ve webauthn geçiş anahtarları önermesine izin vermek için belirteçleri olarak.

input type="text" name="username" autocomplete="username webauthn" ...>

Özellik algılama #

Koşullu bir WebAuthn API çağrısını başlatmadan önce şunları kontrol edin:

• Tarayıcı, WebAuthn’u destekler.
• Tarayıcı, WebAuthn koşullu kullanıcı arabirimini 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 meydan okuma getir #

Aramak için gerekli olan RP sunucusundan bir meydan okuma getirin navigator.credentials.get():

• challenge: Bir ArrayBuffer’da sunucu tarafından oluşturulan bir meydan okuma. Bu, tekrar saldırılarını önlemek için gereklidir. Her oturum açma girişiminde yeni bir sorgulama oluşturduğunuzdan emin olun ve belirli bir sürenin ardından veya bir oturum açma girişiminin doğrulanamaması durumunda bunu dikkate almayın. Bir CSRF belirteci 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 bir listeden kullanılabilir bir geçiş anahtarı seçmesine izin vermek için boş bir dizi geçirin.
• userVerification: Cihaz ekran kilidi kullanılarak kullanıcı doğrulamasının yapılıp yapılmadığını gösterir. "required", "preferred" veya "discouraged". varsayılan "preferred", bu, kimlik doğrulayıcının kullanıcı doğrulamasını atlayabileceği anlamına gelir. Bunu şuna ayarla: "preferred" veya özelliği atlayın.

ile WebAuthn API’sini çağırın conditional kullanıcının kimliğini doğrulamak için bayrak #

Arama navigator.credentials.get() kullanıcı kimlik doğrulamasını beklemeye başlamak için.

// 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: Bir RP Kimliği bir etki alanıdır ve bir web sitesi, etki alanını veya kaydedilebilir bir son eki belirtebilir. Bu değer, geçiş anahtarı oluşturulduğunda kullanılan rp.id ile eşleşmelidir.

belirtmeyi unutma mediation: 'conditional' talebi koşullu hale getirmek için.

Döndürülen ortak anahtar kimlik bilgisini RP sunucusuna gönderin #

Kullanıcı bir hesap seçtikten ve cihazın ekran kilidini kullanmaya izin verdikten sonra, bir PublicKeyCredential RP ön ucuna itiraz.

Bir söz birkaç farklı nedenden dolayı reddedilebilir. Buna bağlı olarak hataları buna göre işlemeniz gerekir. Error nesnenin name mülk:

• 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 kodlu kimliği.
• rawId: Kimlik bilgisi kimliğinin bir ArrayBuffer sürümü.
• response.clientDataJSON: İstemci verilerinin bir ArrayBuffer’ı. Bu alan, RP sunucusunun doğrulaması gereken meydan okuma ve kaynak gibi bilgileri içerir.
• response.authenticatorData: Doğrulayıcı verilerinin bir ArrayBuffer’ı. Bu alan, RP kimliği gibi bilgileri içerir.
• response.signature: İmzanın bir ArrayBuffer’ı. Bu değer, kimlik bilgilerinin özüdür ve sunucuda doğrulanması gerekir.
• response.userHandle: Oluşturma 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 kimliği yerine bu değer kullanılabilir.
• authenticatorAttachment: İadeler platform bu kimlik bilgisi yerel cihazdan geldiğinde. Aksi takdirde cross-platformözellikle ne zaman kullanıcı oturum açmak için bir telefon kullandı. Kullanıcının oturum açmak için bir telefon kullanması gerekiyorsa, yerel cihazda bir parola oluşturmasını isteyin.
• type: Bu alan her zaman "public-key".

RP sunucusunda ortak anahtar kimlik bilgisi nesnesini işlemek için bir kitaplık kullanıyorsanız, nesnenin tamamını kısmen base64url ile kodladıktan sonra sunucuya göndermenizi öneririz.

imzayı doğrula #

Sunucuda ortak anahtar kimlik bilgisini aldığınızda, nesneyi işlemek için bunu FIDO kitaplığına iletin.

Şununla eşleşen kimlik bilgisi kimliğine bakın: id özelliği (Kullanıcı hesabını belirlemeniz gerekiyorsa, userHandle olan mülk user.id kimlik bilgilerini oluştururken belirttiğiniz). Kimlik bilgilerinin olup olmadığına bakın signature saklanan genel anahtar ile doğrulanabilir. Bunu yapmak için, kendi kodunuzu yazmak yerine bir sunucu tarafı kitaplığı veya bir çözüm kullanmanızı öneririz. Açık kaynak kitaplıklarını harika webauth GitHub deposunda bulabilirsiniz..

Kimlik bilgisi, eşleşen bir ortak anahtarla doğrulandıktan sonra kullanıcının oturumunu açın.

Kaynaklar #