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

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

בגרסה 116 של Chrome, נשלח ב-Chrome את שלוש התכונות החדשות הבאות של Federated Credential Management (FedCM):

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

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

ממשק API של רמז להתחברות

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

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

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

התוסף הזה מוסיף מערך של login_hints בתשובה של נקודת הקצה של רשימת החשבונות מה-IdP, עם כל סוגי המסננים האפשריים שה-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 ברשימת החשבונות, ה-RP יכול להפעיל את 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"
    }]
  }
});

ממשק API של פרטי משתמש

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

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

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

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

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

  • המשתמש נכנס בעבר ל-RP עם ה-IdP דרך FedCM באותו מופע של דפדפן, והנתונים לא נוקו.
  • המשתמש מחובר ל-IdP באותו מופע של דפדפן.
// 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 באותו מקור כמו ה-IdP, קוד ה-HTML להטמעה צריך לאפשר זאת באופן מפורש עם מדיניות ההרשאות של identity-credentials-get.

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

אפשר לראות אותו בפעולה בכתובת https://fedcm-rp-demo.glitch.me/button.

ממשק API של הקשר של RP

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

תיבת הדו-שיח של FedCM מעובדת באמצעות
תיבת הדו-שיח של FedCM עוברת עיבוד עם 'כניסה אל ****'. זאת אפשרות ברירת המחדל אם לא צוין הקשר RP.
תיבת הדו-שיח של FedCM מעובדת באמצעות
תיבת הדו-שיח של FedCM מוצגת עם הכיתוב 'הרשמה אל ****'
תיבת הדו-שיח של FedCM מעובדת באמצעות
תיבת הדו-שיח של FedCM עוברת רינדור עם הכיתוב 'המשך אל ****'
תיבת הדו-שיח של FedCM מעובדת באמצעות
תיבת הדו-שיח של 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 ב-IdP

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

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

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

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

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

IdP-SignIn-Status: action=signin

לחלופין, קוראים ל-JavaScript API IdentityProvider.login() מהמקור של IdP:

IdentityProvider.login()

כך סטטוס הכניסה של המשתמש יתועד כ'כניסה'. כשסטטוס הכניסה של המשתמש מוגדר כ-'sign-in', FedCM שולח בקשות לנקודת הקצה של רשימת החשבונות של ה-IdP ומציג חשבונות זמינים למשתמש בתיבת הדו-שיח של FedCM.

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

IdP-SignIn-Status: action=signout-all

לחלופין, קוראים ל-JavaScript API IdentityProvider.logout() מהמקור של IdP:

IdentityProvider.logout()

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

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

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

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

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

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

תיבת דו-שיח של FedCM עם הצעה להיכנס ל-IdP.
תיבת דו-שיח של FedCM עם הצעה להיכנס ל-IdP.

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

חלון קופץ שמוצג אחרי לחיצה על לחצן הכניסה ללחצן 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 מהדומיין הנוכחי. מה שיקרה בתוך חלון התוכן תלוי ב-IdP, אבל אין כינויי חלון זמינים לשליחת בקשת תקשורת ממקורות שונים לדף ה-RP. אחרי שהמשתמש מחובר, ה-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 דרך החלון הקופץ.

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

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

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

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

גרסת המקור לניסיון של סטטוס הכניסה ל-IdP ב-IdP זמינה מ-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 שמוצג מהמקור של ה-IdP.

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

צריך להחליף את TOKEN_GOES_HERE באסימון משלך.

יצירת מעורבות ושיתוף משוב

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

תמונה מאת דן כריסטיאן פדרץ ב-UnFlood