עדכונים מ-FedCM: גרסת המקור לניסיון של לחצן מצב API, CORS ו-SameSite

החל מגרסה 125 של Chrome, Button Mode API מתחיל גרסת המקור לניסיון במחשב. ספקי זהויות יכולים להשתמש ב-button Mode API ב-FedCM API, גם אם למשתמשים אין סשנים פעילים ב-IdP במהלך הקריאה ל-API. לאחר מכן המשתמשים יכולים להיכנס לאתר באמצעות החשבון המאוחד שלהם, בלי שהם עברתם לאתר של ה-IdP. ממשק המשתמש של FedCM במצב הלחצן בולט יותר בהשוואה לזה שבתהליך הווידג'ט הקיים, כי הוא מוגבל על ידי המשתמש ומשקף בצורה טובה יותר את כוונת המשתמש להיכנס.

ממשק ה-API של מצב הלחצנים

ממשק המשתמש של FedCM זמין כווידג'ט שמוצג בפינה השמאלית העליונה בפינה במחשב, או כגיליון תחתון בנייד, ברגע שה-API מופעל מה שיכול להיות כשהמשתמש מגיע לצד הנסמך. סוג הלמידה הזה נקרא מצב widget. כדי להציג את הווידג'ט, המשתמש חייב להיות מחובר ל-IdP לפני שהם מגיעים לגורם מוגבל. ל-FedCM בעצמו לא הייתה דרך אמינה לאפשר שהמשתמש יכול להיכנס ל-IdP לפני שהוא הצליח להיכנס ל-RP באמצעות החשבון שזמין ב-IdP. FedCM עומד להוסיף דרך לעשות זאת.

במצב הווידג'ט, מוצגת תיבת דו-שיח בפינה השמאלית העליונה ב-Chrome במחשב ללא הפעלת המשתמש.
במצב הווידג'ט, מוצגת תיבת דו-שיח בפינה השמאלית העליונה ב-Chrome במחשב ללא הפעלה של המשתמש.

ממשק המשתמש החדש 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 במחשב.
כשמצב הלחצן מוצג, תיבת דו-שיח של חלון מוצגת בחלק המרכזי העליון של דפדפן Chrome במחשב, עם סמל גדול יותר.

נסה אותו בעצמך באמצעות Chrome 125 בכתובת https://fedcm-rp-demo.glitch.me/button_flow.

משתמש נכנס ל-RP באמצעות לחצן Mode API.

כדי להשתמש ב-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.

  1. עוברים אל רישום מקור לתקופת ניסיון. .
  2. לוחצים על הלחצן Register וממלאים את הטופס כדי לבקש אסימון.
  3. מזינים את מקור ה-IdP בתור מקור אינטרנט.
  4. בדיקת התאמה של צד שלישי כדי להחדיר את האסימון עם JavaScript במכשיר אחר מקורות.
  5. לוחצים על שליחה.
  6. מטמיעים את האסימון שהונפק באתר של צד שלישי.

כדי להטמיע את האסימון באתר של צד שלישי, צריך להוסיף את הקוד הבא ספריית 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.