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 başlıklı Google I/O oturumunda açıklanmıştır:

Chrome 57 sürümü

Chrome 57 sürümünde, Credential Management API'de bu önemli değişiklik yapıldı.

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'te depolanıyorsa www.example.com'teki bir komut dosyası, şifreyi hesap seçici iletişim kutusunda hesap öğelerinden biri olarak gösterebilir.

Kullanıcı iletişim kutusuna dokunarak bir kimlik bilgisi seçtiğinde şifrenin iletilmesi ve geçerli kaynağa kopyalanması için şifreyi navigator.credentials.store() kullanarak açıkça saklamanız gerekir.

Depolanan şifre, www.example.com tarihinden itibaren tam olarak aynı kaynakta 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ının aralarından seçim yapmasına olanak tanır:

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

Chrome 60

Chrome 60 sürümünde, Credential Management API'de bazı önemli değişiklikler yapıldı:

Özellik algılamayla ilgilenmeniz gerekiyor

Şifre tabanlı ve birleşik kimlik bilgilerine erişmek için Kimlik Bilgisi Yönetimi API'sinin kullanılıp kullanılamadığını görmek istiyorsanız window.PasswordCredential veya window.FederatedCredential'nin kullanılıp kullanılamadığını kontrol edin.

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

PasswordCredential nesnesi artık şifre içeriyor

Kimlik Bilgisi Yönetimi API'si, şifreleri işleme konusunda muhafazakar bir yaklaşım benimsedi. Bu yöntem, şifreleri JavaScript'ten gizleyerek geliştiricilerin, fetch() API'ye 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ıtlama getirdi. Geliştiricilerin API'yi kullanamamasının nedenleri:

  • Şifre, JSON nesnesi kapsamında gönderilmelidir.

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

Bir güvenlik analizi gerçekleştirdikten 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 kimlik bilgisi nesnesine ham şifre ekler. Böylece, şifreye düz metin olarak erişebilirsiniz. Kimlik bilgisi bilgilerini sunucunuza iletmek 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 özelliği yakında kullanımdan kaldırılacak

Özel bir fetch() işlevi kullanıp kullanmadığınızı belirlemek için credentials mülkünün değeri olarak PasswordCredential nesnesi mi yoksa FederatedCredential nesnesi mi kullanıldığı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.

Chrome 60'a kadar navigator.credentials.get(), boole işareti içeren isteğe bağlı bir unmediated mülkünü kabul ediyordu. Ö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 kimlik bilgilerini aktarırken hesap seçiciyi göstermesini engeller.

İşaret artık uyumlulaştırma olarak uzatıldı. Kullanıcı uyumlulaştırması aşağıdaki durumlarda gerçekleşebilir:

  • Kullanıcının oturum açacağı bir hesap seçmesi gerekir.

  • 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şaretine kıyasla Davranış
silent unmediated: true değerine eşittir Kimlik bilgisi, hesap seçici gösterilmeden iletildi.
optional unmediated: false değerine eşittir Daha önce çağrıldıysa bir hesap seçici gösterir.preventSilentAccess()
required Yeni bir seçenek Her zaman hesap seçiciyi göster. 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 bir 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'
}).then(c => {

    // Sign-in
});

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

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

Yeniden adlandırılan yöntem, hesap seçiciyi göstermeden (bazen kullanıcı aracılığı olmadan olarak adlandırılır) kimlik bilgisinin iletilmesini engeller. Bu özellik, kullanıcı bir web sitesindeki oturumunu kapattığında veya bir sitedeki kaydını iptal ettiğinde ve bir sonraki ziyaretinde oturumun otomatik olarak tekrar açılmasını istemediğinde bu yararlı bir özelliktir.

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 yöntem olan navigator.credentials.create() ile kimlik bilgisi nesnelerini eşzamansız olarak oluşturabilirsiniz. Senkronize ve asynkron yaklaşımlar arasındaki karşılaştırmayı okumaya devam edin.

PasswordCredential nesnesi oluşturma

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

Taşıma rehberi

Kimlik Bilgisi Yönetimi API'sinin mevcut bir uygulamanız var mı? Yeni sürüme geçmek için taşıma rehberi dokümanımızı inceleyebilirsiniz.