‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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

Eiji Kitamura

Meggin Kearney

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

טופסי ההרשמה והכניסה צריכים להיות פשוטים ככל האפשר.

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

כדי לשמור פרטי כניסה של משתמשים מטפסים:

מוסיפים את 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`

Browser Support

Source

`navigator.credentials.store()`