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:
Chrome 60 sürümü
Chrome 60, Kimlik Bilgisi Yönetimi API'si:
Şifreyi getirmek için özel
fetch()
işlevi artık gerekli olmadığından yakında kullanımdan kaldırılacaktır.navigator.credentials.get()
artıkmediation
numaralandırmasını kabul ediyor kullanılamaz.unmediated
requireUserMediation()
,preventSilentAccess()
olarak yeniden adlandırıldı.Yeni yöntem
navigator.credentials.create()
eşzamansız olarak kimlik bilgisi nesnelerini oluşturur.
Ö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.
navigator.credentials.get()
artık enum uyumlulaştırmasını kabul ediyor
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.