Kayıt ve oturum açma formlarınızı mümkün olduğunca basit tutun.
Oturum açma formlarındaki kimlik bilgilerini kaydet Böylece, kullanıcılar geri döndüklerinde tekrar oturum açmak zorunda kalmaz.
Formlardaki kullanıcı kimlik bilgilerini depolamak için:
- Forma
autocomplete
ekleyin. - Formun gönderilmesini engelleyin.
- İstek göndererek kimlik doğrulaması yapın.
- Kimlik bilgisini saklayın.
- Kullanıcı arayüzünü güncelleyin veya kişiselleştirilmiş sayfaya geçin.
autocomplete
öğelerini forma dahil et
Devam etmeden önce
formunuzun autocomplete
özellikleri içerip içermediğini kontrol edin.
Bu sayede Credential Management API id
ve password
verilerini bulabilir
ve bir kimlik bilgisi nesnesi oluşturur.
Bu işlem, Credential Management API'yi desteklemeyen tarayıcılara da yardımcı olur. anlamlarını anlamaktır. Otomatik doldurma hakkında daha fazla bilgiyi şuradan edinebilirsiniz: bu makaleyi, Jason Grigsby.
<form id="signup" method="post">
<input name="email" type="text" autocomplete="username email" />
<input name="display-name" type="text" autocomplete="name" />
<input name="password" type="password" autocomplete="new-password" />
<input type="submit" value="Sign Up!" />
</form>
Formun gönderilmesini engelleme
Kullanıcı gönder düğmesine bastığında formun gönderilmesini engelleyin. Aksi takdirde bir sayfa geçişi olarak kabul edilir:
var f = document.querySelector('#signup');
f.addEventListener('submit', e => {
e.preventDefault();
Sayfa geçişini önleyerek Böylece, bilgilerin orijinalliğini doğrularken kimlik bilgisi bilgilerini saklayabilirsiniz.
İstek göndererek kimlik doğrulaması yap
Kullanıcının kimliğini doğrulamak için AJAX kullanarak sunucunuza kimlik bilgisi gönderin.
Sunucu tarafında bir uç nokta oluşturun (veya mevcut bir uç noktayı değiştirin) HTTP kodu 200 veya 401 ile yanıt veren bir tarayıcı kullanarak başarılı olup olmadığını kontrol edin.
Örneğin:
// Try sign-in with AJAX
fetch('/signin', {
method: 'POST',
body: new FormData(e.target),
credentials: 'include',
});
Kimlik bilgisini saklama
Kimlik bilgilerini depolamak için önce API'nin kullanılabilir olup olmadığını kontrol edin.
ardından bir örnek verin
PasswordCredential
bağımsız değişken olarak form öğesi
senkronize edebilirsiniz.
Telefonla arama
navigator.credentials.store()
.
API kullanılamıyorsa
profil bilgilerini bir sonraki adıma yönlendirebilirsiniz.
Eşzamanlı örnek:
if (window.PasswordCredential) {
var c = new PasswordCredential(e.target);
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
Eşzamansız örnek:
if (window.PasswordCredential) {
var c = await navigator.credentials.create({password: e.target});
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
İstek başarılı olduktan sonra kimlik bilgisi bilgilerini depolayın. (İstek başarısız olduysa kimlik bilgisi bilgilerini depolama geri gelen kullanıcıların kafasını karıştıracağından emin olun.)
Chrome tarayıcı kimlik bilgisi bilgilerini aldığında, kimlik bilgilerinin depolanmasını isteyen bir bildirim açılır (veya federasyon sağlayıcı)
Kullanıcı arayüzünü güncelleme
Her şey yolunda gittiyse profil bilgilerini kullanarak kullanıcı arayüzünü güncelleyin. veya kişiselleştirilmiş sayfaya geçin.
}).then(profile => {
if (profile) {
updateUI(profile);
}
}).catch(error => {
showError('Sign-in Failed');
});
});
Tam kod örneği
// Get form's DOM object
var f = document.querySelector('#signup');
f.addEventListener('submit', (e) => {
// Stop submitting form by itself
e.preventDefault();
// Try sign-in with AJAX
fetch('/signin', {
method: 'POST',
body: new FormData(e.target),
credentials: 'include',
})
.then((res) => {
if (res.status == 200) {
return Promise.resolve();
} else {
return Promise.reject('Sign-in failed');
}
})
.then((profile) => {
// Instantiate PasswordCredential with the form
if (window.PasswordCredential) {
var c = new PasswordCredential(e.target);
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
})
.then((profile) => {
// Successful sign-in
if (profile) {
updateUI(profile);
}
})
.catch((error) => {
// Sign-in failed
showError('Sign-in Failed');
});
});
Tarayıcı uyumluluğu
PasswordCredential
navigator.credentials.store()