Formları otomatik doldurma aracılığıyla geçiş anahtarıyla oturum açma

Mevcut şifre kullanıcılarını gözeterek geçiş anahtarlarından yararlanan bir oturum açma deneyimi oluşturun.

Eiji Kitamura

Geçiş anahtarları, şifreleri değiştirir ve web'deki kullanıcı hesaplarını daha güvenli, daha basit ve daha kolay kullanılır hale getirir. Ancak şifre tabanlı kimlik doğrulamadan geçiş anahtarı tabanlı kimlik doğrulamasına geçiş, kullanıcı deneyimini karmaşık hale getirebilir. Şifre anahtarları önermek için form otomatik doldurma özelliğini kullanmak, birleşik bir deneyim oluşturmanıza yardımcı olabilir.

Geçiş anahtarıyla oturum açmak için neden form otomatik doldurma özelliğini kullanmalısınız?

Geçiş anahtarı sayesinde kullanıcılar yalnızca parmak izi, yüz veya cihaz PIN'ini kullanarak web sitelerinde oturum açabilir.

İdeal olarak, şifre 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ğrulama ve oturum açma için ekranın kilidini açabilir.

Ancak şifre tabanlı kimlik doğrulamadan geçiş anahtarı tabanlı kimlik doğrulamasına geçiş zor olabilir. Kullanıcılar geçiş anahtarlarına geçiş yaparken şifre kullananlar da olacaktır. Bu nedenle, web sitelerinin her iki kullanıcı türünü de desteklemesi gerekir. Kullanıcıların hangi sitelerde geçiş anahtarına geçiş yaptıklarını hatırlamaları beklenmemelidir. Bu nedenle, kullanıcılardan önceden hangi yöntemi kullanacaklarını seçmelerini istemek kötü bir kullanıcı deneyimi olur.

Geçiş anahtarları da yeni bir teknolojidir. Bu özellikleri açıklamak ve kullanıcıların bunları rahatça kullanabildiğinden emin olmak web siteleri için zor olabilir. Her iki sorunu da çözmek için şifrelerin otomatik olarak doldurulmasında kullanıcıların aşina olduğu deneyimlerden yararlanabiliriz.

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 dahil edebilirsiniz. Buna koşullu kullanıcı arayüzü denir ve WebAuthn standardının bir parçasıdır.

Kullanıcı, kullanıcı adı giriş alanına dokunur dokunmaz, şifre otomatik doldurma önerileriyle birlikte kayıtlı geçiş anahtarlarını vurgulayan bir otomatik doldurma önerisi iletişim kutusu açılır. Kullanıcı daha sonra bir hesap seçip cihaz ekran kilidini kullanarak oturum açabilir.

Bu sayede kullanıcılar, hiçbir şey değişmemiş gibi mevcut formla web sitenizde oturum açabilir ancak geçiş anahtarlarının ek güvenlik avantajından yararlanabilir.

İş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ışında dört bileşen bulunur: 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ı ile iletişim kuran ve arka uca getirme istekleri gönderen ön uçunuz.
• Tarayıcı: JavaScript'inizi çalıştıran kullanıcının tarayıcısı.
• Kimlik doğrulayıcı: Geçiş anahtarını oluşturup saklayan kullanıcının kimlik doğrulayıcısı. Bu cihaz, tarayıcı ile aynı cihazda (ör. Windows Hello kullanılırken) veya telefon gibi başka bir cihazda olabilir.

1. Kullanıcı ön uçta oturum açtığı anda, geçiş anahtarıyla kimlik doğrulaması yapmak için arka uçtan istek alır ve geçiş anahtarıyla kimlik doğrulamayı başlatmak için navigator.credentials.get()'ü çağırır. Bu işlem bir Promise döndürür.
2. Kullanıcı imleci oturum açma alanına yerleştirdiğinde tarayıcı, şifre anahtarlarını içeren bir şifre otomatik doldurma iletişim kutusu görüntüler. Kullanıcı geçiş anahtarı seçerse bir kimlik doğrulama iletişim kutusu görüntülenir.
3. Kullanıcı, cihazın ekran kilidini kullanarak kimliğini doğruladıktan sonra söz çözülür ve ön uçta bir genel anahtar kimlik bilgisi döndürülür.
4. Ön uç, ortak anahtar kimlik bilgisini arka uca gönderir. Arka uç, imzayı veritabanındaki eşleşen hesabın ortak anahtarıyla doğrular. İşlem başarılı olursa kullanıcı oturum açar.

Form otomatik doldurma özelliğiyle geçiş anahtarıyla kimlik doğrulama

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'ın navigator.credentials.get() API'sine yapılan koşullu çağrı, kullanıcı otomatik doldurma önerilerinden oturum açacağı hesabı seçene kadar kullanıcı arayüzü göstermez ve beklemede kalır. Kullanıcı bir geçiş anahtarı seçerse tarayıcı, oturum açma formunu doldurmak yerine söz konusu vaadi bir kimlik bilgisiyle çözer. Ardından, kullanıcının oturum açması sayfanın sorumluluğundadır.

Form giriş alanına ek açıklama ekleme

Gerekirse kullanıcı adı input alanına bir autocomplete özelliği ekleyin. Geçiş anahtarı önermesi için jeton olarak username ve webauthn öğelerini ekleyin.

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

Özellik algılama

Koşullu bir WebAuthn API çağrısı çağırmadan önce aşağıdakileri kontrol edin:

• Tarayıcı, PublicKeyCredential ile WebAuthn'u desteklemelidir.

• Tarayıcı, PublicKeyCredential.isConditionalMediationAvailable() ile 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 istem getirme

RP sunucusundan navigator.credentials.get() çağrısı için gereken bir meydan okuma alın:

• challenge: ArrayBuffer içinde sunucu tarafından oluşturulan bir istem. Bu, yeniden oynatma saldırılarını önlemek için gereklidir. Her oturum açma denemesinde yeni bir istem oluşturduğunuzdan ve belirli bir sürenin ardından veya oturum açma denemesi doğrulanamadığında bu isteği yoksayıp atladığınızdan emin olun. Bunu bir CSRF jetonu olarak düşünebilirsiniz.
• allowCredentials: Bu kimlik doğrulaması 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 iletin.

• userVerification: Cihaz ekran kilidi kullanılarak yapılan kullanıcı doğrulamasının "required", "preferred" veya "discouraged" olup olmadığını belirtir. Varsayılan değer "preferred"'tür. Bu, kimlik doğrulayıcının kullanıcı doğrulamasını atlayabileceği anlamına gelir. Bu değeri "preferred" olarak ayarlayın veya mülkü çıkarın.

Kullanıcının kimliğini doğrulamak için WebAuthn API'yi conditional işaretiyle çağırma

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 ve web siteleri kendi alanları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önderin

Kullanıcı bir hesap seçip cihazın ekran kilidini kullanmaya izin verdikten sonra, söz çözülür ve RP ön ucuna bir PublicKeyCredential nesnesi döndürülür.

Bir vaat, çeşitli nedenlerle reddedilebilir. Hataları, Error nesnesinin name özelliğine bağlı olarak uygun şekilde ele almanız gerekir:

• NotAllowedError: Kullanıcı işlemi iptal etti.
• Diğer istisnalar: Beklenmeyen bir hata oluştu. Tarayıcı, kullanıcıya bir hata iletişim kutusu gösterir.

Ortak anahtar kimlik bilgisi nesnesi aşağıdaki özellikleri içerir:

• id: Kimlik doğrulanmış geçiş anahtarı kimliğinin base64url olarak kodlanmış hali.
• rawId: Kimlik bilgisi kimliğinin ArrayBuffer sürümü.
• response.clientDataJSON: Müşteri verilerinden oluşan bir ArrayBuffer. Bu alan, istem ve RP sunucusunun doğrulaması gereken kaynak gibi bilgileri içerir.
• response.authenticatorData: Kimlik doğrulayıcı verilerinin ArrayBuffer'ı. Bu alan, RP kimliği gibi bilgileri içerir.
• response.signature: İmzanın ArrayBuffer'ı. Bu değer, kimlik bilgisinin çekirdeğidir 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 kimlikleri üzerinde dizin oluşturmaktan kaçınmak istiyorsa bu değer, kimlik bilgisi kimliği yerine kullanılabilir.
• authenticatorAttachment: Bu kimlik bilgisi yerel cihazdan geldiğinde platform döndürülür. Aksi takdirde, özellikle kullanıcı oturum açmak için telefon kullandığında cross-platform. 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 sunucusunda ortak anahtar kimlik bilgisi nesnesini işlemek için bir kitaplık kullanıyorsanız nesnenin tamamını, base64url ile kısmen kodladıktan sonra sunucuya göndermenizi öneririz.

İmzayı doğrulama

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

Eşleşen kimlik bilgisi kimliğini id özelliğiyle arayın (Kullanıcı hesabını belirlemeniz gerekiyorsa kimlik bilgisini oluştururken belirttiğiniz user.id olan userHandle özelliğini kullanın). Kimlik bilgisinin signature değerinin, depolanan ortak anahtarla doğrulanıp doğrulanamayacağına bakın. Bunun için kendi kodunuzu yazmak yerine sunucu tarafı bir kitaplık veya çözüm kullanmanızı öneririz. Açık kaynak kitaplıklarını awesome-webauth GitHub deposunda bulabilirsiniz.

Kimlik bilgisi eşleşen bir ortak anahtarla doğrulandıktan sonra kullanıcıyı oturum açmaya yönlendirin.

Sunucu tarafı geçiş anahtarı kimlik doğrulaması başlıklı makaledeki daha ayrıntılı talimatları uygulayın.

Kaynaklar

• Sunucu tarafı geçiş anahtarı kimlik doğrulaması
• Şifresiz girişler için geçiş anahtarı oluşturma
• Geçiş anahtarları
• Apple dokümanı: Web Hizmeti Aracılığıyla Kullanıcı Kimliğini Doğrulama
• Google dokümanı: Geçiş anahtarlarıyla şifresiz giriş