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

Eiji Kitamura

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

Chrome גרסה 57

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

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

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

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

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

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

בורר החשבונות שמציג את פרטי ההתחברות לתת-הדומיין שנבחר

Chrome 60

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

נדרשת התייחסות לזיהוי התכונות

כדי לבדוק אם ה-Credential Management 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 לא מנעה את כל וקטורי התקפה בצורה יעילה כפי שקיווינו, החלטנו לעשות שינוי.

ה-Credential Management 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.

עד גרסה 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 מונעת מהדפדפן להציג את ה-Account Chooser כשמעבירים פרטי כניסה.

הסימון מורחב עכשיו כגישור. תהליך בחירת הרשת (Mediation) של המשתמש יכול להתרחש במקרים הבאים:

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

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

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

ערך של mediation בהשוואה לדגל בוליאני התנהגות
silent שווה ל-unmediated: true פרטי הכניסה הועברו מבלי להציג Account Chooser.
optional שווה ל-unmediated: false הצגת Account Chooser אם בוצעה שיחה אל preventSilentAccess() בעבר.
required אפשרות חדשה הצג תמיד Account Chooser. שימושית כשרוצים לאפשר למשתמש להחליף חשבון באמצעות תיבת הדו-שיח של בורר החשבונות המקורי.

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

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

    // Sign-in
});

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

כדי להתאים היטב לנכס mediation החדש שמוצע בקריאה ל-get(), השם של ה-method 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? יש לנו מסמך של מדריך להעברת נתונים שאפשר להיעזר בו כדי לשדרג לגרסה החדשה.