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

Eiji Kitamura

Burada açıklanan güncellemelerden bazıları Google I/O oturumunda açıklanmıştır. Güvenli ve Sorunsuz Oturum Açma: Kullanıcıların Etkileşimde Bulunmasını Sağlama:

Chrome 57 sürümü

Chrome 57 sürümünde bu önemli değişikliği Kimlik Bilgisi Yönetimi API'si.

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

Chrome artık Kimlik Bilgisi Yönetimi API'si. Örneğin, bir şifre login.example.com içinde depolanıyorsa www.example.com üzerindeki bir komut dosyası bunu hesap seçici iletişim kutusundaki hesap öğelerinden biri olarak gösterebilir.

Şifreyi navigator.credentials.store() kullanarak açıkça depolamanı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 kimlik bilgileri olarak kullanılabilir www.example.com sonrasında tam olarak aynı kaynakta.

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

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

Chrome 60 sürümü

Chrome 60, Kimlik Bilgisi Yönetimi API'si:

Özellik algılamayla ilgilenmeniz gerekiyor

Credential Management API'nin şifre tabanlı erişim ve erişim için birleşik kimlik bilgileri mevcutsa window.PasswordCredential veya window.FederatedCredential müsait.

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

PasswordCredential nesnesi artık şifre içeriyor

Credential Management API, şifreleri ele alırken konservatif bir yaklaşım benimsedi. Şifreleri JavaScript'ten gizlediği için geliştiricilerin PasswordCredential nesnesini doğrudan kendi sunucularına göndermek için doğrulama için fetch() API'ye yönelik bir uzantıyla doğrulama yapılmasını sağlar.

Ancak bu yaklaşım bir dizi kısıtlama getirdi. Geliştiricilerin, API'yi şu nedenle kullanamadığına dair geri bildirim aldık:

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

  • Şifrenin karma değerini sunucularına göndermesi gerekmiştir.

Bir güvenlik analizi yaptıktan ve şifrelerin gizli olduğunu fark ettikten sonra tüm saldırı vektörlerini beklediğimiz kadar etkili bir şekilde önlememiştir. bir değişiklik yapmaya karar verdik.

Credential Management API artık ham şifre içeriyor için döndürülen kimlik bilgileri nesnesinde bulunur. Böylece, düz metin olarak ona erişebilirsiniz. Kimlik bilgisi bilgilerini sunucunuza 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: bir PasswordCredential nesnesi mi yoksa FederatedCredential nesnesi mi kullandığını kontrol edin credentials özelliğinin değeri olarak, örneğin:

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

Önceki kod örneğinde gösterildiği gibi normal bir fetch() işlevini kullanarak, veya XMLHttpRequest kullanmanız önerilir.

Chrome 60'a kadar navigator.credentials.get(), isteğe bağlı bir unmediated mülkünü kabul etti bir boole işareti kullanın. Örneğin:

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

    // Sign-in
});

unmediated: true politikasının ayarlanması, tarayıcının hesap seçiciyi göstermesini engeller emin olun.

İşaretleme artık 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ı açık bir şekilde oturum açmak istiyor navigator.credentials.requireUseMediation() görüşmeden sonra.

mediation değeri için şu seçeneklerden birini belirleyin:

mediation değer Boole işaretiyle karşılaştırma Davranış
silent unmediated: true değerine eşit Kimlik bilgisi, hesap seçici gösterilmeden iletildi.
optional unmediated: false değerine eşit Şu durumlarda bir hesap seçici gösterilir: preventSilentAccess() daha önce aradı.
required Yeni bir seçenek Her zaman bir hesap seçici gösterin. Kullanıcının bir hesabı değiştirmesine izin vermek istediğinizde kullanışlıdır yerel hesap seçici iletişim kutusunu kullanarak

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

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

    // Sign-in
});

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

get() görüşmesinde sunulan yeni mediation özelliğine uyum sağlamak için navigator.credentials.requireUserMediation() yöntemi şu şekilde yeniden adlandırıldı: navigator.credentials.preventSilentAccess().

Yeniden adlandırılan yöntem, hesap seçici gösterilmeden kimlik bilgilerinin iletilmesini engelliyor (bazen kullanıcı uyumlulaştırması olmadan çağrılır). Bu, kullanıcı bir web sitesindeki oturumunu kapattığında veya kaydını iptal ettiğinde yararlı olur ve bir sonraki ziyarette otomatik olarak yeniden oturum açmak istemediğini düşünelim.

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

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

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

PasswordCredential nesnesi oluşturuluyor

Yaklaşımı senkronize et
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

Yaklaşımı senkronize et
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 kullanıyor musunuz? Bir taşıma rehberi dokümanımız var. yeni sürüme geçmek için takip edebilirsiniz.