WebAuthn olarak da bilinen Web Authentication API, sunucuların kullanıcıları kaydetmek ve kimliklerini doğrulamak için şifreler yerine ortak anahtar kriptografisini kullanmasına olanak tanır. Bunu, bu sunucular ve güçlü kimlik doğrulayıcılar arasındaki entegrasyonu etkinleştirerek yapar. Bu kimlik doğrulayıcılar, özel fiziksel cihazlar (ör. güvenlik anahtarları) veya platformlarla entegre edilmiş (ör. parmak izi okuyucular) olabilir. webauthn.guide adresinden WebAuthn hakkında daha fazla bilgi edinebilirsiniz.
Geliştiriciler için sorunlu noktalar
Bu projeden önce WebAuthn, Chrome'da yerel hata ayıklama desteği sunmuyordu. WebAuth kullanan bir uygulama geliştiren geliştirici, fiziksel kimlik doğrulayıcılara erişim gerektiriyordu. Bu, özellikle iki nedenden dolayı zordu:
Kimlik doğrulayıcıların birçok farklı türü vardır. Çeşitli yapılandırmaların ve yeteneklerin hata ayıklaması, geliştiricinin pek çok farklı ve bazen pahalı kimlik doğrulayıcıya erişmesini gerektiriyordu.
Fiziksel kimlik doğrulayıcılar, tasarımları gereği güvenlidir. Bu nedenle, bu araçların durumlarını denetlemek genellikle mümkün değildir.
Doğrudan Chrome Geliştirici Araçları'na hata ayıklama desteğini ekleyerek bu işlemi kolaylaştırmak istedik.
Çözüm: Yeni bir WebAuthn sekmesi
WebAuthn DevTools sekmesi, geliştiricilerin bu kimlik doğrulayıcıları öykünmelerine, özelliklerini özelleştirmelerine ve durumlarını denetlemelerine olanak tanıyarak WebAuthn hata ayıklamasını çok daha kolay hale getirir.
Uygulama
WebAuthn'a hata ayıklama desteği eklemek iki bölümden oluşan bir süreçti.
1. Bölüm: Chrome Geliştirici Araçları Protokolü'ne WebAuthn Alanı Ekleme
İlk olarak Chrome Geliştirici Araçları Protokolü'nde (CDP), WebAuthn arka ucuyla iletişim kuran bir işleyiciye bağlanan yeni bir alan adı uyguladık.
CDP, Geliştirici Araçları kullanıcı arabirimini Chromium'a bağlar. Örneğimizde, WebAuthn Geliştirici Araçları sekmesi ile Chromium'un WebAuthn uygulaması arasında köprü kurmak için WebAuthn alan adı eylemlerini kullandık.
WebAuthn alanı, Sanal Kimlik Doğrulama Ortamı'nın etkinleştirilmesine ve devre dışı bırakılmasına olanak tanır. Bu ortam, tarayıcının gerçek Authenticator keşfi ile bağlantısını keser ve bunun yerine bir Sanal Keşif uygular.
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 katman işlevi gören alan adında yöntemler de sunarız. Bu yöntemler arasında kimlik doğrulayıcıları ekleyip kaldırmanın yanı sıra kayıtlı kimlik bilgileri oluşturma, alma ve temizleme yer alır.
(Kodu okuyun)
2. Bölüm: Kullanıcılara yönelik sekme 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 oluşturulan bir aracı, alanı sekmeye bağlar.
Gereken 3 bileşen olsa da bizim için yalnızca iki bileşenle ilgili endişe duymamız gerekiyordu: model ve görünüm. 3. bileşen olan aracı, alan eklendikten sonra otomatik olarak oluşturulur. Kısaca özetlemek gerekirse aracı, ön uç ile CDP arasında çağrıları taşıyan katmandır.
Model
Model, aracı ile görünümü birbirine bağlayan JavaScript katmanıdır. Örneğimiz için bu model oldukça basit. Görünümden komutları alır, CDP tarafından kullanılabilecek şekilde istekler oluşturur ve ardından bunları aracı aracılığıyla gönderir. Bu istekler genellikle tek yönlüdür ve hiçbir bilgi görünüme geri gönderilmez.
Ancak, bazen yeni oluşturulan bir kimlik doğrulayıcıya kimlik sağlamak veya mevcut bir kimlik doğrulayıcıda depolanan kimlik bilgilerini döndürmek için modelden bir yanıt göndeririz.
(Kodu okuyun)
Görünüm
Görünümü, geliştiricilerin Geliştirici Araçları'na erişirken bulabileceği kullanıcı arayüzünü sağlamak için kullanırız. Şunları içerir:
- Sanal kimlik doğrulayıcı ortamını etkinleştirmek için bir araç çubuğu.
- Kimlik doğrulayıcılar eklemek için bir bölüm.
- 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 kullanılan araç çubuğu
Kullanıcı etkileşimlerinin çoğu, sekmenin tamamı yerine, aynı anda tek bir kimlik doğrulayıcıyla gerçekleştiğinden, araç çubuğunda sağladığımız tek işlev, sanal ortamı açıp kapatmaktır.
Bu neden gerekli? Bu işlem, tarayıcının gerçek Authenticator Keşfi ile bağlantısını keseceğinden kullanıcının ortam ayarını açık bir şekilde değiştirmesi önemlidir. Bu nedenle, bu özellik açıkken parmak izi okuyucu gibi bağlı fiziksel kimlik doğrulayıcılar tanınmaz.
Açık bir açma/kapatma anahtarının, özellikle de gerçek keşfin devre dışı bırakılmasını beklemeden WebAuthn sekmesinde gezinen kullanıcılar için daha iyi bir kullanıcı deneyimi anlamına geldiğine karar verdik.
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ı eklemelerine 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 karar vermesine ve kimlik doğrulayıcının yerleşik anahtarları ve kullanıcı doğrulamasını destekleyip desteklemediğine karar vermesine olanak tanıyan özelleştirme seçenekleri sunarız.
Kullanıcı Ekle'yi tıkladığında, bu seçenekler paketlenir ve kimlik doğrulayıcı oluşturma çağrısını yapan modele gönderilir. Bu işlem tamamlandıktan sonra, kullanıcı arabirimi 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ü
Bir kimlik doğrulayıcının emüle edildiği her seferde, 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ünde bir ad, kimlik, yapılandırma seçenekleri, kimlik doğrulayıcıyı kaldırmak veya etkin olarak ayarlamak için kullanılan düğmeler ve bir kimlik bilgisi tablosu bulunur.
Kimlik doğrulayıcının adı
Kimlik doğrulayıcının adı özelleştirilebilir ve varsayılan olarak kimliğinin son 5 karakteriyle birleştirilmiş "Authenticator" olur. İlk başta, kimlik doğrulayıcının tam kimliği olduğu için bu ad değiştirilemez. Kullanıcıların kimlik doğrulayıcıyı yeteneklerine, emülasyonu amaçlanan fiziksel kimlik doğrulayıcısına veya 36 karakterli kimlikten biraz daha kolay anlaşılan 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 bilgileriyle ilgili bilgilerin yanı sıra kimlik bilgisini kaldırmak veya dışa aktarmak için düğmeler de sağlarız.
Şu anda, her kimlik doğrulayıcının kayıtlı kimlik bilgilerini almak için CDP'yi yoklayarak bu tabloların doldurulması için gereken bilgileri topluyoruz. Gelecekte kimlik bilgileri oluşturmak için bir etkinlik eklemeyi planlıyoruz.
Etkin düğmesi
Ayrıca, her kimlik doğrulayıcı bölümüne Etkin radyo düğmesi de ekledik. Kimlik bilgilerini dinleyen ve kaydeden tek kimlik, geçerli olarak etkin olarak ayarlanmış kimlik doğrulayıcı olur. Bu olmadan, birden fazla kimlik doğrulayıcının verildiği kimlik bilgilerinin kaydedilmesi belirleyici olmayacak ve bu kimlikler kullanılarak WebAuthn'u test edilirken kritik hatalar ortaya çıkacaktır.
Sanal kimlik doğrulayıcılarda SetUserPresence yöntemini kullanarak etkin durumu uyguladık. SetUserPresence yöntemi, kullanıcı varlığı testlerinin belirli bir kimlik doğrulayıcı için başarılı olup olmadığını belirler. Bu özelliği kapatırsak kimlik doğrulayıcılar, kimlik bilgilerini dinleyemez. Bu nedenle, en fazla bir kimlik doğrulayıcı (etkin olarak ayarlanmış) için etkin olduğundan emin olarak ve diğer tüm kimlik doğrulayıcılarda kullanıcı varlığını devre dışı bırakarak belirleyici davranışı zorunlu kılabiliriz.
Etkin düğmesini eklerken karşılaştığımız ilginç bir zorluk, yarış koşulundan kaçınmaktı. Aşağıdaki senaryoyu inceleyin:
Kullanıcı, X Authenticator'ın Etkin radyo düğmesini tıklayarak CDP'ye X'in etkin olarak ayarlanması için istek gönderir. X için Etkin radyo düğmesi seçilir ve diğer tüm öğelerin seçimi kaldırılır.
Hemen sonra kullanıcı, Y Authenticator'ın Etkin radyo düğmesini tıklar ve Y'nin etkin olarak ayarlanması için CDP'ye bir istek gönderir. Y için Etkin radyo düğmesi seçilidir ve X için dahil olmak üzere diğer tüm öğelerin seçimi kaldırılır.
Arka uçta, Y'yi etkin olarak ayarlama çağrısı tamamlanır ve çözümlenir. Y artık etkin ve diğer kimlik doğrulayıcılar etkin değil.
Arka uçta, X'i etkin olarak ayarlama çağrısı tamamlanır ve çözümlenir. X artık etkin ve Y dahil diğer kimlik doğrulayıcılar etkin değil.
Sonuç olarak ortaya çıkan durum şöyle olur: X, etkin kimlik doğrulayıcı olur. Ancak, X için Etkin radyo düğmesi seçili değildir. Kimlik doğrulayıcı etkin değildir. Ancak, Y için Etkin radyo düğmesi seçili. Kullanıcı arabirimi ile kimlik doğrulayıcıların gerçek durumu arasında uyuşmazlık var. Bu elbette bir sorun.
Çözümümüz: Radyo düğmeleri ve etkin kimlik doğrulayıcı arasında yapay, iki yönlü iletişim oluşturun. Öncelikle, geçerli olarak etkin olan kimlik doğrulayıcının kimliğini izlemek için görünümde bir activeId değişkeni kullanırız. Ardından, görüşmenin geri dönen bir kimlik doğrulayıcıyı etkin olarak ayarlamasını bekleriz, ardından activeId değerini bu kimlik doğrulayıcının kimliğine ayarlarız. Son olarak, kimlik doğrulayıcı bölümlerin her birini döngüye alırız. Bu bölümün kimliği activeId değerine eşitse düğmeyi seçili olarak ayarlarız. Aksi takdirde, düğme seçili değil olarak ayarlanır.
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 sunmuştuk.
Geliştirici Araçları'ndaki WebAuthn sekmesinin her açılışında sayın. Birisi, sekmeyi gerçekten kullanmadan açabileceğinden bu seçenek fazla sayıma yol açabilir.
Araç çubuğundaki "Sanal kimlik doğrulayıcı ortamını etkinleştir" onay kutusunun kaç kez açıldığını izleyin. Bazıları aynı oturumda ortamı birden çok kez açıp kapatabileceğinden bu seçenekte fazla sayım sorunu da vardı.
Sonuç olarak ikinci seçeneği kullanmaya karar verdik, ancak ortamın oturumda önceden etkinleştirilip etkinleştirilmediğini kontrol ederek sayımı kısıtladık. Bu nedenle, geliştiricinin ortamı kaç kez değiştirdiğinden bağımsız olarak sayı yalnızca 1 artar. Bunun nedeni, sekme her yeniden açıldığında yeni bir oturumun oluşturulması ve böylece denetimin sıfırlanması ve metriğin tekrar artırılmasının sağlanmasıdır.
Özet
Okuduğunuz için teşekkür ederiz. WebAuthn sekmesini iyileştirmeye yönelik önerileriniz varsa bir hata bildiriminde bulunarak bize bildirin.
WebAuthn hakkında daha fazla bilgi edinmek isterseniz aşağıdaki kaynaklardan yararlanabilirsiniz:
- WebAuthn DevTools kullanıcı arabirimi tasarım dokümanı
- Web Kimlik Doğrulama testi API tasarım belgesi
- Web Authentication API (WebAuthn) spesifikasyonu
- WebAuthn'un açıklaması ve kılavuzu
Ö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ı ile Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz.
Chrome Geliştirici Araçları ekibiyle iletişime geçme
Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.
- crbug.com adresinden bize öneri veya geri bildirim gönderin.
- Geliştirici Araçları'nda Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
- @ChromeDevTools adresine tweet gönderin.
- Geliştirici Araçları YouTube videoları bölümündeki yenilikler veya Geliştirici Araçları İpuçları YouTube videoları bölümlerimize yorum yapın.