כדי להיכנס למשתמשים, צריך לאחזר את פרטי הכניסה מהסיסמה של הדפדפן ולהשתמש בהם כדי לחבר משתמשים באופן אוטומטי. למשתמשים עם מספר חשבונות, אפשר להם לבחור את החשבון בהקשה אחת באמצעות בורר החשבונות.
כניסה אוטומטית
כניסה אוטומטית יכולה להתבצע בכל מקום באתר שלכם. לא רק את הדף העליון, אלא גם דפי פירוט אחרים. האפשרות הזו שימושית כשמשתמשים מגיעים לדפים שונים באתר שלכם, באמצעות מנוע חיפוש.
כדי להפעיל כניסה אוטומטית:
- לקבל מידע על פרטי הכניסה.
- אימות המשתמש.
- צריך לעדכן את ממשק המשתמש או להמשיך לדף המותאם אישית.
קבלת מידע על פרטי הכניסה
כדי לקבל את פרטי הכניסה, צריך להפעיל
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 Selectr כחלק מקבלת המידע על פרטי הכניסה:
- קבלת פרטי הכניסה והצגת ה-Account Selectr.
- אימות המשתמש.
- מעדכנים את ממשק המשתמש או ממשיכים לדף מותאם אישית.
קבלת פרטי פרטי כניסה והצגת הבורר של החשבונות
להציג Account Selectr בתגובה לפעולת משתמש מוגדרת.
לדוגמה, כשהמשתמש מקיש על הלחצן 'כניסה' לחצן. שיחת טלפון
navigator.credentials.get(),
ומוסיפים את mediation: 'optional' או mediation: 'required' כדי להציג את ה-Account Selectr.
כשהערך של mediation הוא required, תמיד מוצג למשתמש בורר חשבונות כדי להיכנס.
כך משתמשים שיש להם כמה חשבונות יכולים לעבור ביניהם בקלות.
כשהערך בשדה 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 Selectr,
או אם לא מאוחסנים פרטי כניסה,
ההבטחה תיפתר ב-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';
});
}
});
התחברות מאוחדת
התחברות מאוחדת מאפשרת למשתמשים להיכנס בהקשה אחת בלי לזכור פרטי התחברות נוספים לאתר.
כדי להטמיע התחברות מאוחדת:
- אימות המשתמש באמצעות זהות של צד שלישי.
- שומרים את פרטי הזהות.
- מעדכנים את ממשק המשתמש או ממשיכים לדף מותאם אישית (כמו בכניסה אוטומטית).
אימות המשתמש באמצעות זהות של צד שלישי
כשמשתמש מקיש על לחצן התחברות מאוחדת,
להריץ את תהליך האימות הספציפי של ספק הזהויות
FederatedCredential
לדוגמה, אם הספק הוא 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. כדי ללמוד איך לבצע אימות באמצעות חשבונות מאוחדים, להתייחס לספקי הזהויות המאוחדים המתאימים מסמכים. דוגמאות פופולריות כוללות:
אחסון פרטי הזהות
אחרי השלמת האימות, תוכלו לשמור את פרטי הזהות.
המידע שיישמר כאן הוא 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();
}
כך תוכלו להבטיח שהכניסה האוטומטית לא תתבצע עד לפעם הבאה שהמשתמש יפעיל את הכניסה האוטומטית. כדי להמשיך את הכניסה האוטומטית, המשתמש יכול לבחור להיכנס באופן מכוון על ידי בחירה בחשבון שאליו הם רוצים להיכנס בבורר החשבונות. לאחר מכן המשתמש תמיד נכנס לחשבון, עד שהוא יוצא מהחשבון באופן מפורש.