Karmaşık bir kullanıcı deneyimi sunmak amacıyla, kullanıcıların web sitenizde kimliklerini doğrulamalarına yardımcı olmanız önemlidir. Kimliği doğrulanan kullanıcılar özel bir profil kullanarak birbirleriyle etkileşime geçebilir, verileri cihazlar arasında senkronize edebilir veya çevrimdışıyken verileri işleyebilir. Liste bu şekilde uzayıp gider. Ancak şifre oluşturmak, hatırlamak ve yazmak son kullanıcılar için zahmetli bir iş olabilir. Bu durum özellikle mobil cihaz ekranlarında son kullanıcıların aynı şifreleri farklı sitelerde tekrar kullanmasına neden olur. Bu elbette bir güvenlik riskidir.
Chrome'un en son sürümü (51), Credential Management API'yi destekler. Bu, geliştiricilere bir tarayıcının kimlik bilgisi yöneticisine programatik erişim imkanı sunan ve kullanıcıların daha kolay oturum açmalarına yardımcı olan, W3C'nin standart takibi teklifidir.
Credential Management API nedir?
Credential Management API'si geliştiricilerin şifre kimlik bilgilerini ve birleşik kimlik bilgilerini depolayıp almasını sağlar ve 3 işlev sunar:
navigator.credentials.get()navigator.credentials.store()navigator.credentials.requireUserMediation()
Geliştiriciler bu basit API'leri kullanarak aşağıdaki gibi güçlü işler yapabilir:
- Kullanıcıların tek dokunuşla oturum açmasına izin verin.
- 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 şifre yöneticisinde depolanır. Kullanıcılar Chrome'da oturum açtıysa kullanıcının şifrelerini cihazlar arasında senkronize edebilir. Senkronize edilen bu şifreler, platformlar arası sorunsuz bir deneyim için Android için Smart Lock API'sı entegre eden Android uygulamalarıyla da paylaşılabilir.
Credential Management API'yi sitenizle entegre etme
Credential Management API'yi web sitenizde kullanma şekliniz, mimarisine bağlı olarak değişiklik gösterebilir. Tek sayfalık bir uygulama mı? Sayfa geçişleri olan eski bir mimari mi? Oturum açma formu yalnızca sayfanın üst kısmında mı yer alıyor? Oturum açma düğmeleri her yerde bulunuyor mu? Kullanıcılar oturum açmadan web sitenizde anlamlı bir şekilde gezinebiliyor mu? Federasyon pop-up pencerelerde çalışır mı? Yoksa birden çok sayfa arasında etkileşim mi gerektiriyor?
Bu durumların hepsini ele almak neredeyse imkansızdır, ama şimdi tek sayfalık tipik bir uygulamaya göz atalım.
- En üstteki sayfa bir kayıt formudur.
- Kullanıcılar "Oturum Aç" düğmesine dokunarak oturum açma formuna yönlendirilecek.
- Hem kayıt hem de oturum açma formlarında kimlik/şifre kimlik bilgileri ve federasyon için tipik seçenekler bulunur (ör. Google ile Oturum Açma ve Facebook Oturum Açma ile).
Credential Management API'yi kullanarak siteye aşağıdaki özellikleri ekleyebilirsiniz. Örneğin:
- Oturum açarken hesap seçici göster: Bir kullanıcı "Oturum Aç"a dokunduğunda yerel hesap seçici kullanıcı arayüzü gösterir.
- Kimlik bilgilerini depola: Başarılı oturum açıldığında, daha sonra kullanılmak üzere kimlik bilgisi bilgilerinin tarayıcının şifre yöneticisine depolanmasını teklif edin.
- Kullanıcının otomatik olarak tekrar oturum açmasına izin ver: Bir oturumun süresi dolduğunda kullanıcının tekrar oturum açmasına izin verin.
- Otomatik oturum açmayı uyumlulaştırma: Bir kullanıcı oturumunu kapattığında, kullanıcının bir sonraki ziyareti için otomatik oturum açmayı devre dışı bırakın.
Bu özelliklerin örnek koduyla bir demo sitesinde uygulandığını görebilirsiniz.
Oturum açarken Hesap Seçici'yi göster
Kullanıcının "Oturum Aç" düğmesine dokunması ile oturum açma formuna gitmesi arasında, kimlik bilgilerini almak için navigator.credentials.get() yöntemini kullanabilirsiniz. Chrome, kullanıcının hesap seçebileceği bir hesap seçici kullanıcı arayüzü gösterir.
Şifre kimlik bilgisi nesnesi alma
Şifre kimlik bilgilerini hesap seçenekleri olarak göstermek için password: true uygulamasını 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şlevi bir şifre kimlik bilgisi alır. fetch() öğesini 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 get() seçeneklerine bir dizi kimlik sağlayıcı alan federated ekleyin.
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
...
Kimlik bilgisi nesnesinin type özelliğini inceleyerek öğenin PasswordCredential
(type == 'password') veya FederatedCredential (type == 'federated') olup olmadığını anlayabilirsiniz.
Kimlik bilgisi bir
FederatedCredential ise
içerdiği bilgileri kullanarak uygun API'yi ç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
Mağaza kimlik bilgileri
Bir kullanıcı bir form kullanarak web sitenizde oturum açtığında kimlik bilgisini depolamak için navigator.credentials.store() kullanabilirsiniz. Kullanıcıdan bu bilgiyi depolaması veya depolamaması istenir. Kimlik bilgisinin türüne bağlı olarak, depolamak istediğiniz bir kimlik bilgisi nesnesi oluşturmak için new
PasswordCredential() veya new
FederatedCredential() kullanın.
Bir form öğesinden şifre kimlik bilgisi oluşturma ve depolama
Aşağıdaki kod, formun öğelerini PasswordCredential nesne parametreleriyle otomatik olarak eşlemek için autocomplete özelliklerini kullanır.
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ştirilmiş 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 dolmuş olabilir. Kullanıcıyı, her geri geldiğinde şifresini yazmakla rahatsız etmeyin. 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, "Oturum açarken Hesap Seçiciyi Göster" bölümünde gördüğünüze benzer olacaktır. Buradaki tek fark, unmediated: true olarak ayarlamanızdır.
Bu işlem, işlevi hemen çözümler ve kullanıcının oturumunu otomatik olarak açmanız için size kimlik bilgisi sağlar. Birkaç koşul vardır:
- Kullanıcı, otomatik oturum açma özelliğini sıcak bir karşılama ile kabul etmiştir.
- Kullanıcı daha önce web sitesinde Kimlik Bilgisi Yönetimi API'sini kullanarak oturum açtığında.
- Kullanıcı, kaynağınız için depolanmış yalnızca bir kimlik bilgilerine sahip.
- Kullanıcı, önceki oturumda oturumunu açık bir şekilde kapatmadı.
Bu koşullardan herhangi biri karşılanmazsa işlev reddedilir.
Otomatik oturum açmayı uyumlulaştırma
Bir kullanıcı web sitenizde oturumu kapattığında, kullanıcının otomatik olarak tekrar oturum açmamasını sağlamak sizin sorumluluğunuzdadır. Credential Management API bunu sağlamak için uyumlulaştırma adlı bir mekanizma sağlar.
navigator.credentials.requireUserMediation() yöntemini çağırarak uyumlulaştırma modunu etkinleştirebilirsiniz.
Kullanıcının kaynak için uyumlulaştırma durumu etkin olduğu sürece, unmediated: true ve navigator.credentials.get() kullanıldığında bu işlev undefined ile çözümlenir.
Otomatik oturum açmayı uyumlulaştırma
navigator.credentials.requireUserMediation();
SSS
Web sitesindeki JavaScript'in ham şifre alması mümkün mü?
Hayır. Şifreleri yalnızca PasswordCredential kapsamında alabilirsiniz ve hiçbir şekilde ifşa edilemez.
Credential Management API kullanarak bir kimlik için 3 basamak grubu depolamak mümkün müdür? Şu anda hayır. Spesifikasyonla ilgili geri bildiriminiz bizim için çok değerlidir.
Credential Management API'yi iframe içinde kullanabilir miyim?
API, üst düzey bağlamlarla kısıtlanmıştır. Bir iframe'deki .get() veya .store() çağrıları, herhangi bir etki olmadan hemen çözümlenir.
Şifre yönetimi Chrome uzantımı Credential Management API ile entegre edebilir miyim?
navigator.credentials öğesini geçersiz kılabilir ve get() veya store() kimlik bilgilerine Chrome Uzantınıza bağlayabilirsiniz.
Kaynaklar
Credential Management API hakkında daha fazla bilgi edinmek için Integration Guide'a (Entegrasyon Kılavuzu) bakın.