Credential Management API Özellik Algılama Kontrolü

Eiji Kitamura

Özet

WebAuthn, web'e herkese açık anahtar kimlik bilgisi tabanlı kimlik doğrulamayı getirerek güvenliği artırmaya yardımcı olur ve yakında Chrome, Firefox ve Edge'de (güncellenmiş spesifikasyonla) desteklenecektir. Yeni bir Credential nesnesi ekler. Ancak bu nesne, kullandıkları belirli kimlik bilgisi türlerini özellik algılamadan Kimlik Bilgisi Yönetimi API'sini kullanan web sitelerini bozabilir.

Şu anda bunu özellik algılama için yapıyorsanız

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // use CM API
}

Bunun yerine şunları yapın

if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

Örnek olarak, örnek kodda yapılan değişikliklere bakın.

Daha fazla bilgi için okumaya devam edin.

Not: Kullanıcılarınızın oturum açma yöntemi olarak birincil olarak Google kimliğini kullanıyorsanız Credential Management API'de oluşturulan tek dokunuşla kaydolma ve otomatik oturum açma JavaScript kitaplığını kullanabilirsiniz. Google ile oturum açma ve şifreye dayalı oturum açma işlemlerini tek bir API çağrısında birleştirir ve tek dokunuşla hesap oluşturma desteği ekler.

Kimlik Bilgisi Yönetimi API'si nedir?

Kimlik Bilgisi Yönetimi API'si (CM API), web sitelerine, çağıran kaynağın kullanıcı kimlik bilgilerini depolamak/geri almak için kullanıcı aracısının kimlik bilgisi deposuna programatik erişim sağlar.

Temel API'ler şunlardır:

• navigator.credentials.get()
• navigator.credentials.store()
• navigator.credentials.create()
• navigator.credentials.preventSilentAccess()

Orijinal CM API spesifikasyonunda 2 kimlik bilgisi türü tanımlanır:

• PasswordCredential
• FederatedCredential

PasswordCredential, kullanıcının kimliğini ve şifresini içeren bir kimlik bilgisidir. FederatedCredential, kullanıcının kimliğini ve kimlik sağlayıcıyı temsil eden bir dize içeren bir kimlik bilgisidir.

Web siteleri bu 2 kimlik bilgisiyle şunları yapabilir:

• Kullanıcının, siteye ulaştığı anda önceden kaydedilmiş şifre tabanlı veya birleşik kimlik bilgileriyle oturum açmasına izin verin (otomatik oturum açma).
• Kullanıcının oturum açtığı şifre tabanlı veya birleşik kimlik bilgisini depolama,
• Kullanıcının oturum açma kimlik bilgilerini güncel tutma (ör. şifre değişikliğinden sonra)

WebAuthn nedir?

WebAuthn (Web Authentication), CM API'ye ortak anahtar kimlik bilgileri ekler. Örneğin, web sitelerine FIDO 2.0 uyumlu kimlik doğrulama cihazlarını kullanarak iki faktörlü kimlik doğrulamayı uygulamak için standart bir yol sunar.

Teknik düzeyde WebAuthn, CM API'yi PublicKeyCredentialarabirimi ile genişletir.

Sorun nedir?

Daha önce geliştiricilere aşağıdaki kodu kullanarak CM API'yi özellik algılama konusunda rehberlik ediyorduk:

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  // Use CM API
}

But as you can see from the descriptions above, the `navigator.credentials` is
now expanded to support public-key credentials in addition to password
credentials and federated credentials.

The problem is that user agents don't necessarily support all kinds of
credentials. If you continue feature detect using `navigator.credentials`, your
website may break when you are using a certain credential type not supported by
the browser.

**Supported credential types by browsers**
<table class="properties with-heading-tint"><tbody><tr>
<th></th>
<th>PasswordCredential / FederatedCredential</th>
<th>PublicKeyCredential</th>
</tr><tr><th>Chrome
</th><td>Available
</td><td>In development
</td></tr><tr><th>Firefox
</th><td>N/A
</td><td>Aiming to ship on 60
</td></tr><tr><th>Edge
</th><td>N/A
</td><td>Implemented with <a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello-in-microsoft-edge/">older API</a>. New API (navigator.credentials) coming soon.
</td></tr></tbody></table>


## The solution
You can avoid this by modifying feature detection code as follows to explicitly
test for the credential type that you intend to use.

```js
if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

Örnek olarak, örnek kodda yapılan gerçek değişikliklere bakın.

Referans olarak, WebAuthn'a eklenen PublicKeyCredential değerinin nasıl algılandığını aşağıda görebilirsiniz:

if (window.PublicKeyCredential) {
    // use CM API with PublicKeyCredential added in the WebAuthn spec
}

Zaman çizelgesi

WebAuthn'ın en erken uygulandığı tarayıcı Firefox'tur ve Mayıs 2018'in başlarında kararlı hale gelmesi planlanmaktadır.

Son olarak

Sorularınız varsa @agektmr veya [e-mail] adresine gönderebilirsiniz.