העדכונים האחרונים ב-API לניהול פרטי הכניסה

Eiji Kitamura

חלק מהעדכונים שמפורטים כאן מוסברים בסשן Google I/O, כניסה מאובטחת ותהליך קל: שמירה על התעניינות המשתמשים:

Chrome 57

השינויים החשובים האלה הוכנסו ל-Credential Management API ב-Chrome 57.

אפשר לשתף את פרטי הכניסה מתת-דומיין אחר

Chrome יכול עכשיו לאחזר פרטי כניסה שמאוחסנים בתת-דומיין אחר באמצעות Credential Management API. לדוגמה, אם סיסמה מאוחסנת ב-login.example.com, סקריפט ב-www.example.com יכול להציג אותה כאחד מפריטי החשבון בתיבת הדו-שיח לבחירת חשבון.

עליכם לאחסן את הסיסמה באופן מפורש באמצעות navigator.credentials.store(), כדי שכאשר משתמש בוחר פרטי כניסה על ידי הקשה על תיבת הדו-שיח, הסיסמה תועבר ותועתק למקור הנוכחי.

אחרי שמאחסנים אותה, הסיסמה זמינה כפרטי כניסה באותו מקור www.example.com ואילך.

בצילום המסך הבא, פרטי הכניסה ששמורים ב-login.aliexpress.com גלויים ל-m.aliexpress.com וזמינים למשתמש לבחירה:

Chrome 60

ב-Chrome 60 נוספו כמה שינויים חשובים ב-Credential Management API:

• אובייקט PasswordCredential כולל עכשיו סיסמה.

• מאחר שפונקציית fetch() בהתאמה אישית כבר לא נדרשת לאחזור הסיסמה, היא תוסר משימוש בקרוב.

• navigator.credentials.get() מקבל עכשיו enum‏ mediation במקום דגל בוליאני unmediated.

• השם של requireUserMediation() שונה ל-preventSilentAccess().

• השיטה החדשה navigator.credentials.create() יוצרת באופן אסינכרוני אובייקטים של פרטי כניסה.

נדרשת התייחסות לזיהוי המאפיינים

כדי לבדוק אם ממשק ה-API לניהול פרטי כניסה זמין לגישה לפרטי כניסה מבוססי סיסמה ולפרטי כניסה מאוחדים, בודקים אם window.PasswordCredential או window.FederatedCredential זמינים.

if (window.PasswordCredential || window.FederatedCredential) {
  // The Credential Management API is available
}

אובייקט אחד (PasswordCredential) כולל עכשיו סיסמה

ב-Credential Management API ננקטה גישה שמרנית לטיפול בסיסמה. הוא הסתיר את הסיסמאות מ-JavaScript, והמפתחים נדרשו לשלוח את האובייקט PasswordCredential ישירות לשרת שלהם לצורך אימות באמצעות תוסף ל-API של fetch().

אבל הגישה הזו הובילה למספר הגבלות. קיבלנו משוב על כך שמפתחים לא יכולים להשתמש ב-API מהסיבות הבאות:

• הם נאלצו לשלוח את הסיסמה כחלק מאובייקט JSON.

• הם נאלצו לשלוח את ערך הגיבוב של הסיסמה לשרת שלהם.

אחרי ביצוע ניתוח אבטחה והבנה שהסתרת הסיסמאות מ-JavaScript לא מנעה את כל כיווני ההתקפה בצורה יעילה כפי שקיווינו, החלטנו לבצע שינוי.

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

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).then(passwordCred => {
    if (passwordCred) {
    let form = new FormData();
    form.append('email', passwordCred.id);
    form.append('password', passwordCred.password);
    form.append('csrf_token', csrf_token);
    return fetch('/signin', {
        method: 'POST',
        credentials: 'include',
        body: form
    });
    } else {

    // Fallback to sign-in form
    }
}).then(res => {
    if (res.status === 200) {
    return res.json();
    } else {
    throw 'Auth failed';
    }
}).then(profile => {
    console.log('Auth succeeded', profile);
});

בקרוב נוציא משימוש את התכונה 'אחזור מותאם אישית'

כדי לקבוע אם משתמשים בפונקציה fetch() מותאמת אישית, צריך לבדוק אם היא משתמשת באובייקט PasswordCredential או באובייקט FederatedCredential כערך של מאפיין credentials, לדוגמה:

fetch('/signin', {
    method: 'POST',
    credentials: c
})

מומלץ להשתמש בפונקציה רגילה של fetch() כפי שמוצג בדוגמת הקוד הקודמת, או להשתמש ב-XMLHttpRequest.

navigator.credentials.get() מקבל עכשיו תהליך בחירת רשת מסוג enum

עד גרסה 60 של Chrome, המאפיין navigator.credentials.get() קיבל מאפיין unmediated אופציונלי עם דגל בוליאני. לדוגמה:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    unmediated: true
}).then(c => {

    // Sign-in
});

ההגדרה unmediated: true מונעת מהדפדפן להציג את בורר החשבונות כשמאשרים פרטי כניסה.

הדגל מורחב עכשיו כתיווך. בחירת הרשת של המשתמש יכולה להתרחש במקרים הבאים:

• משתמש צריך לבחור חשבון כדי להיכנס באמצעותו.

• משתמש רוצה להיכנס באופן מפורש אחרי קריאה של navigator.credentials.requireUseMediation().

בוחרים אחת מהאפשרויות הבאות לערך mediation:

בדוגמה הזו, פרטי הכניסה מועברים בלי להציג חלונית לבחירת חשבון, זהו המקבילה לדגל הקודם, unmediated: true:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).then(c => {

    // Sign-in
});

השם של requireUserMediation() השתנה ל-preventSilentAccess()

כדי להתאים את השיטה לנכס mediation החדש שמוצג בקריאה get(), שינינו את השם של השיטה navigator.credentials.requireUserMediation() ל-navigator.credentials.preventSilentAccess().

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

signoutUser();
if (navigator.credentials) {
    navigator.credentials.preventSilentAccess();
}

יצירת אובייקטים של פרטי כניסה באופן אסינכרוני באמצעות השיטה החדשה navigator.credentials.create()

עכשיו אפשר ליצור אובייקטים של פרטי כניסה באופן אסינכרוני באמצעות השיטה החדשה, navigator.credentials.create(). בהמשך מופיעה השוואה בין שתי הגישות – סנכרון ואסינכרון.

יצירת אובייקט PasswordCredential

הגישה לסנכרון

let c = new PasswordCredential(form);

גישה אסינכרונית (חדש)

let c = await navigator.credentials.create({
    password: form
});

או:

let c = await navigator.credentials.create({
    password: {
    id: id,
    password: password
    }
});

יצירת אובייקט FederatedCredential

גישת סנכרון

let c = new FederatedCredential({
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
});

גישה אסינכרונית (חדש)

let c = await navigator.credentials.create({
    federated: {
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
    }
});

מדריך להעברת נתונים (מיגרציה)

יש לכם כבר הטמעה של Credential Management API? יש לנו מדריך להעברת נתונים (מיגרציה) שאפשר להיעזר בו כדי לשדרג לגרסה החדשה.