فرم های ثبت نام و ورود خود را تا حد امکان ساده نگه دارید.
اعتبارنامه ها را از فرم های ورود ذخیره کنید تا کاربران مجبور نباشند پس از بازگشت دوباره وارد سیستم شوند.
برای ذخیره اطلاعات کاربری از فرم ها:
-
autocompleteدر فرم قرار دهید. - از ارسال فرم جلوگیری کنید
- با ارسال درخواست احراز هویت
- اعتبارنامه را ذخیره کنید.
- رابط کاربری را به‌روزرسانی کنید یا به صفحه شخصی‌شده بروید.
autocomplete در فرم قرار دهید
قبل از حرکت به جلو، بررسی کنید که آیا فرم شما دارای ویژگی های autocomplete است یا خیر. این به Credential Management API کمک می کند تا id و password از فرم پیدا کند و یک شی اعتبار بسازد.
این همچنین به مرورگرهایی که از Credential Management API پشتیبانی نمی کنند کمک می کند تا معنای آن را درک کنند. در این مقاله توسط 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>
از ارسال فرم جلوگیری کنید
هنگامی که کاربر دکمه ارسال را فشار می دهد، از ارسال فرم جلوگیری کنید، که در غیر این صورت منجر به انتقال صفحه می شود:
var f = document.querySelector('#signup');
f.addEventListener('submit', e => {
e.preventDefault();
با جلوگیری از انتقال صفحه، می توانید اطلاعات اعتبار را در حین تأیید صحت آن حفظ کنید.
با ارسال درخواست احراز هویت
برای احراز هویت کاربر، اطلاعات اعتبار را با استفاده از AJAX به سرور خود تحویل دهید.
در سمت سرور، یک نقطه پایانی ایجاد کنید (یا به سادگی یک نقطه پایانی موجود را تغییر دهید) که با کد HTTP 200 یا 401 پاسخ دهد، به طوری که برای مرورگر مشخص شود که آیا ثبت نام/ورود/تغییر رمز عبور موفقیت آمیز است یا خیر.
مثلا:
// Try sign-in with AJAX
fetch('/signin', {
method: 'POST',
body: new FormData(e.target),
credentials: 'include',
});
اعتبارنامه را ذخیره کنید
برای ذخیره اعتبار، ابتدا بررسی کنید که آیا API در دسترس است یا خیر، سپس PasswordCredential با عنصر فرم به عنوان آرگومان به صورت همزمان یا ناهمزمان نمونه سازی کنید. با navigator.credentials.store() تماس بگیرید. اگر API در دسترس نیست، می‌توانید به سادگی اطلاعات نمایه را به مرحله بعدی ارسال کنید.
مثال همزمان:
if (window.PasswordCredential) {
var c = new PasswordCredential(e.target);
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
مثال ناهمزمان:
if (window.PasswordCredential) {
var c = await navigator.credentials.create({password: e.target});
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
پس از موفقیت در درخواست، اطلاعات اعتبار را ذخیره کنید. (اگر درخواست ناموفق بود، اطلاعات اعتبارنامه را ذخیره نکنید زیرا انجام این کار باعث سردرگمی کاربران بازگشته می شود.)
هنگامی که مرورگر کروم اطلاعات اعتبار را به دست می آورد، اعلانی ظاهر می شود که از شما می خواهد یک اعتبارنامه (یا ارائه دهنده فدراسیون) را ذخیره کند.
رابط کاربری را به روز کنید
اگر همه چیز خوب پیش رفت، رابط کاربری را با استفاده از اطلاعات نمایه به‌روزرسانی کنید یا به صفحه شخصی‌شده بروید.
}).then(profile => {
if (profile) {
updateUI(profile);
}
}).catch(error => {
showError('Sign-in Failed');
});
});
نمونه کد کامل
// 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');
});
});