חלק מהעדכונים שמתוארים כאן מוסברים בסשן של 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
והמשתמשים יכולים לבחור מבין האפשרויות שלהם:
![בורר החשבונות שמציג את פרטי ההתחברות לתת-הדומיין שנבחר](https://developer.chrome.google.cn/static/blog/credential-management-updates/image/account-chooser-showing-s-369ff3f4bb61e.png?authuser=5&hl=he)
Chrome 60
ב-Chrome 60 השקנו כמה שינויים חשובים ב-Credential Management API:
מכיוון שאין יותר צורך בפונקציית
fetch()
בהתאמה אישית על מנת לאחזר את הסיסמה, היא תוצא משימוש בקרוב.navigator.credentials.get()
מקבל עכשיו 'טיפוסים בני מנייה (enum)'mediation
במקום דגל בוליאניunmediated
.השיטה החדשה
navigator.credentials.create()
יוצרת באופן אסינכרוני אובייקטים של פרטי כניסה.
נדרשת התייחסות לזיהוי התכונות
כדי לבדוק אם ה-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
.
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
מונעת מהדפדפן להציג את ה-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? יש לנו מסמך של מדריך להעברת נתונים שאפשר להיעזר בו כדי לשדרג לגרסה החדשה.