החל מגרסה 125 של Chrome, Button Mode API מתחיל גרסת מקור לניסיון במחשב. באמצעות Button Mode API, ספקי הזהויות יכולים להשתמש ב-FedCM API גם אם למשתמשים שלהם אין סשנים פעילים של IdP בזמן הקריאה ל-API. לאחר מכן, המשתמשים יוכלו להיכנס לאתר באמצעות החשבון המאוחד שלהם בלי להיכנס לאתר של ה-IdP. ממשק המשתמש של FedCM במצב לחצן בולט יותר בהשוואה לממשק המשתמש בתהליך הקיים של הווידג'ט, כי הוא מוצג רק אחרי תנועת משתמש ומשקף טוב יותר את הכוונה של המשתמש להיכנס לחשבון.
Button Mode API
ממשק המשתמש של FedCM היה זמין כווידג'ט שמוצג בפינה השמאלית העליונה במחשב, או כגיליון תחתון בנייד, ברגע שה-API הופעל, למשל כשהמשתמש מגיע לדף של הצד הנסמך (RP). המצב הזה נקרא מצב ווידג'ט. כדי להציג את הווידג'ט, המשתמש צריך להיכנס לחשבון ב-IdP לפני שהוא מגיע ל-RP. ל-FedCM עצמו לא הייתה דרך מהימנה לאפשר למשתמש להיכנס ל-IdP לפני שהוא יכול לאפשר לו להיכנס ל-RP באמצעות החשבון שזמין ב-IdP. בקרוב תתווסף ל-FedCM דרך לעשות זאת.
Button Mode API החדש מוסיף מצב חדש של ממשק משתמש שנקרא button. בניגוד למצב הווידג'ט, מצב הלחצן לא נועד להפעיל את ה-RP ברגע שהמשתמש מגיע אליו. במקום זאת, הוא אמור להופעל כשהמשתמש מתחיל תהליך כניסה, למשל לחיצה על הלחצן 'כניסה באמצעות IdP'.
ברגע שלוחצים על הלחצן, FedCM בודק אם המשתמש מחובר ל-IdP באמצעות אחזור לנקודת הקצה של החשבונות או סטטוס התחברות שנשמר בדפדפן. אם המשתמש עדיין לא נכנס לחשבון, מערכת FedCM מבקשת ממנו להיכנס ל-IdP באמצעות login_url שסופק על ידי ה-IdP דרך חלון קופץ. אם הדפדפן יודע שהמשתמש כבר נכנס ל-IdP, או ברגע שהמשתמש נכנס ל-IdP באמצעות חלון הקופץ, תיבת דו-שיח מודאלית של FedCM תופיע כדי שהמשתמש יוכל לבחור חשבון IdP שבו ייכנס. לאחר בחירת חשבון, המשתמש יכול להמשיך להיכנס ל-RP באמצעות חשבון ה-IdP.
בממשק המשתמש של מצב הלחצן, תיבת הדו-שיח של הכניסה מוצגת בגודל גדול יותר בהשוואה למצב הווידג'ט, ולכן גם סמל המותג צריך להיות גדול יותר כדי לשמור על עקביות חזותית. הגודל המינימלי של הסמל במצב הווידג'ט הוא 25x25 פיקסלים, והגודל המינימלי של הסמל במצב הלחצן הוא 40x40 פיקסלים. קובץ מוכר של ה-IdP מאפשר לציין כמה כתובות 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"
}
});
הדפדפן ישלח פרמטר חדש לנקודת הקצה של טענת הנכוֹנוּת של המזהה, שמייצג את סוג הבקשה, על ידי הכללת 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 יכול לאפשר למשתמשים 'להשתמש בחשבונות אחרים' בבורר החשבונות, למשל כש-IdPs תומכים במספר חשבונות או מחליפים את החשבון הקיים.
כדי להפעיל את האפשרות להשתמש בחשבון אחר:
- מפעילים את התכונה הניסיונית
FedCmUseOtherAccountב-chrome://flagsאו נרשמים לתקופת הניסיון של Button Mode API למקור. - ה-IdP מציין את הפרטים הבאים בקובץ התצורה של ה-IdP:
{
"accounts_endpoint" : ...,
"modes: {
"button": {
"supports_use_other_account": true,
}
}
}
השתתפות בגרסת המקור לניסיון
כדי לנסות את Button Mode API באופן מקומי, מפעילים דגל של Chrome
chrome://flags#fedcm-button-mode ב-Chrome מגרסה 125 ואילך.
ספקי IdP יכולים גם להפעיל את מצב הלחצן על ידי רישום תקופת ניסיון למקור:
- רושמים תקופת ניסיון למקור של צד שלישי בשביל ה-RP.
גרסאות מקור לניסיון מאפשרות לכם לנסות תכונות חדשות ולשלוח משוב לקהילת תקני האינטרנט לגבי נוחות השימוש, הפרקטיות והיעילות שלהן. למידע נוסף, קראו את המדריך לניסויים במקור למפתחי אינטרנט.
גרסת המקור לניסיון של Button Mode API זמינה מ-Chrome 125 ועד Chrome 130.
- עוברים אל דף ההרשמה לתקופת הניסיון במקור.
- לוחצים על הלחצן Register וממלאים את הטופס כדי לבקש אסימון.
- מזינים את המקור של ה-IdP כמקור אינטרנט.
- בודקים את האפשרות 'התאמה לצד שלישי' כדי להחדיר את האסימון באמצעות JavaScript במקורות אחרים.
- לוחצים על שליחה.
- להטמיע את האסימון שהונפק באתר של צד שלישי.
כדי להטמיע את האסימון באתר של צד שלישי, מוסיפים את הקוד הבא לספריית JavaScript או ל-SDK של ה-IdP שמוצגים מהמקור של ה-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 125, Chrome יאכוף CORS בנקודת הקצה של טענת הנכוֹנוּת של הזהות.
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 אל נקודת הקצה של החשבונות, אל נקודת הקצה של טענת הנכוֹנוּת של המזהה ואל נקודת הקצה של ניתוק החיבור. החל מגרסה 125 של Chrome, Chrome ישלח את הבקשות עם פרטי הכניסה רק עם קובצי cookie שמסומנים באופן מפורש בתור SameSite=None.