FedCM से जुड़े अपडेट: आईडीपी (IdP) साइन-इन स्टेटस एपीआई, लॉगिन हिंट वगैरह

Chrome 116 में FedCM की सुविधाएं शामिल हैं. जैसे, Login Hint API, User Info API, और RP Context API. साथ ही, इसमें IdP Sign-In Status API के लिए ऑरिजिन ट्रायल शुरू किया गया है.

Chrome 116 में, Chrome फ़ेडरेटेड क्रेडेंशियल मैनेजमेंट (FedCM) की ये तीन नई सुविधाएं उपलब्ध करा रहा है:

  • Login Hint API: साइन इन करने के लिए, पसंदीदा उपयोगकर्ता खाता चुनें.
  • User Info API: इस एपीआई की मदद से, वापस आने वाले उपयोगकर्ता की जानकारी फ़ेच की जाती है. इससे आइडेंटिटी प्रोवाइडर (आईडीपी), iframe में लोगों की दिलचस्पी के हिसाब से साइन-इन बटन दिखा सकता है.
  • RP Context API: FedCM डायलॉग में, 'साइन इन करें' से अलग टाइटल का इस्तेमाल करें.

इसके अलावा, Chrome IdP Sign-In Status API के लिए ऑरिजिन ट्रायल शुरू कर रहा है. IdP Sign-in Status API का इस्तेमाल करना ज़रूरी है. इसे शिप करने पर, यह एक बड़ा बदलाव होगा. अगर आपने FedCM को पहले से लागू किया हुआ है, तो पक्का करें कि आपने ऑरिजिन ट्रायल में हिस्सा लिया हो.

Login Hint API

FedCM को चालू करने पर, ब्राउज़र में आइडेंटिटी प्रोवाइडर (आईडीपी) का वह खाता दिखता है जिससे आपने साइन इन किया है. अगर IdP एक से ज़्यादा खातों के साथ काम करता है, तो यह उन सभी खातों को दिखाता है जिनसे आपने साइन इन किया है.

FedCM का डायलॉग बॉक्स, जिसमें उपयोगकर्ता के कई खाते दिख रहे हैं.
FedCM डायलॉग में एक से ज़्यादा उपयोगकर्ता खाते दिखाए जा रहे हैं

उपयोगकर्ता के साइन इन करने के बाद, कभी-कभी भरोसा करने वाली पार्टी (आरपी), उपयोगकर्ता से फिर से पुष्टि करने के लिए कहती है. हालांकि, उपयोगकर्ता को यह पता नहीं हो सकता कि वह किस खाते का इस्तेमाल कर रहा है. अगर आरपी यह तय कर सकता है कि किस खाते से साइन इन करना है, तो उपयोगकर्ता के लिए खाता चुनना आसान हो जाएगा. लॉगिन हिंट की सुविधा, Chrome 116 में उपलब्ध है. इसकी मदद से, आरपी सूची को एक तक सीमित कर सकता है.

यह एक्सटेंशन, IdP से मिले accounts list endpoint के जवाब में, 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

अब आईडीपी के लोगो वाले साइन-इन बटन का इस्तेमाल करना आम बात हो गई है. इनकी मदद से, उपयोगकर्ता आइडेंटिटी फ़ेडरेशन का इस्तेमाल करके साइन इन कर सकते हैं. हालांकि, बटन को उपयोगकर्ता की प्रोफ़ाइल के आइकॉन और उसकी जानकारी का इस्तेमाल करके सजाने से, साइन इन करना और भी आसान हो जाता है. ऐसा तब होता है, जब उपयोगकर्ता ने इस वेबसाइट पर पहले कभी आईडीपी से साइन अप किया हो.

'Google से साइन इन करें' बटन.
'Google से साइन इन करें' बटन
'Google से साइन इन करें' बटन, जो आपके हिसाब से बना होता है.
Google खाते से साइन इन करने के लिए, दिलचस्पी के मुताबिक बनाया गया बटन

समस्या यह है कि लोगों के हिसाब से बटन दिखाने की सुविधा, iframe में मौजूद IdP डोमेन पर तीसरे पक्ष की कुकी पर निर्भर करती है. इससे, साइन-इन किए हुए उपयोगकर्ता की पहचान की जाती है, ताकि बटन को रेंडर किया जा सके. इसलिए, तीसरे पक्ष की कुकी के बंद होने के बाद, यह सुविधा उपलब्ध नहीं होगी.

उपयोगकर्ता की जानकारी देने वाला एपीआई, Chrome 116 में उपलब्ध है. इससे IdP को सर्वर से, वापस आने वाले उपयोगकर्ता की जानकारी मिलती है. इसके लिए, उसे तीसरे पक्ष की कुकी पर निर्भर नहीं रहना पड़ता.

इस एपीआई को IdP, RP की वेबसाइट पर एम्बेड किए गए iframe से कॉल करता है. इससे, वह उपयोगकर्ता की जानकारी को फिर से पा सकता है और एक ऐसा बटन रेंडर कर सकता है जो RP की वेबसाइट का हिस्सा हो. एपीआई कॉल के साथ, ब्राउज़र खातों की सूची वाले एंडपॉइंट पर अनुरोध करता है. इसके बाद, उपयोगकर्ता की जानकारी का एक ऐरे दिखाता है. ऐसा तब होता है, जब:

  • उपयोगकर्ता ने पिछले समय में, एक ही ब्राउज़र इंस्टेंस पर 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.
}

ध्यान दें कि IdP के ऑरिजिन वाले iframe से IdentityProvider.getUserInfo() को कॉल करने की अनुमति देने के लिए, एम्बेड किए गए एचटीएमएल को IdentityProvider.getUserInfo() permissions policy के साथ साफ़ तौर पर इसकी अनुमति देनी होगी.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 में शिपिंग की सुविधा देता है. इससे आरपी, FedCM डायलॉग यूज़र इंटरफ़ेस (यूआई) में स्ट्रिंग में बदलाव कर सकता है, ताकि पहले से तय किए गए पुष्टि करने के कॉन्टेक्स्ट को शामिल किया जा सके. अलग-अलग विकल्पों के लिए, यहां दिए गए स्क्रीनशॉट देखें:

FedCM डायलॉग को &#39;**** में साइन इन करें&#39; के साथ रेंडर किया गया है.
"**** में साइन इन करें" मैसेज के साथ FedCM डायलॉग रेंडर किया गया है. अगर आरपी कॉन्टेक्स्ट के बारे में नहीं बताया गया है, तो यह डिफ़ॉल्ट विकल्प होता है.
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 116 से, डेस्कटॉप पर IdP Sign-In Status API ऑरिजिन ट्रायल शुरू किया गया है. इसके बाद, इसे Android Chrome पर भी शुरू किया जाएगा. ऑरिजिन ट्रायल से आपको नई या एक्सपेरिमेंट के तौर पर शुरू की गई सुविधा का ऐक्सेस मिलता है. इससे ऐसी सुविधाएं बनाई जा सकती हैं जिन्हें उपयोगकर्ता, सभी के लिए उपलब्ध होने से पहले सीमित समय के लिए आज़मा सकते हैं.

IdP Sign-In Status API एक ऐसा तरीका है जिसमें आईडीपी (IdP), ब्राउज़र को आईडीपी (IdP) पर उपयोगकर्ता के साइन-इन स्टेटस के बारे में बताता है. इस एपीआई की मदद से, ब्राउज़र IdP को भेजे जाने वाले गैर-ज़रूरी अनुरोधों को कम कर सकता है. साथ ही, टाइमिंग के संभावित हमलों को कम कर सकता है.

यह कुकी, ब्राउज़र को उपयोगकर्ता के साइन-इन स्टेटस के बारे में सूचना देती है

जब उपयोगकर्ता IdP में साइन इन होता है या जब वह अपने सभी IdP खातों से साइन आउट हो जाता है, तब IdP, ब्राउज़र को उपयोगकर्ता के साइन-इन स्टेटस की जानकारी दे सकते हैं. इसके लिए, वे एचटीटीपी हेडर भेजते हैं या JavaScript API को कॉल करते हैं. ब्राउज़र, स्टेटस को इनमें से किसी एक के तौर पर रिकॉर्ड करता है: "sign-in", "sign-out" या "unknown" (डिफ़ॉल्ट).

यह सिग्नल देने के लिए कि उपयोगकर्ता ने साइन इन किया है, टॉप-लेवल नेविगेशन या एक ही ऑरिजिन वाले सब-रिसोर्स के अनुरोध में IdP-SignIn-Status: action=signin एचटीटीपी हेडर भेजें:

IdP-SignIn-Status: action=signin

इसके अलावा, IdP के ऑरिजिन से JavaScript API IdentityProvider.login() को कॉल करें:

IdentityProvider.login()

ये कुकी, उपयोगकर्ता के साइन-इन स्टेटस को "साइन-इन" के तौर पर रिकॉर्ड करेंगी. जब उपयोगकर्ता के साइन-इन स्टेटस को "साइन-इन" पर सेट किया जाता है, तो पीआर, FedCM को कॉल करके IdP के खातों की सूची वाले एंडपॉइंट से अनुरोध करता है. साथ ही, FedCM डायलॉग में उपयोगकर्ता को उपलब्ध खाते दिखाता है.

यह बताने के लिए कि उपयोगकर्ता अपने सभी खातों से साइन आउट हो गया है, टॉप-लेवल नेविगेशन या एक ही ऑरिजिन वाले सब-रिसोर्स के अनुरोध में IdP-SignIn-Status: action=signout-all एचटीटीपी हेडर भेजें:

IdP-SignIn-Status: action=signout-all

इसके अलावा, IdP के ऑरिजिन से JavaScript API IdentityProvider.logout() को कॉल करें:

IdentityProvider.logout()

ये कुकी, उपयोगकर्ता के साइन-इन स्टेटस को "साइन-आउट" के तौर पर रिकॉर्ड करेंगी. जब उपयोगकर्ता का साइन-इन स्टेटस "साइन-आउट" होता है, तो FedCM को कॉल करने पर कोई गड़बड़ी नहीं होती. हालांकि, यह IdP के खातों की सूची वाले एंडपॉइंट को कोई अनुरोध नहीं करता.

डिफ़ॉल्ट रूप से, IdP के साइन-इन की स्थिति "unknown" पर सेट होती है. इस स्टेटस का इस्तेमाल तब किया जाता है, जब आईडीपी (IdP), IdP Sign-In Status API का इस्तेमाल करके सिग्नल भेजता है. हम बेहतर ट्रांज़िशन के लिए, यह स्टेटस पेश कर रहे हैं. ऐसा इसलिए, क्योंकि हो सकता है कि जब हम इस एपीआई को शिप करें, तब उपयोगकर्ता पहले ही IdP में साइन इन कर चुका हो. साथ ही, हो सकता है कि FedCM को पहली बार शुरू किए जाने तक, IdP को ब्राउज़र को यह सिग्नल देने का मौका न मिले. इस मामले में, हम IdP के खातों की सूची वाले एंडपॉइंट से अनुरोध करते हैं और खातों की सूची वाले एंडपॉइंट से मिले जवाब के आधार पर स्थिति को अपडेट करते हैं:

  • अगर एंडपॉइंट, चालू खातों की सूची दिखाता है, तो स्थिति को "sign-in" पर अपडेट करें. इसके बाद, उन खातों को दिखाने के लिए FedCM डायलॉग बॉक्स खोलें.
  • अगर एंडपॉइंट कोई खाता नहीं दिखाता है, तो स्टेटस को "साइन आउट करें" पर सेट करें और FedCM कॉल को फ़ेल करें.

अगर उपयोगकर्ता का सेशन खत्म हो जाता है, तो क्या होगा? इस कुकी का इस्तेमाल, उपयोगकर्ता को डाइनैमिक साइन-इन फ़्लो के ज़रिए साइन इन करने की अनुमति देने के लिए किया जाता है

आईडीपी, ब्राउज़र को उपयोगकर्ता के साइन-इन की स्थिति के बारे में लगातार सूचना देता रहता है. हालांकि, यह सूचना सिंक नहीं हो सकती. जैसे, जब सेशन खत्म हो जाता है. जब साइन-इन की स्थिति "साइन-इन" होती है, तब ब्राउज़र, क्रेडेंशियल वाला अनुरोध, खातों की सूची वाले एंडपॉइंट को भेजता है. हालांकि, सर्वर इसे अस्वीकार कर देता है, क्योंकि सेशन अब उपलब्ध नहीं है. ऐसे में, ब्राउज़र पॉप-अप विंडो के ज़रिए उपयोगकर्ता को आईडीपी में डाइनैमिक तरीके से साइन इन करने की अनुमति दे सकता है.

FedCM डायलॉग बॉक्स में, यहां दी गई इमेज में दिखाए गए मैसेज की तरह एक मैसेज दिखेगा:

आईडीपी में साइन इन करने का सुझाव देने वाला FedCM डायलॉग.
FedCM डायलॉग, जिसमें आईडीपी में साइन इन करने का सुझाव दिया गया है.

जारी रखें बटन पर क्लिक करने से, ब्राउज़र एक पॉप-अप विंडो खोलता है. इससे उपयोगकर्ता को IdP के साइन-इन पेज पर भेज दिया जाता है.

IdP में साइन इन करें बटन पर क्लिक करने के बाद दिखने वाली पॉपअप विंडो.
आईडीपी (IdP) से साइन इन करने के बटन पर क्लिक करने के बाद दिखने वाली पॉप-अप विंडो.

साइन-इन पेज का यूआरएल (यह आईडीपी का ऑरिजिन होना चाहिए) signin_url के साथ तय किया जा सकता है. यह आईडीपी कॉन्फ़िगरेशन फ़ाइल का हिस्सा होता है.

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

पॉप-अप विंडो, ब्राउज़र की सामान्य विंडो होती है. यह पहले-पक्ष की कुकी का इस्तेमाल करती है. कॉन्टेंट विंडो में जो भी होता है वह IdP पर निर्भर करता है. हालांकि, RP पेज पर क्रॉस-ऑरिजिन कम्यूनिकेशन का अनुरोध करने के लिए, कोई विंडो हैंडल उपलब्ध नहीं है. उपयोगकर्ता के साइन इन करने के बाद, IdP को यह काम करना चाहिए:

  • ब्राउज़र को यह बताने के लिए कि उपयोगकर्ता ने साइन इन कर लिया है, IdP-SignIn-Status: action=signin हेडर भेजें या IdP-SignIn-Status: action=signin एपीआई को कॉल करें.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();
}
उपयोगकर्ता, FedCM का इस्तेमाल करके आईडीपी में साइन इन करने के बाद, आरपी में साइन इन करता है

हमारे डेमो में, IdP Sign-In Status API के काम करने के तरीके को आज़माया जा सकता है. डेमो IdP में साइन इन करने के तीन मिनट बाद, सेशन की समयसीमा खत्म हो जाती है. इसके बाद, पॉप-अप विंडो के व्यवहार से आईडीपी में साइन-इन करने की प्रोसेस देखी जा सकती है.

ऑरिजिन ट्रायल में हिस्सा लेना

Chrome 116
या इसके बाद के वर्शन में, Chrome
फ़्लैग chrome://flags#fedcm-idp-signin-status-api चालू
करके, IdP Sign-In Status API को स्थानीय तौर पर आज़माया जा सकता है.

ऑरिजिन ट्रायल को दो बार रजिस्टर करके भी, आईडीपी से साइन इन करने की स्थिति बताने वाले एपीआई को चालू किया जा सकता है:

ऑरिजिन ट्रायल से, नई सुविधाओं को आज़माया जा सकता है. साथ ही, वेब स्टैंडर्ड कम्यूनिटी को इन सुविधाओं के इस्तेमाल, व्यावहारिक होने, और असरदार होने के बारे में सुझाव/राय दी जा सकती है या शिकायत की जा सकती है. ज़्यादा जानकारी के लिए, वेब डेवलपर के लिए ओरिजिन ट्रायल गाइड देखें.

IdP Sign-In Status API का ऑरिजिन ट्रायल, Chrome 116 से Chrome 119 तक उपलब्ध है.

आईडीपी के लिए ऑरिजिन ट्रायल रजिस्टर करना

  1. ओरिजिन ट्रायल के रजिस्ट्रेशन पेज पर जाएं.
  2. रजिस्टर करें बटन पर क्लिक करें और टोकन का अनुरोध करने के लिए फ़ॉर्म भरें.
  3. IdP के ऑरिजिन को वेब ऑरिजिन के तौर पर डालें.
  4. सबमिट करें पर क्लिक करें.
  5. IdentityProvider.close() का इस्तेमाल करने वाले पेजों के हेड में origin-trial <meta> टैग जोड़ें. उदाहरण के लिए, यह कुछ इस तरह दिख सकता है:
    <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

आरपी के लिए, तीसरे पक्ष की ऑरिजिन ट्रायल रजिस्टर करना

  1. ओरिजिन ट्रायल के रजिस्ट्रेशन पेज पर जाएं.
  2. रजिस्टर करें बटन पर क्लिक करें और टोकन का अनुरोध करने के लिए फ़ॉर्म भरें.
  3. IdP के ऑरिजिन को वेब ऑरिजिन के तौर पर डालें.
  4. अन्य ऑरिजिन पर JavaScript की मदद से टोकन इंजेक्ट करने के लिए, तीसरे पक्ष की मैचिंग की सुविधा चालू करें.
  5. सबमिट करें पर क्लिक करें.
  6. जारी किए गए टोकन को तीसरे पक्ष की वेबसाइट पर जोड़ें.

टोकन को तीसरे पक्ष की वेबसाइट पर एम्बेड करने के लिए, अपनी JavaScript लाइब्रेरी या IdP के ऑरिजिन से दिखाए गए SDK में यह कोड जोड़ें.

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

TOKEN_GOES_HERE की जगह अपना टोकन डालें.

जुड़ें और सुझाव/राय दें या शिकायत करें

अगर आपको टेस्टिंग के दौरान कोई समस्या आती है या आपको कोई सुझाव/राय देनी है या शिकायत करनी है, तो crbug.com पर जाकर ऐसा करें.

Unsplash पर Dan Cristian Pădureț की फ़ोटो