Credential Management API Özellik Algılama Kontrolü

Eiji Kitamura

Özet

WebAuthn, web'e ortak anahtar kimlik doğrulamasına dayalı kimlik doğrulaması getirerek güvenliğin artırılmasına yardımcı olur ve yakında Chrome, Firefox ve Edge'de (güncellenmiş özelliklerle) desteklenecektir. Ancak yeni bir Credential nesnesi türü ekler. Ancak bu nesne, kullandıkları belirli kimlik bilgisi türlerini algılamadan Credential Management API'yi kullanan web sitelerini bozabilir.

Şu anda bunu özellik algılama

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

Alternatif olarak bunları yap

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 edinmek için okumaya devam edin.

Not: Kullanıcılarınızın oturum açmak için birincil yöntem olarak Google kimliğini kullanıyorsanız Credential Management API'de oluşturulmuş tek dokunuşla kaydolma ve otomatik oturum açma JavaScript kitaplığını kullanmayı düşünebilirsiniz. Google ile oturum açma ve şifre tabanlı oturum açma işlevlerini tek bir API çağrısında birleştirir ve tek dokunuşla hesap oluşturma için destek ekler.

Credential Management API nedir?

Credential Management API (CM API), web sitelerine, çağıran kaynak için kullanıcı kimlik bilgilerini depolamak/almak üzere kullanıcı aracısının kimlik bilgisi deposuna programatik erişim izni verir.

Temel API'ler şunlardır:

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

Orijinal CM API spesifikasyonu 2 kimlik bilgisi türü tanımlar:

• PasswordCredential
• FederatedCredential

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

Bu 2 kimlik bilgisi ile web siteleri:

• Kullanıcının giriş yaptıktan hemen sonra daha önce kaydedilmiş bir şifre tabanlı veya birleşik kimlik bilgileriyle oturum açmasına (otomatik oturum açma) izin verin
• Kullanıcının oturum açmak için kullandığı şifre tabanlı veya birleşik kimlik bilgilerini depolar,
• Kullanıcının oturum açma kimlik bilgilerini güncel tutun (ör. şifre değişikliğinden sonra)

WebAuthn nedir?

WebAuthn (Web Kimlik Doğrulaması), CM API'ye ortak anahtar kimlik bilgileri ekler. Örneğin, FIDO 2.0 ile uyumlu kimlik doğrulayıcı cihazları kullanarak web sitelerine ikinci faktör kimlik doğrulamasını uygulamak için standart bir yöntem sunar.

WebAuthn, teknik anlamda CM API'yi PublicKeyCredential arayüzüyle genişletir.

Sorun nedir?

Daha önce geliştiricilere aşağıdaki kodu kullanarak CM API'yi algılama özelliği 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 olması açısından, WebAuthn'a eklenen PublicKeyCredential ürününün nasıl algılanacağı aşağıda açıklanmıştır:

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

Zaman çizelgesi

WebAuthn'un kullanıma sunulan en erken uygulaması Firefox'tur ve Mayıs 2018'in başlarında bu hizmetin kararlı hale gelmesi planlanmaktadır.

Son olarak

Sorularınız varsa @agektmr [e-mail] adresine iletin.