החל מגרסה 125 של Chrome, Button Mode API מתחיל גרסת המקור לניסיון במחשב. ספקי זהויות יכולים להשתמש ב-button Mode API ב-FedCM API, גם אם למשתמשים אין סשנים פעילים ב-IdP במהלך הקריאה ל-API. לאחר מכן המשתמשים יכולים להיכנס לאתר באמצעות החשבון המאוחד שלהם, בלי שהם עברתם לאתר של ה-IdP. ממשק המשתמש של FedCM במצב הלחצן בולט יותר בהשוואה לזה שבתהליך הווידג'ט הקיים, כי הוא מוגבל על ידי המשתמש ומשקף בצורה טובה יותר את כוונת המשתמש להיכנס.
ממשק ה-API של מצב הלחצנים
ממשק המשתמש של FedCM זמין כווידג'ט שמוצג בפינה השמאלית העליונה בפינה במחשב, או כגיליון תחתון בנייד, ברגע שה-API מופעל מה שיכול להיות כשהמשתמש מגיע לצד הנסמך. סוג הלמידה הזה נקרא מצב widget. כדי להציג את הווידג'ט, המשתמש חייב להיות מחובר ל-IdP לפני שהם מגיעים לגורם מוגבל. ל-FedCM בעצמו לא הייתה דרך אמינה לאפשר שהמשתמש יכול להיכנס ל-IdP לפני שהוא הצליח להיכנס ל-RP באמצעות החשבון שזמין ב-IdP. FedCM עומד להוסיף דרך לעשות זאת.
ממשק המשתמש החדש Button Mode API מוסיף מצב ממשק משתמש חדש שנקרא מצב button. בניגוד ל- ווידג'ט, מצב לחצנים לא אמור לפעול ברגע שהמשתמש מגיע הגורם המוגבל. היא מיועדת להפעלה כשהמשתמש מתחיל תהליך כניסה לחשבון. כמו לחיצה על 'כניסה באמצעות IdP' לחצן.
מיד אחרי שלוחצים על הלחצן, FedCM בודק אם המשתמש מחובר
IdP באמצעות אחזור לחשבונות
נקודת קצה (endpoint) או
סטטוס התחברות המאוחסן
דפדפן. אם
המשתמש עדיין לא מחובר לחשבון, FedCM מבקש מהמשתמש להיכנס ל-IdP באמצעות
login_url
שסופקו על ידי ה-IdP דרך חלון קופץ. אם הדפדפן מזהה שהמשתמש
כבר מחובר ל-IdP או ברגע שהמשתמש נכנס ל-IdP באמצעות
בחלון הקופץ, ב-FedCM נפתחת תיבת דו-שיח מודאלית שבה המשתמש יכול לבחור IdP
כדי להיכנס באמצעותו. לאחר בחירת החשבון, המשתמש יכול להמשיך לכניסה
ל-RP באמצעות חשבון IdP.
בממשק המשתמש של מצב הלחצנים, תיבת הדו-שיח של הכניסה שמוצגת גדולה יותר במצב ווידג'ט, וכך צריך להיות גם סמל המיתוג כדי לשמור על עקביות חזותית. גודל הסמל המינימלי למצב ווידג'ט הוא 25x25 פיקסלים, אבל הגודל המינימלי הסמל במצב לחצן הוא 40x40 פיקסלים. הערכים הידועים של ה-IdP file מאפשר ציון כתובות URL מרובות של סמלים באופן הבא:
{
// ... Other settings (like endpoints) here
"branding": {
"icons": [
{
"url": "https://size-25px-image",
"size": 25,
},
{
"url": "https://size-40px-image",
"size": 40
}
]
}
}
נסה אותו בעצמך באמצעות Chrome 125 בכתובת https://fedcm-rp-demo.glitch.me/button_flow.
כדי להשתמש ב-button Mode API:
- הפעלת התכונה הניסיונית
FedCmButtonModeב-chrome://flags. - חשוב לוודא שה-API מופעל באמצעות הפעלה זמנית של משתמש כמו לחיצה על לחצן.
- מפעילים את ה-API עם הפרמטר
mode, באופן הבא:
return await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/config.json",
clientId: "123",
nonce:"456",
}],
mode: "button"
}
});
הדפדפן ישלח פרמטר חדש לטענת הנכונות (assertion) של המזהה
נקודת קצה (endpoint)
שמייצג את סוג הבקשה על ידי הכללת mode=button:
POST /fedcm_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity
account_id=123&client_id=client1234&nonce=Ct60bD&disclosure_text_shown=true&is_auto_selected=false&mode=button
זיהוי תכונות
כדי לבדוק אם הדפדפן עומד בדרישות לשימוש במצב הלחצן, אפשר: בודקים באמצעות הקוד הבא:
let supportsFedCmMode = false;
try {
navigator.credentials.get({
identity: Object.defineProperty(
{}, 'mode', {
get: function () { supportsFedCmMode = true; }
}
)
});
} catch(e) {}
if (supportsFedCmMode) {
// The button mode is supported.
}
שימוש באפשרות אחרת בחשבון
הגורם המוגבל (RP) יכול לאפשר למשתמשים 'להשתמש בחשבונות אחרים' ב-Account Chooser, לדוגמה: כשמזהי IdP תומכים במספר חשבונות או מחליפים את החשבון הקיים.
כדי להפעיל את האפשרות להשתמש בחשבון אחר:
- הפעלת התכונה הניסיונית
FedCmUseOtherAccountב-chrome://flagsאו לרשום את גרסת המקור לניסיון שלbutton Mode API. - ה-IdP מציין את הפרטים הבאים בהגדרות ה-IdP file:
{
"accounts_endpoint" : ...,
"modes: {
"button": {
"supports_use_other_account": true,
}
}
}
השתתפות בגרסת המקור לניסיון
אפשר לנסות את ממשק ה-API של מצב הלחצן באופן מקומי על ידי הפעלת Chrome
דגל
chrome://flags#fedcm-button-mode ב-Chrome מגרסה 125 ואילך.
ספקי IdP יכולים גם להפעיל את מצב הלחצן על ידי רישום של גרסת מקור לניסיון:
- רישום גרסת מקור לניסיון של צד שלישי של הגורם המוגבל.
בגרסאות מקור לניסיון אפשר לנסות תכונות חדשות ולשלוח משוב על שימושיות, מעשיות ויעילות לקהילת תקני האינטרנט. עבור מידע נוסף זמין במדריך לגרסאות מקור לניסיון באינטרנט מפתחים.
גרסת המקור לניסיון שלbutton Mode API זמינה ב-Chrome 125 עד Chrome 130.
- עוברים אל רישום מקור לתקופת ניסיון. .
- לוחצים על הלחצן Register וממלאים את הטופס כדי לבקש אסימון.
- מזינים את מקור ה-IdP בתור מקור אינטרנט.
- בדיקת התאמה של צד שלישי כדי להחדיר את האסימון עם JavaScript במכשיר אחר מקורות.
- לוחצים על שליחה.
- מטמיעים את האסימון שהונפק באתר של צד שלישי.
כדי להטמיע את האסימון באתר של צד שלישי, צריך להוסיף את הקוד הבא ספריית JavaScript או SDK שמוצגים מהמקור של ה-IdP.
const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);
מחליפים את TOKEN_GOES_HERE באסימון שלכם.
נדרשים CORS ו-SameSite=None ב-Chrome 125
CORS
המערכת של Chrome תאכוף CORS ב-ID טענת נכוֹנוּת (assertion) נקודת קצה (endpoint) החל מ-Chrome 125.
CORS (שיתוף משאבים בין מקורות) היא מערכת שמורכבת משידור
כותרות HTTP, שקובעות אם דפדפנים לחסום קוד JavaScript בחזית
מגישה לתשובות לבקשות ממקורות שונים. נקודת הקצה של טענת הנכונות (assertion) של המזהה מופעלת
שרת ה-IdP חייב להגיב לבקשה עם כותרות נוספות.
הנה דוגמה לכותרת תגובה לבקשה מאת
https://fedcm-rp-demo.glitch.me:
Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true
SameSite=None
SameSite של קובצי Cookie
פרמטר מצהיר אם
קובץ ה-Cookie מוגבל להקשר של צד ראשון או של אותו אתר. על ידי ציון
להיות None, קובץ ה-cookie יכול להישלח לדומיין של צד שלישי.
ב-FedCM, Chrome שולח קובצי Cookie לחשבונות
endpoint,
טענת נכוֹנוּת (assertion) של המזהה
נקודת קצה (endpoint) וגם
הניתוק
נקודת קצה (endpoint). החל מ-
Chrome 125, Chrome ישלח את הבקשות עם פרטי הכניסה האלה רק עם קובצי cookie
סומן במפורש כ-SameSite=None.