עדכונים של FedCM: IdP כניסה לסטטוס API, רמז להתחברות ועוד

גרסה Chrome 116 כוללת יכולות של FedCM, כמו Login Hint API, ‏ User Info API ו-RP Context API, ומתחילה תקופת ניסיון של IdP Sign-In Status API.

ב-Chrome 116, אנחנו משיקים את שלוש התכונות החדשות הבאות של ניהול פרטי כניסה מאוחדים (FedCM):

  • ‫Login Hint API: ציון חשבון משתמש מועדף לכניסה.
  • ‫User Info API: אחזור המידע של המשתמש החוזר כדי שספק הזהויות (IdP) יוכל להציג לחצן כניסה בהתאמה אישית בתוך iframe.
  • ‫RP Context API: שימוש בכותרת שונה מ 'כניסה' בתיבת הדו-שיח של FedCM.

בנוסף, Chrome מתחיל ניסיון של מקור עבור IdP Sign-In Status API. ה-API של סטטוס הכניסה ל-IdP הוא דרישה, והוא יהיה שינוי שובר תאימות כשהוא יושק. אם כבר הטמעתם את FedCM, חשוב להשתתף בתקופת הניסיון של מקורות.

Login Hint API

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

תיבת דו-שיח של FedCM שמוצגים בה כמה חשבונות משתמש.
תיבת דו-שיח של FedCM שבה מוצגים כמה חשבונות משתמשים

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

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

{
  "accounts": [{
    "id": "demo1",
    "email": "demo1@example.com",
    "name": "John Doe",
    "login_hints": ["demo1", "demo1@example.com"],
    ...
  }, {
    "id": "demo2",
    "email": "demo2@example.com",
    "name": "Jane Doe",
    "login_hints": ["demo2", "demo2@example.com"],
    ...
  }, ...]
}

אם מעבירים את הערך login_hints ברשימת החשבונות, ספק הזהויות יכול להפעיל את navigator.credentials.get() עם המאפיין loginHint כמו בדוגמת הקוד הבאה, כדי להציג באופן סלקטיבי את החשבון שצוין:

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "123",
      nonce: nonce,
      loginHint : "demo1@example.com"
    }]
  }
});

User Info API

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

כפתור לכניסה באמצעות חשבון Google.
כפתור לכניסה באמצעות חשבון Google
כפתור מותאם אישית לכניסה באמצעות חשבון Google.
כפתור מותאם אישית לכניסה באמצעות חשבון Google

הבעיה היא שהלחצן המותאם אישית מסתמך על קובצי Cookie של צד שלישי בדומיין של ספק הזהויות בתוך iframe כדי לזהות את המשתמש שמחובר לחשבון ולעבד את הלחצן, ולכן הוא לא יהיה זמין אחרי הוצאה משימוש של קובצי Cookie של צד שלישי.

ממשק ה-API של פרטי המשתמש, שזמין ב-Chrome 116, מספק ל-IdP דרך לקבל את המידע של המשתמש החוזר מהשרת בלי להסתמך על קובצי Cookie של צד שלישי.

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

  • המשתמש התחבר בעבר לאתר (Relying Party) באמצעות ספק הזהויות דרך FedCM באותו מופע של הדפדפן, והנתונים לא נמחקו.
  • המשתמש מחובר לספק הזהויות באותו מופע של הדפדפן.
// Iframe displaying a page from the https://idp.example origin
const user_info = await IdentityProvider.getUserInfo({
    configUrl: "https://idp.example/fedcm.json",
    clientId: "client1234"
});

// IdentityProvider.getUserInfo returns an array of user information.
if (user_info.length > 0) {
  // Chrome puts returning accounts first, so the first account received is guaranteed to be a returning account.
  const name = user_info[0].name;
  const given_name = user_info[0].given_name;
  const display_name = given_name ? given_name : name;
  const picture = user_info[0].picture;
  const email = user_info[0].email;
  // Renders the personalized sign-in button with the information above.
}

שימו לב: כדי לאפשר קריאה ל-IdentityProvider.getUserInfo() מתוך iframe שמקורו זהה למקור של ספק הזהויות, קוד ה-HTML להטמעה צריך לאפשר זאת באופן מפורש באמצעות identity-credentials-get מדיניות ההרשאות.

<iframe src="https://fedcm-demo-idp.dev" allow="identity-credentials-get"></iframe>

אפשר לראות את הפעולה שלו בכתובת https://fedcm-demo-rp.dev/active-mode.

RP Context API

‫RP Context API, שזמין ב-Chrome 116, מאפשר ל-RP לשנות את המחרוזת בממשק המשתמש של תיבת הדו-שיח של FedCM, כך שיוכל להתאים להקשרים מוגדרים מראש של אימות. צילומי המסך הבאים מציגים אפשרויות שונות:

תיבת דו-שיח של FedCM שמוצגת עם הכיתוב &#39;כניסה לחשבון ****&#39;.
תיבת הדו-שיח של FedCM מוצגת עם הכיתוב 'כניסה אל ****'. זוהי אפשרות ברירת המחדל אם לא צוין RP Context.
תיבת הדו-שיח של FedCM מוצגת עם
תיבת דו-שיח של FedCM שמוצגת עם הכיתוב 'הרשמה אל ****'
תיבת הדו-שיח של FedCM מוצגת עם
תיבת דו-שיח של FedCM שמוצגת עם הכיתוב 'המשך אל ****'
תיבת דו-שיח של FedCM שמוצגת עם האפשרות &#39;שימוש ב-****&#39;
תיבת דו-שיח של FedCM שמוצגת עם האפשרות 'שימוש ב-****'

השימוש פשוט: צריך לציין את המאפיין identity.context עם אחד מהערכים "signin" (ברירת מחדל), "signup", "use" או "continue".

const credential = await navigator.credentials.get({
  identity: {
    // "signin" is the default, "signup", "use" and "continue" 
    // can also be used
    context: "signup", 
    providers: [{
      configURL: "https://idp.example/fedcm.json",
      clientId: "1234",
    }],
  }
});

גרסת מקור לניסיון של IdP Sign-In Status API

‫Chrome מתחיל גרסת מקור לניסיון של IdP Sign-In Status API במחשב מגרסה Chrome 116, ולאחר מכן ב-Chrome ל-Android. גרסאות מקור לניסיון מאפשרות לכם לגשת לתכונה חדשה או ניסיונית כדי ליצור פונקציונליות שהמשתמשים יכולים לנסות לפרק זמן מוגבל לפני שהתכונה הופכת לזמינה לכולם.

‫IdP Sign-In Status API הוא מנגנון שבו IdP מעדכן את הדפדפן לגבי סטטוס הכניסה של המשתמש ב-IdP. באמצעות ה-API הזה, הדפדפן יכול לצמצם בקשות מיותרות לספק הזהויות ולמנוע מתקפות תזמון פוטנציאליות.

דיווח לדפדפן על סטטוס הכניסה של המשתמש

ספקי זהויות יכולים לסמן את סטטוס הכניסה של המשתמש לדפדפן על ידי שליחת כותרת HTTP או על ידי קריאה לממשק API של JavaScript, כשהמשתמש מחובר לספק הזהויות או כשהמשתמש מנותק מכל החשבונות שלו בספק הזהויות. הדפדפן מתעד את הסטטוס כאחד מהערכים הבאים: sign-in (כניסה), sign-out (יציאה) או unknown (לא ידוע) (ברירת מחדל).

כדי לציין שהמשתמש מחובר, שולחים כותרת HTTP בניווט ברמה העליונה או בבקשת משנה מאותו מקור:IdP-SignIn-Status: action=signin

IdP-SignIn-Status: action=signin

אפשרות אחרת היא להפעיל את JavaScript API IdentityProvider.login() ממקור ספק הזהויות:

IdentityProvider.login()

הם יתעדו את סטטוס הכניסה של המשתמש כ'כניסה'. כשסטטוס הכניסה של המשתמש מוגדר כ'כניסה', ה-PR שקורא ל-FedCM שולח בקשות לנקודת הקצה של רשימת החשבונות של ספק הזהויות ומציג למשתמש את החשבונות שזמינים בתיבת הדו-שיח של FedCM.

כדי לציין שהמשתמש יצא מכל החשבונות שלו, שולחים את כותרת ה-HTTP‏ IdP-SignIn-Status: action=signout-all בבקשת ניווט ברמה העליונה או בבקשת משנה מאותו מקור:

IdP-SignIn-Status: action=signout-all

אפשרות אחרת היא להפעיל את JavaScript API IdentityProvider.logout() ממקור ספק הזהויות:

IdentityProvider.logout()

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

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

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

מה קורה אם הסשן של המשתמש מסתיים? לאפשר למשתמש להיכנס לחשבון באמצעות תהליך כניסה דינמי

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

בתיבת הדו-שיח של FedCM תוצג הודעה, כמו שמוצג בתמונה הבאה:

תיבת דו-שיח של FedCM שמציעה להיכנס לחשבון בספק הזהויות.
תיבת דו-שיח של FedCM שמציעה להיכנס ל-IdP.

בלחיצה על הלחצן המשך, הדפדפן פותח חלון קופץ ושולח את המשתמש לדף הכניסה של ספק ה-IdP.

חלון קופץ שמוצג אחרי שלוחצים על הלחצן לכניסה אל ספק הזהויות.
חלון קופץ שמוצג אחרי שלוחצים על הכפתור לכניסה לספק הזהויות.

אפשר לציין את כתובת ה-URL של דף הכניסה (שחייבת להיות המקור של ה-IdP) באמצעות signin_url כחלק מקובץ ההגדרות של ה-IdP.

{
  "accounts_endpoint": "/auth/accounts",
  "client_metadata_endpoint": "/auth/metadata",
  "id_assertion_endpoint": "/auth/idtokens",
  "signin_url": "/signin"
  }
}

החלון הקופץ הוא חלון דפדפן רגיל שמשתמש בקובצי Cookie מהדומיין הנוכחי. מה שקורה בחלון התוכן תלוי בספק הזהויות, אבל אין אפשרות לשלוח בקשת תקשורת חוצה-מקורות לדף Relying Party. אחרי שהמשתמש נכנס לחשבון, ספק ה-IdP צריך:

  • שולחים את הכותרת IdP-SignIn-Status: action=signin או קוראים ל-API‏ IdentityProvider.login() כדי להודיע לדפדפן שהמשתמש התחבר.
  • הפונקציה IdentityProvider.close() נסגרת (החלון הקופץ).
// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
  // Signal to the browser that the user has signed in.
  IdentityProvider.close();
}
משתמש נכנס ל-RP אחרי שהוא נכנס ל-IdP באמצעות FedCM

אפשר לנסות את ההתנהגות של IdP Sign-In Status API בהדגמה שלנו. הסשן יפוג שלוש דקות אחרי הכניסה לספק הזהויות של ההדגמה. אחר כך תוכלו לראות את הכניסה ל-IdP דרך ההתנהגות של החלון הקופץ.

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

אתם יכולים לנסות את IdP Sign-In Status API באופן מקומי על ידי הפעלת תכונה ניסיונית של Chrome
chrome://flags#fedcm-idp-signin-status-api ב-Chrome 116 ואילך.

אפשר גם להפעיל את IdP Sign-In Status API על ידי רישום ניסיון מקור פעמיים:

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

גרסת המקור לניסיון של IdP Sign-In Status API זמינה מ-Chrome 116 עד Chrome 119.

הרשמה לגרסת מקור לניסיון של IdP

  1. עוברים אל דף ההרשמה לתקופת ניסיון של תכונה.
  2. לוחצים על הלחצן הרשמה וממלאים את הטופס כדי לבקש טוקן.
  3. מזינים את המוצא של ספק ה-IdP בתור מוצא אינטרנט.
  4. לוחצים על שליחה.
  5. מוסיפים תג origin-trial <meta> לראש הדפים שמשתמשים ב-IdentityProvider.close(). לדוגמה, זה יכול להיראות כך:
    <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

הרשמה לתקופת ניסיון של תכונה ממקור צד שלישי ב-RP

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

כדי להטמיע את האסימון באתר צד שלישי, מוסיפים את הקוד הבא לספריית JavaScript או ל-SDK שמוגשים מהמקור של ספק הזהויות.

const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);

מחליפים את TOKEN_GOES_HERE באסימון שלכם.

השתתפות ושיתוף משוב

אם יש לכם משוב או שנתקלתם בבעיות במהלך הבדיקה, אתם יכולים לשתף אותם בכתובת crbug.com.

תמונה שצולמה על ידי Dan Cristian Pădureț ב-Unsplash