כניסה של משתמשים לחשבון

Eiji Kitamura

Meggin Kearney

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

כניסה אוטומטית

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

כדי להפעיל כניסה אוטומטית:

1. קבלת פרטי הכניסה.
2. מאמתים את המשתמש.
3. מעדכנים את ממשק המשתמש או ממשיכים לדף המותאם אישית.

קבלת פרטי הכניסה

Browser Support

• 51
• 18
• 60
• 13

Source

כדי לקבל את פרטי הכניסה, מפעילים את navigator.credentials.get(). מציינים את סוג פרטי הכניסה שרוצים לבקש באמצעות password או federated.

תמיד צריך להשתמש ב-mediation: 'silent' לכניסות אוטומטיות, כדי שתוכלו לבטל בקלות את התהליך אם המשתמש:

• לא מאוחסנים בו פרטי כניסה.
• שמורים בו כמה פרטי כניסה.
• לא מחובר לחשבון.

לפני שאתם מקבלים פרטי כניסה, אל תשכחו לבדוק אם המשתמש כבר מחובר:

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials.get({
      password: true,
      federated: {
        providers: ['https://accounts.google.com'],
      },
      mediation: 'silent',
    });
    // ...
  }
}

ה-promise שמוחזר על ידי navigator.credentials.get() נפתר באמצעות אובייקט של פרטי כניסה או null. כדי לקבוע אם מדובר ב-PasswordCredential או ב-FederatedCredential, פשוט מסתכלים על המאפיין .type של האובייקט, שיהיה password או federated.

אם הערך של .type הוא federated, המאפיין .provider הוא מחרוזת שמייצגת את ספק הזהויות.

אימות המשתמש

אחרי שקיבלתם את פרטי הכניסה, אתם צריכים להריץ תהליך אימות בהתאם לסוג פרטי הכניסה, password או federated:

    }).then(c => {
     if (c) {
       switch (c.type) {
         case 'password':
           return sendRequest(c);
           break;
         case 'federated':
           return gSignIn(c);
           break;
       }
     } else {
       return Promise.resolve();
     }

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

עדכון ממשק המשתמש

אם האימות מצליח, מעדכנים את ממשק המשתמש או מעבירים את המשתמש לדף המותאם אישית:

    }).then(profile => {
     if (profile) {
       updateUI(profile);
     }

חשוב להציג את הודעת השגיאה בנוגע לאימות

כדי למנוע בלבול בקרב המשתמשים, הם צריכים לראות הודעה קצרה בצבע כחול עם הכיתוב "מתבצעת כניסה" בזמן קבלת אובייקט פרטי הכניסה:

טיפ חשוב: אם הצלחתם לקבל אובייקט של פרטי כניסה אבל לא הצלחתם לאמת את המשתמש, כדאי להציג הודעת שגיאה:

        }).catch(error => {
          showError('Sign-in Failed');
        });
      }
    }

דוגמה לקוד מלא

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'silent',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        }
      })
      .catch((error) => {
        showError('Sign-in Failed');
      });
  }
}

כניסה באמצעות Account Chooser

אם המשתמש צריך תהליך בחירת רשת, או שיש לו כמה חשבונות, אפשר להשתמש ב-Account Chooser כדי לאפשר למשתמש להיכנס, ולא להציג את טופס הכניסה הרגיל, לדוגמה:

השלבים לכניסה באמצעות בורר החשבונות זהים לשלבים של כניסה אוטומטית, עם קריאה נוספת להצגת בורר החשבונות כחלק מקבלת פרטי הכניסה:

1. מקבלים את פרטי הכניסה ומציגים את Account Chooser.
2. מאמתים את המשתמש.
3. עדכון ממשק המשתמש או מעבר לדף מותאם אישית.

קבלת פרטי כניסה והצגת Account Chooser

מציגים את Account Chooser בתגובה לפעולה מוגדרת של המשתמש, למשל כשהמשתמש לוחץ על הכפתור "כניסה". קוראים לפונקציה navigator.credentials.get() ומוסיפים את mediation: 'optional' או את mediation: 'required' כדי להציג את Account Chooser.

כשהערך של mediation הוא required, למשתמש תמיד מוצג בורר חשבונות כדי להיכנס לחשבון. האפשרות הזו מאפשרת למשתמשים עם כמה חשבונות לעבור ביניהם בקלות. כשהערך של mediation הוא optional, למשתמש מוצג במפורש Account Chooser כדי להיכנס לחשבון אחרי קריאה ל-navigator.credentials.preventSilentAccess(). בדרך כלל זה קורה כדי לוודא שהכניסה האוטומטית לא תתבצע אחרי שהמשתמש בוחר לצאת מהחשבון או לבטל את הרישום.

דוגמה שמציגה את mediation: 'optional':

    var signin = document.querySelector('#signin');
    signin.addEventListener('click', e => {
     if (window.PasswordCredential || window.FederatedCredential) {
       navigator.credentials.get({
         password: true,
         federated: {
           providers: [
             'https://accounts.google.com'
           ]
         },
         mediation: 'optional'
       }).then(c => {

אחרי שהמשתמש בוחר חשבון, ה-promise נפתר באמצעות פרטי הכניסה. אם המשתמשים מבטלים את Account Chooser, או אם לא מאוחסנים פרטי כניסה, ה-promise נפתר עם null. במקרה כזה, צריך לחזור לטופס הכניסה.

חשוב לזכור להוסיף אפשרות חלופית של טופס כניסה

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

• פרטי הכניסה לא נשמרים.
• המשתמש סגר את בורר החשבונות בלי לבחור חשבון.
• ה-API לא זמין.

    }).then(profile => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
    }).catch(error => {
        location.href = '/signin';
    });

דוגמה לקוד מלא

var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
  if (window.PasswordCredential || window.FederatedCredential) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'optional',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
      })
      .catch((error) => {
        location.href = '/signin';
      });
  }
});

יצירת זהות מאוחדת

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

כדי להטמיע התחברות מאוחדת:

1. מאמתים את המשתמש באמצעות זהות של צד שלישי.
2. לשמור את פרטי הזהות.
3. עדכון ממשק המשתמש או מעבר לדף מותאם אישית (כמו בכניסה אוטומטית).

אימות משתמש באמצעות זהות של צד שלישי

כשמשתמש לוחץ על כפתור של התחברות מאוחדת, מפעילים את תהליך האימות של ספק הזהויות הספציפי באמצעות FederatedCredential.

Browser Support

• 51
• 79
• x
• x

Source

לדוגמה, אם הספק הוא Google, משתמשים בספריית JavaScript לכניסה באמצעות חשבון Google:

navigator.credentials
  .get({
    password: true,
    mediation: 'optional',
    federated: {
      providers: ['https://account.google.com'],
    },
  })
  .then(function (cred) {
    if (cred) {
      // Instantiate an auth object
      var auth2 = gapi.auth2.getAuthInstance();

      // Is this user already signed in?
      if (auth2.isSignedIn.get()) {
        var googleUser = auth2.currentUser.get();

        // Same user as in the credential object?
        if (googleUser.getBasicProfile().getEmail() === cred.id) {
          // Continue with the signed-in user.
          return Promise.resolve(googleUser);
        }
      }

      // Otherwise, run a new authentication flow.
      return auth2.signIn({
        login_hint: id || '',
      });
    }
  });

כניסה באמצעות חשבון Google יוצרת טוקן של מזהה כהוכחה לאימות.

באופן כללי, התחברות מאוחדת מבוססת על פרוטוקולים סטנדרטיים כמו OpenID Connect או OAuth. כדי ללמוד איך לבצע אימות באמצעות חשבונות מאוחדים, עיינו במסמכים של ספקי הזהויות המאוחדות הרלוונטיים. דוגמאות נפוצות:

• כניסה באמצעות חשבון Google
• התחברות דרך פייסבוק
• כניסה באמצעות Twitter
• GitHub OAuth

פרטי הזהות של החנות

אחרי שהאימות מסתיים, אתם יכולים לשמור את פרטי הזהות. המידע שתאחסנו כאן הוא ה-id מספק הזהויות ומחרוזת ספק שמייצגת את ספק הזהויות (name ו-iconURL הם אופציונליים). מידע נוסף על הפרטים האלה זמין במפרט של Credential Management.

כדי לאחסן פרטים של חשבון מאוחד, יוצרים אובייקט FederatedCredential חדש עם מזהה המשתמש ומזהה הספק. ואז מפעילים את navigator.credentials.store() כדי לאחסן את פרטי הזהות.

אחרי איחוד מוצלח, יוצרים מופע של FederatedCredential באופן סינכרוני או אסינכרוני:

דוגמה לגישה סינכרונית:

// Create credential object synchronously.
var cred = new FederatedCredential({
  id: id, // id in IdP
  provider: 'https://account.google.com', // A string representing IdP
  name: name, // name in IdP
  iconURL: iconUrl, // Profile image url
});

דוגמה לגישה אסינכרונית:

// Create credential object asynchronously.
var cred = await navigator.credentials.create({
  federated: {
    id: id,
    provider: 'https://accounts.google.com',
    name: name,
    iconURL: iconUrl,
  },
});

ואז שומרים את אובייקט פרטי הכניסה:

// Store it
navigator.credentials.store(cred).then(function () {
  // continuation
});

יציאה

להוציא את המשתמשים מהחשבון כשהם לוחצים על כפתור היציאה. קודם מסיימים את הסשן, ואז משביתים את הכניסה האוטומטית לביקורים עתידיים. (אתם יכולים לסיים את הסשנים איך שאתם רוצים).

איך להשבית את הכניסה האוטומטית לביקורים עתידיים

שיחה navigator.credentials.preventSilentAccess():

signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  navigator.credentials.preventSilentAccess();
}

כך הכניסה האוטומטית לא תתבצע עד שהמשתמש יפעיל אותה שוב. כדי להמשיך את הכניסה האוטומטית, המשתמש יכול לבחור להיכנס באופן מכוון על ידי בחירת החשבון שאיתו הוא רוצה להיכנס מתוך Account Chooser. אחרי שהמשתמש נכנס לחשבון, הוא תמיד מחובר עד שהוא יוצא מהחשבון באופן מפורש.

משוב