Gelişmiş bir kullanıcı deneyimi sunmak için kullanıcılara yardımcı olmak kimlik doğrulaması yapmak isteyebilir. Kimliği doğrulanmış kullanıcıların etkileşimde bulunabileceği özel bir profil kullanarak birbirleriyle paylaşabilir, cihazlar arasında veri senkronize edebilir veya verileri işleyebilir çevrimdışıyken böyle devam eder. Ancak içerik oluşturmak, hatırlamak ve yazmak Şifreler, özellikle mobil ekranlarda son kullanıcılar için kullanışsızdır. Bu da onları farklı sitelerde aynı şifreleri kullanmaya yönlendiriyor. Bu elbette bir güvenlik riskidir.
Chrome'un en son sürümü (51), Credential Management API'yi destekler. Bu bir W3C'de yer alan ve geliştiricilere, standartlara uygun uygulama teklifi ve kullanıcıların daha kolay oturum açmasına yardımcı olur.
Credential Management API nedir?
Credential Management API, geliştiricilerin şifreleri depolamasına ve almasına olanak tanır kimlik bilgileri ile birleşik kimlik bilgilerini içerir ve 3 işlev sağlar:
navigator.credentials.get()navigator.credentials.store()navigator.credentials.requireUserMediation()
Geliştiriciler bu basit API'leri kullanarak aşağıdakiler gibi güçlü işlemler yapabilir:
- Kullanıcılar tek dokunuşla oturum açabilir.
- Kullanıcının oturum açmak için kullandığı birleşik hesabı unutmayın.
- Bir oturumun süresi dolduğunda kullanıcıların tekrar oturum açmasını sağlayın.
Chrome uygulamasında, kimlik bilgileri Chrome'un şifresinde saklanır üstlenirsiniz. Kullanıcılar Chrome'da oturum açmışsa kullanıcının şifrelerini senkronize edebilirler cihazlarda kullanabilirsiniz. Senkronize edilen bu şifreler Android uygulamalarıyla da paylaşılabilir Android için Şifreler için Smart Lock API'sini entegre eden platformlar arası sorunsuz bir deneyim için.
Credential Management API'yi sitenize entegre etme
Credential Management API'yi web sitenizle kullanma şekliniz çeşitli ürünler sunar. Tek sayfalık bir uygulama mı? Bu bir miras mı? mimariyi nasıl kullanıyorsun? Oturum açma formu yalnızca üst tarafta mı? kullanabilirsiniz. Oturum açma düğmeleri her yerde bulunuyor mu? Kullanıcılar, web sitenize anlamlı bir şekilde başka neler var? Federasyon pop-up pencerelerde çalışıyor mu? Yoksa birden çok sayfada etkileşim gerektirir?
Tüm bu vakaları ele almak neredeyse imkansızdır, ancak şimdi tipik bir tek sayfalık uygulamadır.
- Üstteki sayfa bir kayıt formudur.
- "Oturum Aç"a dokunarak kullanıcılar bir oturum açma formuna gider.
- Hem kayıt hem de oturum açma formlarında tipik kimlik/şifre seçenekleri bulunur kimlik bilgileri ve federasyon, ör. Google ile Oturum Açma ve Facebook'ta Oturum Açma özelliklerini kullanabilirsiniz.
Kimlik Bilgisi Yönetimi API'sini kullanarak şunları ekleyebilirsiniz: ekleyin. Örneğin:
- Oturum açarken hesap seçici göster: Yerel hesap seçici kullanıcı arayüzünü gösterir Kullanıcı "Oturum aç"a dokunduğunda.
- Mağaza kimlik bilgileri: Başarılı oturum açtıktan sonra, daha sonra kullanılmak üzere tarayıcının şifre yöneticisine kimlik bilgilerini gönderir.
- Kullanıcının otomatik olarak tekrar oturum açmasına izin ver: Bir kullanıcının bir oturum açmasını isterse oturumun süresi doldu.
- Otomatik oturum açmayı uyumlulaştırma: Bir kullanıcı çıkış yaptıktan sonra için otomatik oturum açmayı devre dışı bırakın. kullanıcının bir sonraki ziyaretinde
Bir demo sitede uygulanmış olan bu özellikleri örnek koduyla deneyimleyebilirsiniz.
Oturum açarken Hesap Seçici'yi göster
Kullanıcı "Oturum Aç" düğmesine dokunduğunda bir oturum açma formuna gitmek için kullanabilir navigator.credentials.get() kimlik bilgisi bilgilerini almak için. Chrome, cihazın ekran görüntüsünde bulunan kullanıcı bir hesap seçebilir.
Şifre kimlik bilgisi nesnesi alınıyor
Şifre kimlik bilgilerini hesap seçenekleri olarak göstermek için password: true işlevini kullanın.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
}).then(function(cred) {
// continuation
...
Oturum açmak için şifre kimlik bilgisi kullanma
Kullanıcı bir hesap seçimi yaptıktan sonra, çözümleme işlevinde
Şifre kimlik bilgisi. fetch() dosyasını kullanarak sunucuya gönderebilirsiniz:
// continued from previous example
}).then(function(cred) {
if (cred) {
if (cred.type == 'password') {
// Construct FormData object
var form = new FormData();
// Append CSRF Token
var csrf_token = document.querySelector('csrf_token').value;
form.append('csrf_token', csrf_token);
// You can append additional credential data to `.additionalData`
cred.additionalData = form;
// `POST` the credential object as `credentials`.
// id, password and the additional data will be encoded and
// sent to the url as the HTTP body.
fetch(url, { // Make sure the URL is HTTPS
method: 'POST', // Use POST
credentials: cred // Add the password credential object
}).then(function() {
// continuation
});
} else if (cred.type == 'federated') {
// continuation
Oturum açmak için birleşik kimlik bilgisi kullanma
Bir kullanıcıya birleşik hesapları göstermek için diziyi alacak federated öğesini ekleyin.
kimlik sağlayıcıların get() seçeneklerine.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
federated: {
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
}
}).then(function(cred) {
// continuation
...
PasswordCredential olup olmadığını görmek için kimlik bilgisi nesnesinin type özelliğini inceleyebilirsiniz.
(type == 'password') veya FederatedCredential (type == 'federated').
Kimlik bilgisi
FederatedCredential,
uygun API'yi, içerdiği bilgileri kullanarak çağırabilirsiniz.
});
} else if (cred.type == 'federated') {
// `provider` contains the identity provider string
switch (cred.provider) {
case 'https://accounts.google.com':
// Federated login using Google Sign-In
var auth2 = gapi.auth2.getAuthInstance();
// In Google Sign-In library, you can specify an account.
// Attempt to sign in with by using `login_hint`.
return auth2.signIn({
login_hint: cred.id || ''
}).then(function(profile) {
// continuation
});
break;
case 'https://www.facebook.com':
// Federated login using Facebook Login
// continuation
break;
default:
// show form
break;
}
}
// if the credential is `undefined`
} else {
// show form
Kimlik bilgilerini depola
Bir kullanıcı form kullanarak web sitenizde oturum açtığında
navigator.credentials.store()
depolamaya çalışın. Kullanıcıdan dosyayı depolaması veya depolamaması istenir. Şuna bağlı olarak:
Kimlik bilgisi türünde new
PasswordCredential() değerini kullanın
veya new
FederatedCredential()
kimlik bilgisi nesnesini oluşturun.
Bir form öğesinden şifre kimlik bilgisi oluşturma ve depolama
Aşağıdaki kod otomatik olarak autocomplete özelliklerini
harita
PasswordCredential'a gönderilen formların öğelerini
nesne parametrelerinden kaçının.
HTML
html
<form id="form" method="post">
<input type="text" name="id" autocomplete="username" />
<input type="password" name="password" autocomplete="current-password" />
<input type="hidden" name="csrf_token" value="******" />
</form>.
JavaScript
var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
Birleşik kimlik bilgisi oluşturma ve depolama
// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
id: id, // The id for the user
name: name, // Optional user name
provider: 'https://accounts.google.com', // A string that represents the identity provider
iconURL: iconUrl // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
Kullanıcının otomatik olarak tekrar oturum açmasına izin verme
Bir kullanıcı web sitenizden ayrılıp daha sonra geri geldiğinde, oturumun süresi doldu. Kullanıcı, her oturum açtığında şifresini girmesiyle geri dönebilir. Kullanıcının otomatik olarak tekrar oturum açmasına izin verin.
Kimlik bilgisi nesnesi alma
navigator.credentials.get({
password: true, // Obtain password credentials or not
federated: { // Obtain federation credentials or not
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
},
unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
if (cred) {
// auto sign-in possible
...
} else {
// auto sign-in not possible
...
}
});
Kod, "Hesap Seçiciyi Göster" bölümünde gördüğünüz koda benzer olmalıdır
Oturum açarken" bölümüne ekleyin. Tek fark, dönüşüm izlemeyi
unmediated: true
Bu işlem, işlevi hemen çözer ve size Kullanıcının otomatik olarak oturum açmasını sağlar. Birkaç koşul vardır:
- Kullanıcı, otomatik oturum açma özelliğini sıcak bir karşılamayla onaylamıştır.
- Kullanıcı, Credential Management API'yi kullanarak web sitesinde daha önce oturum açtı.
- Kullanıcının, kaynağınız için depolanan yalnızca bir kimlik bilgisi var.
- Kullanıcı, önceki oturumda açıkça çıkış yapmadı.
Bu koşullardan herhangi biri karşılanmazsa işlev reddedilir.
Otomatik oturum açmayı uyumlulaştırma
Bir kullanıcı web sitenizden çıkış yaptığında
oturumun otomatik olarak tekrar açılmayacağından emin olun. Emin olmak için
Credential Management API, uyumlulaştırma adı verilen bir mekanizma sağlar.
Uyumlulaştırma modunu
navigator.credentials.requireUserMediation().
Kaynak için kullanıcının uyumlulaştırma durumu etkin olduğu sürece
unmediated: true navigator.credentials.get() ile ayarlarsanız bu işlev
undefined ile çözün.
Otomatik oturum açmayı uyumlulaştırma
navigator.credentials.requireUserMediation();
SSS
Web sitesindeki JavaScript'in ham verileri alması mümkün mü?
şifre nedir?
Hayır. Şifreleri yalnızca PasswordCredential kapsamında alabilirsiniz.
şekilde açıklığa kavuşturulabilir.
Kimlik bilgisi kullanarak bir kimlik için 3 basamak grubu depolanabilir mi? Management API? Şu anda hayır. Spesifikasyonla ilgili geri bildiriminiz çok teşekkür ederiz.
Credential Management API'yi iframe içinde kullanabilir miyim?
API, üst düzey bağlamlarla sınırlıdır. .get() veya .store() numaralı telefona yapılan aramalar
etkisi hemen ortadan kalkar.
Şifre yönetimi Chrome uzantımı Kimlik Bilgisi ile entegre edebilir miyim?
Management API?
navigator.credentials yönergesini geçersiz kılıp Chrome Uzantınıza bağlayabilirsiniz.
get() veya store() kimlik bilgileri.
Kaynaklar
Credential Management API hakkında daha fazla bilgi edinmek için Integration Guide (Entegrasyon Kılavuzu) başlıklı makaleyi inceleyin.