שמירת פרטי הכניסה מ-Forms

Meggin Kearney
Meggin Kearney

שמירת פרטי הכניסה מטופסי כניסה

חשוב להקפיד שטופסי הרישום והכניסה יהיו פשוטים ככל האפשר.

שמירת פרטי הכניסה מטופסי כניסה כך שמשתמשים לא יצטרכו להיכנס שוב לחשבון כשהם יחזרו.

כדי לאחסן פרטי כניסה של משתמשים מטפסים:

  1. הכללה של autocomplete בטופס.
  2. למנוע את שליחת הטופס.
  3. כדי לאמת, צריך לשלוח בקשה.
  4. אחסון פרטי הכניסה.
  5. צריך לעדכן את ממשק המשתמש או להמשיך לדף המותאם אישית.

הכללת 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

תמיכה בדפדפן

  • Chrome: 51.
  • קצה: 79.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

מקור

תמיכה בדפדפן

  • Chrome: 51.
  • קצה: 79.
  • Firefox: 60.
  • Safari: 13.

מקור

משוב