חשוב להקפיד שטופסי הרישום והכניסה יהיו פשוטים ככל האפשר.
שמירת פרטי הכניסה מטופסי כניסה כך שמשתמשים לא יצטרכו להיכנס שוב לחשבון כשהם יחזרו.
כדי לאחסן פרטי כניסה של משתמשים מטפסים:
- הכללה של
autocompleteבטופס. - למנוע את שליחת הטופס.
- כדי לאמת, צריך לשלוח בקשה.
- אחסון פרטי הכניסה.
- צריך לעדכן את ממשק המשתמש או להמשיך לדף המותאם אישית.
הכללת autocomplete בטופס
לפני שממשיכים,
כדאי לבדוק אם הטופס כולל מאפייני autocomplete.
הפעולה הזו עוזרת ל-Credential Management API למצוא את id ואת password
מהטופס וליצור אובייקט פרטי כניסה.
ההגדרות האלה עוזרות גם לדפדפנים שלא תומכים ב-Credential Management API כדי להבין את הסמנטיקה שלו. מידע נוסף על מילוי אוטומטי ב- המאמר הזה מאת ג'ייסון גריגסבי.
<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);
}
לאחר שהבקשה תתבצע בהצלחה, יש לאחסן את הפרטים של פרטי הכניסה. (לא לאחסן את פרטי פרטי הכניסה אם הבקשה נכשלה כי הוא מבלבל משתמשים חוזרים.)
כשדפדפן Chrome מקבל פרטי פרטי כניסה, קופצת התראה עם בקשה לאחסן פרטי כניסה (או ספק האיחוד).
עדכון ממשק המשתמש
אם הכול היה בסדר, עדכנו את ממשק המשתמש באמצעות פרטי הפרופיל. או להמשיך לדף המותאם אישית.
}).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');
});
});
תאימות דפדפן
PasswordCredential
navigator.credentials.store()