דף זה תורגם על ידי Cloud Translation API.

ייעול תהליך הכניסה באמצעות ממשק ה-API לניהול פרטי הכניסה

Eiji Kitamura

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

הגרסה האחרונה של 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 שממנו המשתמש יכול לבחור חשבון.

חלון קופץ עם ממשק משתמש של Account Chooser שבו המשתמש בוחר להיכנס לחשבון. — קופץ ממשק משתמש של 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() על מנת ליצור אובייקט של פרטי כניסה שרוצים לאחסן.

Chrome שואל את המשתמשים אם הם רוצים לאחסן את פרטי הכניסה (או ספק של איחוד). — Chrome שואל את המשתמשים אם הם רוצים לאחסן את פרטי הכניסה (או ספק של איחוד)

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

הקוד הבא משתמש במאפייני 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.