מומלץ שהרישום והכניסה יהיו פשוטים ככל האפשר.
מומלץ לשמור את פרטי הכניסה בטופסי הכניסה כדי שהמשתמשים לא יצטרכו להיכנס שוב כשהם חוזרים.
כדי לאחסן פרטי כניסה של משתמשים מטפסים:
- יש לכלול
autocompleteבטופס. - מניעת שליחת הטופס.
- כדי לאמת, אפשר לשלוח בקשה.
- שומרים את פרטי הכניסה.
- צריך לעדכן את ממשק המשתמש או להמשיך לדף המותאם אישית.
יש לכלול autocomplete בטופס
לפני שממשיכים, צריך לבדוק אם הטופס כולל מאפייני autocomplete.
הפעולה הזו עוזרת ל-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()