עדכונים של 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 גרסת טרום-השקה של ה-API של סטטוס הכניסה ל-IdP. ממשק ה-API של סטטוס הכניסה של IdP הוא דרישה, והוא יהיה שינוי מהותי כשיישלח. אם כבר הטמעתם את FedCM, חשוב להשתתף בתוכנית הניסוי למקור.

Login Hint API

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

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

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

התוסף הזה מוסיף מערך של login_hints בתשובה של accounts list endpoint מה-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"],
    ...
  }, ...]
}

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

RP Context API

ממשק 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 Sign-In Status API

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

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

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

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

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

IdP-SignIn-Status: action=signin

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

IdentityProvider.login()

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

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

IdP-SignIn-Status: action=signout-all

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

IdentityProvider.logout()

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

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

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

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

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

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

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

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

חלון קופץ שמוצג אחרי שלוחצים על הלחצן &#39;כניסה&#39; ב-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

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

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

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

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

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

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

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

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

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

  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 באסימון משלכם.

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

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

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