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

Eiji Kitamura

Burada açıklanan güncellemelerin bazıları Güvenli ve Sorunsuz Oturum Açma: Kullanıcıların İlgisini Koruma başlıklı Google I/O oturumunda açıklanmıştır:

Chrome 57

Credential Management API'deki bu önemli değişiklik Chrome 57'de kullanıma sunulmuştur.

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

Chrome artık Credential Management API'yi kullanarak farklı bir alt alanda depolanan kimlik bilgilerini alabilir. Örneğin, bir şifre login.example.com içinde depolanıyorsa www.example.com sitesindeki bir komut dosyası bu şifreyi hesap seçici iletişim kutusundaki hesap öğelerinden biri olarak gösterebilir.

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

Şifre, depolandıktan sonra www.example.com ve sonrasında tamamen aynı kaynakta kimlik bilgisi olarak kullanılabilir.

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

Seçili alt alan adı giriş ayrıntılarını gösteren hesap seçici

Chrome 60

Chrome 60, Credential Management API'de bazı önemli değişiklikler yaptı:

Özellik algılamayla ilgilenmeniz gerekiyor

Şifre tabanlı ve birleşik kimlik bilgilerine erişmek için Credential Management API'nin kullanılabilir olup olmadığını öğrenmek için window.PasswordCredential veya window.FederatedCredential seçeneğinin 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'si şifreleri ele alma konusunda muhafazakar bir yaklaşım benimsedi. JavaScript'teki şifreleri gizledi ve geliştiricilerin, fetch() API'sine bir uzantı aracılığıyla doğrulama için PasswordCredential nesnesini doğrudan kendi sunucularına göndermelerini gerektiriyordu.

Ancak bu yaklaşım, bir dizi kısıtlamaya neden oldu. Geliştiricilerin API'yi şu nedenlerle kullanamadığına dair geri bildirim aldık:

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

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

Bir güvenlik analizi yaptıktan ve şifreleri JavaScript'ten gizlemenin tüm saldırı vektörlerini umduğumuz kadar etkili şekilde önlemediğini öğrendikten sonra, değişiklik yapmaya karar verdik.

Credential Management API'si artık döndürülen kimlik bilgisi nesnesinde ham şifre içerdiğinden bu veriye düz metin olarak erişebilirsiniz. Sunucunuza kimlik bilgisi bilgilerini göndermek için mevcut yöntemleri kullanabilirsiniz:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).then(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 yakında kullanımdan kaldırılacak

Özel bir fetch() işlevi kullanıp kullanmadığınızı belirlemek için işlevin, credentials özelliğinin değeri olarak bir PasswordCredential veya FederatedCredential nesnesi kullanıp kullanmadığı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 bir XMLHttpRequest kullanmanız önerilir.

navigator.credentials.get(), Chrome 60 sürümüne kadar boole flag'i olan 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 ayarlamak, tarayıcının bir kimlik bilgisi iletirken hesap seçiciyi göstermesini engeller.

İşaret, uyumlulaştırma olarak genişletildi. Kullanıcı uyumlulaştırması şu durumlarda gerçekleşebilir:

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

  • Bir kullanıcı, navigator.credentials.requireUseMediation() aramasından sonra açıkça oturum açmak istiyor.

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

mediation değer Boole işareti ile karşılaştırıldı Davranış
silent unmediated: true değerine eşittir Kimlik bilgisi, hesap seçici gösterilmeden geçti.
optional unmediated: false değerine eşittir preventSilentAccess() daha önce aradıysa bir hesap seçici gösterir.
required Yeni bir seçenek Her zaman bir hesap seçici göster. Bir kullanıcının yerel hesap seçici iletişim kutusunu kullanarak hesap değiştirmesine izin vermek istediğinizde kullanışlıdır.

Bu örnekte, kimlik bilgisi önceki unmediated: true işaretinin eşdeğeri olan bir hesap seçici gösterilmeden iletilir:

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

    // Sign-in
});

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

navigator.credentials.requireUserMediation() yöntemi, get() çağrısında sunulan yeni mediation özelliğiyle uyumlu olması için navigator.credentials.preventSilentAccess() olarak yeniden adlandırıldı.

Yeniden adlandırılan yöntem, hesap seçiciyi göstermeden kimlik bilgilerinin iletilmesini engeller (bazen kullanıcı uyumlulaştırması olmadan çağrılır). Bu, kullanıcı bir web sitesinden çıkış yaptığında veya bir web sitesindeki kaydını sildiğinde ve bir sonraki ziyaretinde otomatik olarak yeniden oturum açmak istemediğinde faydalıdır.

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

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

Artık yeni navigator.credentials.create() yöntemi ile kimlik bilgisi nesnelerini eşzamansız olarak oluşturma seçeneğine sahipsiniz. Senkronize ve eşzamansız yaklaşımların karşılaştırmasını görmek için okumaya devam edin.

PasswordCredential nesnesi oluşturuluyor

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şturuluyor

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://*****'
    }
});

Taşıma rehberi

Mevcut bir Credential Management API uygulamanız var mı? Yeni sürüme geçmek için izleyebileceğiniz bir taşıma kılavuzu dokümanımız var.