Chrome Geliştirici Araçları WebAuthn sekmesini nasıl oluşturduk?

Fawaz Mohammad
Fawaz Mohammad
GitHub
Nina Satragno
Nina Satragno
X

WebAuthn olarak da bilinen Web Authentication API, sunucuların kullanıcıları kaydettirmek ve kimliklerini doğrulamak için şifreler yerine ortak anahtar kriptografisini kullanmasına olanak tanır. Bu sunucularla güçlü kimlik doğrulayıcılar arasında entegrasyon sağlayarak bunu yapar. Bu kimlik doğrulayıcılar, özel fiziksel cihazlar (ör. güvenlik anahtarları) veya platformlara entegre edilmiş cihazlar (ör. parmak izi okuyucular) olabilir. WebAuthn hakkında daha fazla bilgiyi webauthn.guide adresinde bulabilirsiniz.

Geliştiricilerin karşılaştığı sorunlar

Bu projeden önce WebAuthn, Chrome'da yerel hata ayıklama desteğine sahip değildi. WebAuth kullanan bir uygulama geliştiren geliştiricilerin fiziksel kimlik doğrulayıcılara erişmesi gerekiyordu. Bu, özellikle iki nedenden dolayı zordu:

  1. Birçok farklı kimlik doğrulayıcı vardır. Çeşitli yapılandırmalar ve özelliklerde hata ayıklama, geliştiricinin birçok farklı ve bazen pahalı kimlik doğrulayıcıya erişmesini gerektiriyordu.

  2. Fiziksel kimlik doğrulayıcılar, tasarım gereği güvenlidir. Bu nedenle, durumlarını incelemek genellikle mümkün değildir.

Bu işlemi kolaylaştırmak için doğrudan Chrome DevTools'a hata ayıklama desteği ekledik.

Çözüm: yeni bir WebAuthn sekmesi

WebAuthn Geliştirici Araçları sekmesi, geliştiricilerin bu kimlik doğrulayıcıları taklit etmesine, özelliklerini özelleştirmesine ve durumlarını denetlemesine olanak tanıyarak WebAuthn'da hata ayıklamayı çok daha kolay hale getirir.

Yeni WebAuthn sekmesi

Uygulama

WebAuthn'a hata ayıklama desteğinin eklenmesi iki aşamalı bir işlemdi.

İki aşamalı süreç

1. Bölüm: WebAuthn Alanını Chrome DevTools Protokolüne Ekleme

Öncelikle, Chrome Geliştirici Araçları Protokolü'ne (CDP) WebAuthn arka ucuyla iletişim kuran bir işleyiciye bağlanan yeni bir alan uyguladık.

CDP, DevTools ön ucunu Chromium'a bağlar. Bizim durumumuzda, WebAuthn DevTools sekmesi ile Chromium'un WebAuthn uygulaması arasında köprü oluşturmak için WebAuthn alan işlemlerini kullandık.

WebAuthn alanı, tarayıcı ile gerçek Authenticator Discovery'nin bağlantısını keserek yerine sanal bir Discovery kuran sanal kimlik doğrulayıcı ortamının etkinleştirilmesine ve devre dışı bırakılmasına olanak tanır.

Ayrıca, Chromium'un WebAuthn uygulamasının bir parçası olan mevcut sanal kimlik doğrulayıcı ve sanal keşif arayüzlerine ince bir katman olarak hizmet eden yöntemleri de alanda sunuyoruz. Bu yöntemler arasında kimlik doğrulayıcı ekleme ve kaldırmanın yanı sıra kayıtlı kimlik bilgilerini oluşturma, alma ve temizleme yer alır.

(Kodu okuyun)

2. Bölüm: Kullanıcılara yönelik sekmeyi oluşturma

İkinci olarak, DevTools ön ucunda kullanıcılara yönelik bir sekme oluşturduk. Sekme, bir görünüm ve bir modelden oluşur. Otomatik olarak oluşturulan bir aracı, alanı sekmeye bağlar.

3 bileşen gerekli olsa da bunlardan yalnızca ikisiyle ilgilenmemiz gerekiyordu: model ve görüntü. 3. bileşen olan temsilci, alan eklendikten sonra otomatik olarak oluşturulur. Kısaca, aracı, ön uç ile CDP arasında aramaları taşıyan katmandır.

Model

Model, aracıyı görünüme bağlayan JavaScript katmanıdır. Bizim durumumuzda model oldukça basit. Görünümden komut alır, istekleri CDP tarafından kullanılabilecek şekilde oluşturur ve ardından aracı üzerinden gönderir. Bu istekler genellikle tek yönlüdür ve görünüme geri bilgi gönderilmez.

Ancak bazen yeni oluşturulan bir kimlik doğrulayıcı için kimlik sağlamak veya mevcut bir kimlik doğrulayıcıda depolanan kimlik bilgilerini döndürmek amacıyla modelden bir yanıt iletebiliriz.

(Kodu okuyun)

Görünüm

Yeni WebAuthn sekmesi

Geliştiricinin DevTools'a erişirken bulabileceği kullanıcı arayüzünü sağlamak için bu görünümü kullanırız. Şunları içerir:

  1. Sanal kimlik doğrulayıcı ortamını etkinleştiren bir araç çubuğu.
  2. Kimlik doğrulayıcı eklemek için bir bölüm.
  3. Oluşturulan kimlik doğrulayıcılar için bir bölüm.

(Kodu okuyun)

Sanal kimlik doğrulayıcı ortamını etkinleştirmek için araç çubuğu

toolbar

Kullanıcı etkileşimlerinin çoğu, sekmenin tamamıyla değil, tek seferde bir kimlik doğrulayıcıyla gerçekleştiğinden, araç çubuğunda sunduğumuz tek işlev, sanal ortamı açıp kapatmaktır.

Bu neden gerekli? Kullanıcının ortamı açıkça değiştirmesi önemlidir. Bunun nedeni, bu işlemin tarayıcının gerçek kimlik doğrulayıcı keşfinden bağlantısını kesmesidir. Bu nedenle, açıkken parmak izi okuyucu gibi bağlı fiziksel kimlik doğrulayıcılar tanınmaz.

Özellikle gerçek keşfin devre dışı bırakılmasını beklemeden WebAuthn sekmesine girenler için açık bir açma/kapatma düğmesinin daha iyi bir kullanıcı deneyimi sağladığına karar verdik.

Kimlik doğrulayıcılar bölümünü ekleme

Kimlik doğrulayıcılar bölümünü ekleme

Sanal kimlik doğrulayıcı ortamı etkinleştirildikten sonra geliştiriciye, sanal kimlik doğrulayıcı eklemesine olanak tanıyan bir satır içi form sunarız. Bu formda, kullanıcının kimlik doğrulayıcının protokolüne ve aktarım yöntemlerine, ayrıca kimlik doğrulayıcının yerleşik anahtarları ve kullanıcı doğrulamasını destekleyip desteklemeyeceğine karar vermesine olanak tanıyan özelleştirme seçenekleri sunuyoruz.

Kullanıcı Ekle'yi tıkladığında bu seçenekler bir araya getirilir ve kimlik doğrulayıcı oluşturma çağrısını yapan modele gönderilir. Bu işlem tamamlandıktan sonra ön uç bir yanıt alır ve ardından kullanıcı arayüzünü yeni oluşturulan kimlik doğrulayıcıyı içerecek şekilde değiştirir.

Authenticator görünümü

Authenticator görünümü

Bir kimlik doğrulayıcı her emülasyona alındığında, kimlik doğrulayıcı görünümüne onu temsil edecek bir bölüm ekleriz. Her kimlik doğrulayıcı bölümü; ad, kimlik, yapılandırma seçenekleri, kimlik doğrulayıcıyı kaldırma veya etkinleştirme düğmeleri ve bir kimlik bilgisi tablosu içerir.

Authenticator adı

Kimlik doğrulayıcının adı özelleştirilebilir ve varsayılan olarak kimliğinin son 5 karakteriyle birleştirilmiş "Kimlik Doğrulayıcı" olarak ayarlanır. Doğrulayıcının adı başlangıçta tam kimliğiydi ve değiştirilemezdi. Kullanıcının kimlik doğrulayıcıyı özelliklerine, taklit etmesi amaçlanan fiziksel kimlik doğrulayıcıya veya 36 karakterlik bir kimlikten daha kolay anlaşılır herhangi bir takma ada göre etiketleyebilmesi için özelleştirilebilir adlar uyguladık.

Kimlik bilgileri tablosu

Her kimlik doğrulayıcı bölümüne, kimlik doğrulayıcı tarafından kaydedilen tüm kimlik bilgilerini gösteren bir tablo ekledik. Her satırda, kimlik bilgisiyle ilgili bilgiler ve kimlik bilgisini kaldırmak veya dışa aktarmak için düğmeler bulunur.

Şu anda, her kimlik doğrulayıcının kayıtlı kimlik bilgilerini almak için CDP'yi sorgulayarak bu tabloları dolduracak bilgileri topluyoruz. Gelecekte, kimlik bilgisi oluşturma için bir etkinlik eklemeyi planlıyoruz.

Etkin düğmesi

Ayrıca her kimlik doğrulayıcı bölümüne bir Etkin radyo düğmesi ekledik. Kimlik bilgilerini dinleyen ve kaydeden tek kimlik doğrulayıcı, şu anda etkin olarak ayarlanmış olan kimlik doğrulayıcıdır. Bu olmadan, birden fazla kimlik doğrulayıcıya verilen kimlik bilgilerinin kaydedilmesi belirlenemez. Bu da WebAuthn'ı bunları kullanarak test etmeye çalışırken ölümcül bir kusur olur.

Etkin durumu, sanal kimlik doğrulayıcılarda SetUserPresence yöntemini kullanarak uyguladık. SetUserPresence yöntemi, belirli bir kimlik doğrulayıcı için kullanıcı varlığı testlerinin başarılı olup olmayacağını belirler. Bu özelliği devre dışı bırakırsak kimlik doğrulayıcı, kimlik bilgilerini dinleyemez. Bu nedenle, en fazla bir kimlik doğrulayıcıda (etkin olarak ayarlanan) etkinleştirildiğinden ve diğer tüm kimlik doğrulayıcılarda kullanıcı varlığının devre dışı bırakıldığından emin olarak, kesin davranışı zorlayabiliriz.

Etkin düğmeyi eklerken karşılaştığımız ilginç bir zorluk, yarış koşulundan kaçınmaktı. Aşağıdaki senaryoyu değerlendirin:

  1. Kullanıcı, X kimlik doğrulayıcısı için Etkin radyo düğmesini tıklar ve CDP'ye X'i etkin olarak ayarlaması için bir istek gönderir. X için Etkin radyo düğmesi seçili, diğerlerinin tümü ise devre dışıdır.

  2. Hemen ardından kullanıcı, Y kimlik doğrulayıcısı için Etkin radyo düğmesini tıklar ve CDP'ye Y'yi etkin olarak ayarlaması için bir istek gönderir. Y için Etkin radyo düğmesi seçilidir ve X dahil diğer tüm düğmelerin seçimi kaldırılmıştır.

  3. Arka uçta, Y değerini etkin olarak ayarlama çağrısı tamamlanır ve çözülür. Y artık etkindir ve diğer tüm kimlik doğrulayıcılar devre dışıdır.

  4. Arka uçta, X'i etkin olarak ayarlama çağrısı tamamlanır ve çözülür. X artık etkindir ve Y dahil diğer tüm kimlik doğrulayıcılar devre dışıdır.

Sonuç olarak şu durum ortaya çıkar: X, etkin kimlik doğrulayıcıdır. Ancak X için Etkin radyo düğmesi seçili değil. Y, etkin kimlik doğrulayıcı değildir. Ancak Y için Etkin radyo düğmesi seçilmiştir. Kullanıcı arayüzü ile kimlik doğrulayıcıların gerçek durumu arasında uyuşmazlık var. Bu bir sorun.

Çözümümüz: Radyo düğmeleri ile etkin kimlik doğrulayıcı arasında sözde iki yönlü iletişim kurun. Öncelikle, şu anda etkin olan kimlik doğrulayıcının kimliğini takip etmek için görünümde bir activeId değişkeni tutarız. Ardından, bir kimlik doğrulayıcıyı etkinleştirme çağrısının geri dönmesini bekleyip activeId değerini bu kimlik doğrulayıcının kimliğine ayarlarız. Son olarak, her kimlik doğrulayıcı bölümünü döngüden geçiririz. Söz konusu bölümün kimliği activeId ise düğmeyi seçili olarak ayarlarız. Aksi takdirde düğmeyi "seçilmedi" olarak ayarlıyoruz.

Bu durum aşağıdaki gibi görünür:


 async _setActiveAuthenticator(authenticatorId) {
   await this._clearActiveAuthenticator();
   await this._model.setAutomaticPresenceSimulation(authenticatorId, true);
   this._activeId = authenticatorId;
   this._updateActiveButtons();
 }
 
 _updateActiveButtons() {
   const authenticators = this._authenticatorsView.getElementsByClassName('authenticator-section');
   Array.from(authenticators).forEach(authenticator => {
     authenticator.querySelector('input.dt-radio-button').checked =
         authenticator.getAttribute('data-authenticator-id') === this._activeId;
   });
 }
 
 async _clearActiveAuthenticator() {
   if (this._activeId) {
     await this._model.setAutomaticPresenceSimulation(this._activeId, false);
   }
   this._activeId = null;
 }

Kullanım metrikleri

Bu özelliğin kullanımını izlemek istedik. Başlangıçta iki seçenek belirledik.

  1. DevTools'taki WebAuthn sekmesinin her açılışını sayın. Kullanıcılar sekmeyi gerçekten kullanmadan açabileceğinden bu seçenek, aşırı sayıma neden olabilir.

  2. Araç çubuğundaki "Sanal kimlik doğrulayıcı ortamını etkinleştir" onay kutusunun kaç kez etkinleştirildiğini izleyin. Bazı kullanıcılar aynı oturumda ortamı birden çok kez açıp kapatabileceğinden bu seçenekte de fazla sayma sorunu yaşanabilir.

Sonunda ikinci seçeneği tercih etmeye karar verdik ancak ortamın oturumda etkinleştirilip etkinleştirilmediğini kontrol ederek sayımı kısıtladık. Bu nedenle, geliştiricinin ortamı kaç kez değiştirdiğine bakılmaksızın sayıyı yalnızca 1 artırırız. Bu yöntemin işe yaramasının nedeni, sekme her yeniden açıldığında yeni bir oturum oluşturulmasıdır. Bu sayede, kontrol sıfırlanır ve metriğin tekrar artmasına izin verilir.

Özet

Bu e-postayı okuduğunuz için teşekkür ederiz. WebAuthn sekmesini iyileştirmeyle ilgili önerileriniz varsa hata kaydı göndererek bize bildirin.

WebAuthn hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklardan yararlanabilirsiniz:

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanıza yardımcı olur.

Chrome Geliştirici Araçları Ekibi ile iletişime geçme

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.