Kimlik bilgisi yönetimi API'sindeki son güncellemeler

Eiji Kitamura

Burada açıklanan güncellemelerden bazıları, Güvenli ve Sorunsuz Oturum Açma: Kullanıcıların Etkileşimini Sürdürme adlı Google I/O oturumunda açıklanmıştır:

Chrome 57

Chrome 57, Credential Management API'de bu önemli değişikliği yaptı.

Kimlik bilgileri farklı bir alt alan adından paylaşılabilir

Chrome artık Credential Management API'yi kullanarak farklı bir alt alan adında depolanan kimlik bilgilerini alabilir. Örneğin, bir şifre login.example.com adresinde saklanıyorsa www.example.com adresindeki bir komut dosyası, hesap seçici iletişim kutusunda bu şifreyi hesap öğelerinden biri olarak gösterebilir.

Şifreyi navigator.credentials.store() kullanarak açıkça saklamanız gerekir. Böylece, kullanıcı iletişim kutusuna dokunarak bir kimlik bilgisi seçtiğinde şifre iletilir ve mevcut kaynağa kopyalanır.

Şifre, depolandıktan sonra aynı kaynakta (www.example.com) kimlik bilgisi olarak kullanılabilir.

Aşağıdaki ekran görüntüsünde, login.aliexpress.com altında depolanan kimlik bilgileri m.aliexpress.com tarafından görülebilir ve kullanıcı tarafından seçilebilir:

Chrome 60

Chrome 60, Credential Management API'da birkaç önemli değişiklik sunar:

• PasswordCredential nesnesi artık bir şifre içeriyor.

• Özel fetch() işlevi artık şifreyi almak için gerekli olmadığından yakında kullanımdan kaldırılacak.

• artık boole işareti unmediated yerine navigator.credentials.get() enum mediation kabul ediyor.

• requireUserMediation(), preventSilentAccess() olarak yeniden adlandırıldı.

• New yöntemi navigator.credentials.create() kimlik bilgisi nesnelerini eşzamansız olarak oluşturur.

Özellik algılama dikkatinize

Şifre tabanlı ve birleştirilmiş kimlik bilgilerine erişmek için Credential Management API'nin kullanılabilir olup olmadığını görmek istiyorsanız window.PasswordCredential veya window.FederatedCredential öğesinin kullanılabilir olup olmadığını kontrol edin.

if (window.PasswordCredential || window.FederatedCredential) {
  // The Credential Management API is available
}

PasswordCredential nesnesi artık şifre içeriyor

Credential Management API, şifreleri işleme konusunda muhafazakar bir yaklaşım benimsemiştir. Şifreleri JavaScript'ten gizlediği için geliştiricilerin, fetch() API'sinin bir uzantısı aracılığıyla doğrulama yapmak üzere PasswordCredential nesnesini doğrudan sunucularına göndermeleri gerekiyordu.

Ancak bu yaklaşım, beraberinde bazı kısıtlamalar getirdi. Geliştiricilerin API'yi kullanamadığına dair geri bildirimler aldık. Bunun nedenleri:

• Şifreyi bir JSON nesnesinin parçası olarak göndermeleri gerekiyordu.

• Şifrenin karma değerini sunucularına göndermeleri gerekiyordu.

Güvenlik analizi yaptıktan ve şifreleri JavaScript'ten gizlemenin tüm saldırı vektörlerini umduğumuz kadar etkili bir şekilde engellemediğini fark ettikten sonra bir değişiklik yapmaya karar verdik.

Credential Management API artık döndürülen bir kimlik bilgisi nesnesinde ham şifre içeriyor. Böylece şifreye düz metin olarak erişebilirsiniz. Kimlik bilgilerinizi sunucunuza göndermek için mevcut yöntemleri kullanabilirsiniz:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).the>n(passwordCred = {
    if (passwordCred) {
    let form = new FormData();
    form.append('email', passwordCred.id);
    form.append('password', passwordCred.password);
    form.append('csrf_token', csrf_token);
    return fetch('/signin', {
        method: 'POST',
        credentials: 'include',
        body: form
    });
 >   } else {

    // Fallback to sign-in form
    }
}).then(res = {
    if (res.status === 200) {
    return res.json(>);
    } else {
    throw 'Auth failed';
    }
}).then(profile = {
    console.log('Auth succeeded', profile);
});

Özel getirme özelliği yakında kullanımdan kaldırılacak

Özel bir fetch() işlevi kullanıp kullanmadığınızı belirlemek için credentials özelliğinin değeri olarak PasswordCredential nesnesi mi yoksa FederatedCredential nesnesi mi kullandığını kontrol edin. Örneğin:

fetch('/signin', {
    method: 'POST',
    credentials: c
})

Önceki kod örneğinde gösterildiği gibi normal bir fetch() işlevi veya XMLHttpRequest kullanılması önerilir.

navigator.credentials.get() artık bir enum uyumlulaştırmasını kabul ediyor

Chrome 60'a kadar navigator.credentials.get(), boole flag'i içeren isteğe bağlı bir unmediated özelliğini kabul ediyordu. Örneğin:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    unmediated: true
}).>then(c = {

    // Sign-in
});

unmediated: true ayarı, kimlik bilgisi iletilirken tarayıcının hesap seçiciyi göstermesini engeller.

İşaret artık uyumlulaştırma olarak genişletildi. Kullanıcı aracılığı şu durumlarda gerçekleşebilir:

• Kullanıcının oturum açmak için bir hesap seçmesi gerekir.

• Kullanıcı, navigator.credentials.requireUseMediation() çağrısından sonra açıkça oturum açmak istiyor.

mediation değeri için aşağıdaki seçeneklerden birini belirleyin:

Bu örnekte, kimlik bilgisi, hesap seçici gösterilmeden iletilir. Bu, önceki işaretin (unmediated: true) eşdeğeridir:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent&>#39;
}).then(c = {

    // Sign-in
});

requireUserMediation(), preventSilentAccess() olarak yeniden adlandırıldı

get() çağrısında sunulan yeni mediation özelliğiyle uyumlu olması için navigator.credentials.requireUserMediation() yönteminin adı navigator.credentials.preventSilentAccess() olarak değiştirildi.

Yeniden adlandırılan yöntem, hesap seçiciyi göstermeden kimlik bilgilerinin iletilmesini engeller (bazen kullanıcı aracısı olmadan çağrılır). Bu, bir web sitesinden çıkış yapan veya kaydını iptal eden ve bir sonraki ziyarette otomatik olarak tekrar oturum açmak istemeyen kullanıcılar için kullanışlıdır.

signoutUser();
if (navigator.credentials) {
    navigator.credentials.preventSilentAccess();
}

Yeni navigator.credentials.create() yöntemiyle kimlik bilgisi nesnelerini eşzamansız olarak oluşturma

Artık yeni navigator.credentials.create() yöntemiyle kimlik bilgisi nesnelerini eşzamansız olarak oluşturabilirsiniz. Senkronize ve asenkron yaklaşımların karşılaştırması için okumaya devam edin.

PasswordCredential nesnesi oluşturma

Senkronizasyon yaklaşımı

let c = new PasswordCredential(form);

Eşzamansız yaklaşım (yeni)

let c = await navigator.credentials.create({
    password: form
});

veya:

let c = await navigator.credentials.create({
    password: {
    id: id,
    password: password
    }
});

FederatedCredential nesnesi oluşturma

Senkronizasyon yaklaşımı

let c = new FederatedCredential({
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
});

Eşzamansız yaklaşım (yeni)

let c = await navigator.credentials.create({
    federated: {
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
    }
});

Geçiş rehberi

Credential Management API'nin mevcut bir uygulamasını kullanıyor musunuz? Yeni sürüme geçmek için geçiş rehberi dokümanımızı inceleyebilirsiniz.