Kayıt ve oturum açma formlarınızı mümkün olduğunca basit tutun.
Kullanıcıların geri döndüklerinde tekrar oturum açmak zorunda kalmamaları için oturum açma formlarındaki kimlik bilgilerini kaydedin.
Formlardaki kullanıcı kimlik bilgilerini depolamak için:
- Forma
autocompleteekleyin. - Formun gönderilmesini engelleyin.
- İstek göndererek kimliğinizi doğrulayın.
- Kimlik bilgisini saklayın.
- Kullanıcı arayüzünü güncelleyin veya kişiselleştirilmiş sayfaya gidin.
autocomplete alanını forma dahil edin
Devam etmeden önce formunuzun autocomplete özellikleri içerip içermediğini kontrol edin.
Bu, Credential Management API'nin formdan id ve password öğelerini bulmasına ve bir kimlik bilgisi nesnesi oluşturmasına yardımcı olur.
Bu, Credential Management API'yi desteklemeyen tarayıcıların bu API'nin anlamını anlamasına da yardımcı olur. Otomatik doldurma hakkında daha fazla bilgiyi Jason Grigsby'nin bu makalesinde bulabilirsiniz.
<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 halde sayfa geçişine neden olur:
var f = document.querySelector('#signup');
f.addEventListener('submit', e => {
e.preventDefault();
Sayfa geçişini engelleyerek, orijinalliğini doğrularken kimlik bilgisi bilgilerini saklayabilirsiniz.
İstek göndererek kimlik doğrulama
Kullanıcının kimliğini doğrulamak için AJAX kullanarak sunucunuza kimlik bilgisi bilgilerini iletin.
Sunucu tarafında, kaydolma/oturum açma/şifre değiştirme işleminin başarılı olup olmadığını tarayıcı açısından netleştirmek için HTTP kodu 200 veya 401 ile yanıt veren bir uç nokta oluşturun (veya mevcut bir uç noktayı değiştirin).
Örneğin:
// Try sign-in with AJAX
fetch('/signin', {
method: 'POST',
body: new FormData(e.target),
credentials: 'include',
});
Kimlik bilgisini sakla
Kimlik bilgisini depolamak için önce API'nin kullanılabilir olup olmadığını kontrol edin, ardından form öğesini eşzamanlı veya eşzamansız olarak bağımsız değişken olarak içeren bir PasswordCredential oluşturun.
navigator.credentials.store() numaralı telefonu arayın.
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ı olduğunda kimlik bilgisi bilgilerini saklayın. (İstek başarısız olursa geri gelen kullanıcıların kafasını karıştıracağından kimlik bilgisi bilgilerini saklamayın.)
Chrome tarayıcı kimlik bilgisi bilgilerini aldığında kimlik bilgilerinin (veya federasyon sağlayıcısının) depolanmasını isteyen bir bildirim açılır.
Kullanıcı arayüzünü güncelleme
Her şey yolunda giderse profil bilgilerini kullanarak kullanıcı arayüzünü güncelleyin veya kişiselleştirilmiş sayfaya ilerleyin.
}).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()