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

Eiji Kitamura

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

Button Mode API

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

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

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

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

בממשק המשתמש של מצב הכפתור, תיבת הדו-שיח של הכניסה גדולה יותר בהשוואה למצב הווידג'ט, ולכן גם סמל המיתוג צריך להיות גדול יותר כדי לשמור על עקביות ויזואלית. הגודל המינימלי של הסמל במצב הווידג'ט הוא 25x25 פיקסלים, אבל הגודל המינימלי של הסמל במצב הלחצן הוא 40x40 פיקסלים. קובץ well-known של ספק הזהויות מאפשר לציין כמה כתובות 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-demo-rp.dev/active-mode.

משתמש נכנס ל-RP באמצעות 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"
    }
  });

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

שימוש באפשרות 'חשבון אחר'

ספק הזהויות יכול לאפשר למשתמשים 'להשתמש בחשבונות אחרים' בכלי לבחירת חשבון, למשל, כשספקי הזהויות תומכים בכמה חשבונות או בהחלפת החשבון הקיים.

כדי להפעיל את האפשרות להשתמש בחשבון אחר:

  • מפעילים את התכונה הניסיונית FedCmUseOtherAccount ב-chrome://flags או מצטרפים לניסוי המקור של Button Mode API.
  • ספק הזהויות מציין את הפרטים הבאים בקובץ ההגדרות של ספק הזהויות:
{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

השתתפות בתקופת הניסיון של התכונה

אתם יכולים לנסות את Button Mode API באופן מקומי על ידי הפעלה של תכונה ניסיונית של Chrome chrome://flags#fedcm-button-mode ב-Chrome 125 ואילך.

פלטפורמות IdP יכולות גם להפעיל את מצב הלחצן על ידי הרשמה לניסיון מקור:

גרסאות מקור לניסיון מאפשרות לכם לנסות תכונות חדשות ולתת משוב לקהילת תקני האינטרנט לגבי השימושיות, המעשיות והיעילות שלהן. מידע נוסף זמין במדריך לניסויי מקור למפתחי אתרים.

גרסת המקור לניסיון של Button Mode API זמינה מ-Chrome 125 עד Chrome 130.

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

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

מנגנון CORS (שיתוף משאבים בין מקורות) הוא מערכת שכוללת העברה של כותרות HTTP, וקובעת אם דפדפנים חוסמים קוד JavaScript של ממשק קצה מגישה לתשובות לבקשות בין מקורות. נקודת הקצה של טענת הזהות בשרת 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 אל נקודת הקצה של החשבונות, אל נקודת הקצה של הצהרת הזהות ואל נקודת הקצה של הניתוק. החל מגרסה Chrome 125, ‏ Chrome ישלח את הבקשות האלה עם אישורים רק עם קובצי Cookie שמסומנים במפורש כSameSite=None.