כדי לספק חוויית משתמש מתוחכמת, חשוב לעזור למשתמשים לאמת את עצמם באתר. משתמשים מאומתים יכולים לקיים אינטראקציה עם שימוש בפרופיל ייעודי, סנכרון נתונים בין מכשירים או עיבוד נתונים במצב אופליין; הרשימה ממשיכה להיספר. אבל ליצור, לזכור ולהקליד סיסמאות נוטה להיות מסורבלות למשתמשי קצה, במיוחד במסכים של ניידים. שמובילות אותם לשימוש חוזר באותן סיסמאות באתרים שונים. כמובן שזה קורה מהווה סיכון אבטחה.
הגרסה האחרונה של Chrome (51) תומכת ב-Credential Management API. אלה ב-W3C כמו הצעה שעומדת בקריטריונים להשגה, שמעניקה למפתחים גישה פרוגרמטית למנהל פרטי הכניסה של דפדפן ועוזר למשתמשים להיכנס לחשבון בקלות רבה יותר.
מה זה Credential Management API?
בעזרת Credential Management API, מפתחים יכולים לאחסן ולאחזר סיסמאות ופרטי כניסה מאוחדים, והיא מספקת 3 פונקציות:
navigator.credentials.get()navigator.credentials.store()navigator.credentials.requireUserMediation()
באמצעות ממשקי ה-API הפשוטים האלה, המפתחים יכולים לבצע פעולות מתקדמות כמו:
- המשתמשים יכולים להיכנס לחשבון בהקשה אחת בלבד.
- חשוב לזכור את החשבון המאוחד שהמשתמש השתמש בו כדי להיכנס.
- מכניסים משתמשים שוב כשפג התוקף של הסשן.
בהטמעה של Chrome, פרטי הכניסה יישמרו בסיסמה של Chrome מנהל. אם המשתמשים מחוברים ל-Chrome, הם יכולים לסנכרן את הסיסמאות של המשתמש במכשירים שונים. אפשר לשתף את הסיסמאות המסונכרנות האלה גם עם אפליקציות ל-Android יש בהם שילוב של Smart Lock for passwords API for Android כדי ליהנות מחוויית שימוש חלקה בפלטפורמות שונות.
שילוב של Credential Management API באתר שלך
יש כל מיני דרכים להשתמש ב-Credential Management API באתר בהתאם לארכיטקטורה שלו. האם זו אפליקציה שכוללת דף אחד? האם זה מדור קודם עם מעברי דפים? האם טופס הכניסה נמצא רק בחלק העליון של המסך הדף הזה? האם לחצני הכניסה נמצאים בכל מקום? האם משתמשים יכולים לעיין באופן משמעותי מבלי להיכנס לחשבון? האם האיחוד פועל בתוך חלונות קופצים? או מה עושים לדרוש אינטראקציה בכמה דפים?
כמעט בלתי אפשרי לטפל בכל המקרים האלה, אבל בואו נראה לאפליקציה טיפוסית של דף יחיד.
- הדף העליון הוא טופס הרשמה.
- בהקשה על 'כניסה' הלחצן, המשתמשים יופנו לטופס כניסה.
- האפשרויות הטיפוסיות של מזהה/סיסמה גם בטופס ההרשמה וגם בטופס הכניסה פרטי כניסה ואיחוד, למשל עם כניסה באמצעות חשבון Google וכניסה ב-Facebook.
כשמשתמשים ב-Credential Management API, אפשר להוסיף את הפרטים הבאים תכונות באתר, לדוגמה:
- הצגת בורר חשבונות בכניסה: הצגת ממשק משתמש של בורר חשבונות מותאם כשמשתמש מקיש על 'כניסה'.
- אחסון פרטי כניסה: אחרי שהכניסה מוצלחת, מציעים לשמור את פרטי כניסה למנהל הסיסמאות של הדפדפן לשימוש במועד מאוחר יותר.
- לאפשר למשתמש להיכנס שוב באופן אוטומטי: המשתמש יוכל להיכנס שוב אם פג תוקף הסשן.
- כניסה אוטומטית בתהליך בחירת הרשת: לאחר שמשתמש יוצא מהחשבון, צריך להשבית את הכניסה האוטומטית של הביקור הבא של המשתמש.
תוכלו לנסות את התכונות האלה שהוטמעו באתר הדגמה באמצעות הקוד לדוגמה שלו.
הצגת בורר החשבונות בכניסה לחשבון
בין הקשה של משתמש על 'כניסה' לחצן והניווט לטופס כניסה, יכול להשתמש navigator.credentials.get() כדי לקבל מידע על פרטי הכניסה. Chrome יציג ממשק משתמש של בורר החשבונות שממנו המשתמש יכול לבחור חשבון.
אחזור אובייקט של פרטי כניסה לסיסמה
כדי להציג פרטי כניסה לסיסמה כאפשרויות בחשבון, צריך להשתמש ב-password: true.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
}).then(function(cred) {
// continuation
...
שימוש בפרטי כניסה באמצעות סיסמה כדי להיכנס
אחרי שהמשתמש יבחר חשבון, הפונקציה לפתרון הבעיה תקבל
פרטי כניסה לחשבון. אפשר לשלוח אותו לשרת באמצעות fetch():
// continued from previous example
}).then(function(cred) {
if (cred) {
if (cred.type == 'password') {
// Construct FormData object
var form = new FormData();
// Append CSRF Token
var csrf_token = document.querySelector('csrf_token').value;
form.append('csrf_token', csrf_token);
// You can append additional credential data to `.additionalData`
cred.additionalData = form;
// `POST` the credential object as `credentials`.
// id, password and the additional data will be encoded and
// sent to the url as the HTTP body.
fetch(url, { // Make sure the URL is HTTPS
method: 'POST', // Use POST
credentials: cred // Add the password credential object
}).then(function() {
// continuation
});
} else if (cred.type == 'federated') {
// continuation
שימוש בפרטי כניסה מאוחדים לצורך כניסה
כדי להציג למשתמש חשבונות מאוחדים, צריך להוסיף את federated, לוקחת מערך
של ספקי זהויות, לאפשרויות get().
navigator.credentials.get({
password: true, // `true` to obtain password credentials
federated: {
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
}
}).then(function(cred) {
// continuation
...
אפשר לבדוק את המאפיין type של אובייקט פרטי הכניסה כדי לראות אם הוא PasswordCredential
(type == 'password') או FederatedCredential (type == 'federated').
אם פרטי הכניסה הם
FederatedCredential,
תוכלו לקרוא ל-API המתאים באמצעות המידע שהוא מכיל.
});
} else if (cred.type == 'federated') {
// `provider` contains the identity provider string
switch (cred.provider) {
case 'https://accounts.google.com':
// Federated login using Google Sign-In
var auth2 = gapi.auth2.getAuthInstance();
// In Google Sign-In library, you can specify an account.
// Attempt to sign in with by using `login_hint`.
return auth2.signIn({
login_hint: cred.id || ''
}).then(function(profile) {
// continuation
});
break;
case 'https://www.facebook.com':
// Federated login using Facebook Login
// continuation
break;
default:
// show form
break;
}
}
// if the credential is `undefined`
} else {
// show form
אחסון פרטי כניסה
כשמשתמש נכנס לאתר שלכם באמצעות טופס, אפשר להשתמש
navigator.credentials.store()
כדי לאחסן את פרטי הכניסה. המשתמש יתבקש לאחסן או לא. בהתאם
לסוג של פרטי הכניסה, משתמשים ב-new
PasswordCredential()
או new
FederatedCredential()
כדי ליצור אובייקט של פרטי כניסה שאתם רוצים לאחסן.
יצירה ואחסון של פרטי כניסה לסיסמה מרכיב טופס
הקוד הבא משתמש במאפייני autocomplete כדי לבצע באופן אוטומטי
מפה
רכיבי הטופס ל-PasswordCredential
פרמטרים של אובייקטים.
HTML
html
<form id="form" method="post">
<input type="text" name="id" autocomplete="username" />
<input type="password" name="password" autocomplete="current-password" />
<input type="hidden" name="csrf_token" value="******" />
</form>
JavaScript
var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
יצירה ואחסון של פרטי כניסה מאוחדים
// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
id: id, // The id for the user
name: name, // Optional user name
provider: 'https://accounts.google.com', // A string that represents the identity provider
iconURL: iconUrl // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
המשתמש יכול להיכנס שוב באופן אוטומטי
כשמשתמש עוזב את האתר וחוזר אליו מאוחר יותר, פג תוקף הסשן. לא להפריע למשתמש להקליד את הסיסמה שלו בכל פעם לחזור. לאפשר למשתמש להיכנס שוב באופן אוטומטי.
אחזור אובייקט של פרטי כניסה
navigator.credentials.get({
password: true, // Obtain password credentials or not
federated: { // Obtain federation credentials or not
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
},
unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
if (cred) {
// auto sign-in possible
...
} else {
// auto sign-in not possible
...
}
});
הקוד אמור להיות דומה לקוד שמופיע בקטע 'הצגת בוחר החשבונות'
בעת הכניסה" . ההבדל היחיד הוא שתגדירו
unmediated: true
הפעולה הזו פותרת את הפונקציה באופן מיידי ומעניקה לך את פרטי הכניסה של כניסה אוטומטית של המשתמש לחשבון. יש כמה תנאים:
- המשתמש אישר את תכונת הכניסה האוטומטית בברכה.
- המשתמש כבר נכנס לאתר באמצעות ה-Credential Management API.
- למשתמש יש רק פרטי כניסה אחד ששמורים עבור המקור.
- המשתמש לא יצא באופן מפורש בסשן הקודם.
אם אחד מהתנאים האלה לא מתקיים, הפונקציה תידחה.
כניסה אוטומטית בתהליך בחירת הרשת
כשמשתמש מתנתק מהאתר שלך, באחריותך לוודא
שהמשתמש לא יתחבר שוב באופן אוטומטי. כדי לוודא
זאת, ה-Credential Management API מספק מנגנון שנקרא תהליך בחירת הרשת (Mediation).
אפשר להפעיל את מצב תהליך בחירת הרשת (Mediation) באמצעות התקשרות
navigator.credentials.requireUserMediation()
כל עוד סטטוס תהליך בחירת הרשת של המשתמש במקור מופעל, באמצעות
unmediated: true עם navigator.credentials.get(), הפונקציה הזו
פותרים את הבעיה עם undefined.
כניסה אוטומטית בתהליך בחירת הרשת
navigator.credentials.requireUserMediation();
שאלות נפוצות
האם יש אפשרות ש-JavaScript באתר יאחזר קובץ RAW
הסיסמה?
לא. אפשר לקבל סיסמאות רק כחלק מ-PasswordCredential, ולא ניתן לבצע זאת
גלויים בכל דרך.
יש אפשרות לשמור 3 ספרות לתעודה מזהה באמצעות פרטי הכניסה? Management API? לא כרגע. המשוב שלכם על המפרט אנחנו מעריכים מאוד.
האם אפשר להשתמש ב-Credential Management API בתוך iframe?
ה-API מוגבל להקשרים ברמה העליונה. שיחות אל .get() או .store()
ב-iframe יטופלו באופן מיידי ללא השפעה.
אפשר לשלב את התוסף ל-Chrome לניהול סיסמאות עם פרטי הכניסה
Management API?
אפשר לשנות את navigator.credentials ולחבר אותו לתוסף Chrome כדי:
פרטי כניסה מסוג get() או store().
משאבים
מידע נוסף על Credential Management API זמין במדריך השילוב.