משתמשים מחוברים לחשבון

אייג'י קיטמורה

מגין קירני

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

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

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

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

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

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

תמיכה בדפדפן

• 51
• 18
• 60
• 13

מקור

כדי לקבל פרטים של פרטי כניסה, צריך להפעיל את 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',
    });
    // ...
  }
}

ההבטחה שהוחזרה על ידי 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 כדי לאפשר למשתמש להיכנס לחשבון ולדלג על טופס הכניסה הרגיל, לדוגמה:

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

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

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

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

כאשר mediation הוא required, תמיד מוצג למשתמש Account Chooser לצורך כניסה. בעזרת האפשרות הזו, משתמשים שיש להם מספר חשבונות יכולים לעבור ביניהם בקלות. כשהערך בשדה mediation הוא optional, למשתמש מוצג באופן מפורש בוחר חשבונות כדי להיכנס אחרי קריאה ל-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 => {

אחרי שהמשתמש בוחר חשבון, ההבטחה מסתיימת עם פרטי הכניסה. אם המשתמש יבטל את ה-Account Chooser או שלא שמורים פרטי כניסה, ההבטחה תיסגר עם 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.

תמיכה בדפדפן

• 51
• 79
• x
• x

מקור

לדוגמה, אם הספק הוא 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
• התחברות ל-Facebook
• כניסה ל-Twitter
• GitHub OAuth

אחסון פרטי הזהות

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

כדי לאחסן פרטי חשבון מאוחד, צריך ליצור אובייקט 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. לאחר מכן המשתמש תמיד מחובר שוב, עד שהוא יוצא באופן מפורש.

משוב