Credential Management API özellik algılama kontrolü

Eiji Kitamura

Özet

WebAuthn, web'e ortak anahtar kimlik bilgisi tabanlı kimlik doğrulama 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 türü ekler. Ancak bu, kullandıkları belirli kimlik bilgisi türlerini özellik algılama olmadan Credential Management API'yi kullanan web sitelerini bozabilir.

Özellik algılama için şu anda bu yöntemi kullanı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 kodda yapılan değişiklikleri inceleyin.

Daha fazla bilgi edinmek için okumaya devam edin.

Not: Kullanıcılarınızın oturum açması için birincil yöntem olarak Google Identity'yi kullanıyorsanız Credential Management API üzerine inşa edilen tek dokunuşla kaydolma ve otomatik oturum açma JavaScript kitaplığını kullanabilirsiniz. Google ile oturum açma ve şifre tabanlı oturum açma özelliklerini tek bir API çağrısında birleştirir ve tek dokunuşla hesap oluşturma desteği ekler.

Credential Management API nedir?

Credential Management API (CM API), web sitelerine kullanıcı aracısının kimlik bilgileri deposuna programatik erişim sağlar. Bu sayede, çağıran kaynak için kullanıcı kimlik bilgileri depolanabilir ve alınabilir.

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ının kimliğini ve bir kimlik sağlayıcıyı temsil eden dizeyi içeren bir kimlik bilgisidir.

Web siteleri bu 2 kimlik bilgisiyle şunları yapabilir:

• Kullanıcının, siteye girer girmez daha önce kaydedilmiş şifre tabanlı veya birleştirilmiş kimlik bilgileriyle oturum açmasına izin verme (otomatik oturum açma)
• Kullanıcının oturum açmak için kullandığı şifre tabanlı veya birleştirilmiş kimlik bilgisini saklama
• Kullanıcının oturum açma kimlik bilgilerini güncel tutma (ör. şifre değişikliğinden sonra)

WebAuthn nedir?

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

Teknik olarak WebAuthn, CM API'yi PublicKeyCredential arayüzüyle genişletir.

Problem nedir?

Daha önce geliştiricilere, aşağıdaki kodu kullanarak CM API'yi özellik algılamaya yönlendiriyorduk:

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 browser<s**
table class="properties with-head><ing-t><in>t<&q><uot>;<tb>odytr
th/th
thPasswordCredential / Feder<ate>d<Cr>edential/th
thPubli<cKe>y<Cre><de><nt>ial/th
</tr><tr>thChrome
/<tht><dA>vailable
/tdtdI<n d><eve><lo><pm>ent
/td/<trt><rt>hFir<efo><x<>/span>
/thtdN/A
/tdtdAiming <to ><shi><p ><on> 60
/<td/><tr>trth<Edg><e<>/span>
/thtdN/A
/tdtdImp<lemented with a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello->in-micros<of>t-edge/"older API/a. New API (navigator.cr<ede><nti><als) c><oming >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 kodda yapılan gerçek değişiklikleri örnek olarak inceleyin.

Referans olarak, WebAuthn'de eklenen PublicKeyCredential öğesinin nasıl tespit edileceği aşağıda açıklanmıştır:

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

Zaman çizelgesi

WebAuthn'nin kullanılabilir en erken uygulaması Firefox'tur ve Mayıs 2018'in başlarında kararlı olması planlanmaktadır.

Son olarak

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