כדי לספק חוויית משתמש מתוחכמת, חשוב לעזור למשתמשים לאמת את עצמם באתר שלכם. משתמשים מאומתים יכולים לתקשר זה עם זה באמצעות פרופיל ייעודי, לסנכרן נתונים בין מכשירים או לעבד נתונים כשהם במצב אופליין. הרשימה ממשיכה עוד ועוד. אבל יצירה, זיכרון והקלדת סיסמאות בדרך כלל מסובכים למשתמשי קצה, במיוחד במסכים של ניידים, ולכן הם משתמשים באותן סיסמאות באתרים שונים. כמובן שמדובר בסיכון אבטחה.
הגרסה האחרונה של 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 ל-Android כדי ליהנות מחוויה חלקה בפלטפורמות שונות.
שילוב של Credential Management API באתר שלכם
אופן השימוש ב-Credential Management API באתר עשוי להשתנות בהתאם לארכיטקטורה. האם זו אפליקציה של דף יחיד? האם זו ארכיטקטורה מדור קודם עם מעברים בין דפים? האם טופס הכניסה נמצא רק בחלק העליון? האם לחצני הכניסה נמצאים בכל מקום? האם משתמשים יכולים לגלוש באתר באופן משמעותי מבלי להיכנס לחשבון? האם האיחוד פועל בחלונות קופצים? או האם לשם כך נדרש אינטראקציה בין כמה דפים?
כמעט בלתי אפשרי לכסות את כל המקרים האלה, אבל בואו נראה אפליקציה אופיינית לדף יחיד.
- הדף העליון הוא טופס הרשמה.
- בהקשה על הלחצן 'כניסה' המשתמשים יועברו לטופס כניסה.
- גם לטופס ההרשמה וגם לטופס הכניסה יש את האפשרויות הטיפוסיות לפרטי כניסה עם מזהה/סיסמה ואיחוד, למשל עם כניסה באמצעות חשבון Google וכניסה באמצעות Facebook.
באמצעות Credential Management API אפשר להוסיף לאתר את התכונות הבאות, לדוגמה:
- הצגת Account Chooser בזמן הכניסה: הצגת ממשק משתמש של בורר חשבונות מותאם כשמשתמש מקיש על 'כניסה'.
- אחסון פרטי הכניסה: לאחר הכניסה, תוכלו להציע למנהל הסיסמאות של הדפדפן לאחסן את פרטי פרטי הכניסה לשימוש במועד מאוחר יותר.
- המשתמשים יכולים להיכנס מחדש באופן אוטומטי: המשתמשים יוכלו להיכנס מחדש אם פג התוקף של הסשן.
- תהליך הכניסה האוטומטית בתהליך בחירת הרשת (Mediation): לאחר שמשתמש יוצא, משביתים את הכניסה האוטומטית בביקור הבא של המשתמש.
תוכלו לנסות את התכונות האלה באתר הדגמה עם הקוד לדוגמה שלו.
הצגת ה-Account Chooser בעת הכניסה
אחרי לחיצה של המשתמש על הלחצן 'כניסה' ומעבר לטופס כניסה, אפשר להשתמש ב-navigator.credentials.get() כדי לקבל את פרטי הכניסה. Chrome יציג ממשק משתמש של Account Chooser שממנו המשתמש יכול לבחור חשבון.
קבלת אובייקט של פרטי כניסה לסיסמה
כדי להציג פרטי כניסה לסיסמה כאפשרויות לחשבון, יש להשתמש ב-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
...
}
});
הקוד אמור להיות דומה לקוד שמופיע בקטע "Show Account Chooser
בעת הכניסה". ההבדל היחיד הוא שתגדירו את השדה unmediated: true
.
הפעולה הזאת תפתור את הפונקציה באופן מיידי ותספק את פרטי הכניסה כדי לכניס את המשתמש לחשבון באופן אוטומטי. יש כמה תנאים:
- המשתמש אישר את תכונת הכניסה האוטומטית בברכה.
- המשתמש נכנס בעבר לאתר באמצעות ה-Credential Management API.
- למשתמש יש רק פרטי כניסה אחדים שמאוחסנים עבור המקור שלך.
- המשתמש לא יצא מהחשבון באופן מפורש בסשן הקודם.
אם אחד מהתנאים האלה לא מתקיים, הפונקציה תידחה.
כניסה אוטומטית בתהליך בחירת הרשת
כשמשתמש יוצא מהאתר שלכם, באחריותכם לוודא שהמשתמש לא ייכנס שוב באופן אוטומטי לחשבון. כדי לוודא זאת, Credential Management API כולל מנגנון שנקרא Mediation.
כדי להפעיל את מצב גישור, מתקשרים אל navigator.credentials.requireUserMediation()
.
כל עוד סטטוס בחירת הרשת של המשתמש במקור מופעל, באמצעות unmediated: true
עם navigator.credentials.get()
, הפונקציה הזו תסתיים עם undefined
.
גישור לכניסה האוטומטית
navigator.credentials.requireUserMediation();
שאלות נפוצות
האם JavaScript באתר יכול לאחזר סיסמה גולמית?
לא. אפשר לקבל סיסמאות רק כחלק מ-PasswordCredential
ולא גלויה בשום אופן.
האם אפשר לאחסן 3 ספרות למזהה באמצעות Credential Management API? לא כרגע. נשמח מאוד לקבל ממך משוב על המפרט.
האם אפשר להשתמש ב-Credential Management API בתוך iframe?
ה-API מוגבל להקשרים ברמה העליונה. קריאות ל-.get()
או ל-.store()
ב-iframe ייפתרו מיד ללא השפעה.
האם אפשר לשלב את התוסף של Chrome לניהול הסיסמאות עם ה-Credential Management API?
אפשר לשנות את navigator.credentials
ולחבר אותו לתוסף Chrome אל פרטי הכניסה get()
או store()
.
משאבים
במדריך השילוב מפורט מידע נוסף על Credential Management API.