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

Eiji Kitamura

החל מגרסה 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 דרך לעשות זאת.

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

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

אתם יכולים לנסות זאת בעצמכם באמצעות Chrome 125 בכתובת https://fedcm-rp-demo.glitch.me/button_flow.

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

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

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

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

  1. עוברים אל דף ההרשמה לתקופת הניסיון במקור.
  2. לוחצים על הלחצן Register וממלאים את הטופס כדי לבקש אסימון.
  3. מזינים את המקור של ה-IdP בתור Web Origin.
  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 125, Chrome יאכוף CORS בנקודת הקצה של טענת הנכוֹנוּת (assertion) של המזהה.

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.