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

Chrome 116, FedCM की कई सुविधाएं भेजता है. जैसे, लॉगिन हिंट एपीआई, User Info API, और RP Context API. साथ ही, यह आईडीपी (IdP) के साइन-इन स्टेटस एपीआई के लिए ऑरिजिन ट्रायल शुरू करता है.

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

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

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

लॉगिन हिंट एपीआई

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

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

उपयोगकर्ता के साइन इन करने के बाद, कभी-कभी भरोसा करने वाला पक्ष (आरपी), उपयोगकर्ता से फिर से पुष्टि करने के लिए कहता है. हालांकि, हो सकता है कि उपयोगकर्ता को यह न पता हो कि वह किस खाते का इस्तेमाल कर रहा है. अगर आरपी यह तय कर सके कि किस खाते से साइन इन करना है, तो उपयोगकर्ता के लिए खाता चुनना आसान होगा. लॉगिन करने का संकेत, 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 को पास करने पर, आरपी, loginHint प्रॉपर्टी के साथ navigator.credentials.get() को शुरू कर सकता है, जैसा कि यहां दिए गए कोड सैंपल में दिखाया गया है. ऐसा करके, बताए गए खाते को चुनिंदा तरीके से दिखाया जा सकता है:

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

उपयोगकर्ता जानकारी एपीआई

आईडीपी के लोगो से सजाए गए साइन-इन बटन, अब उपयोगकर्ताओं को आइडेंटिटी फ़ेडरेशन से साइन इन करने की सुविधा देते हैं. हालांकि, बटन को सजाने के लिए, उपयोगकर्ता की प्रोफ़ाइल के आइकॉन और उसकी जानकारी का इस्तेमाल किया जाता है. साइन इन करना ज़्यादा आसान होता है. ऐसा खास तौर पर तब होता है, जब किसी उपयोगकर्ता ने पहले आईडीपी (IdP) की मदद से इस वेबसाइट के लिए साइन अप किया हो.

'Google से साइन इन करें' बटन.
'Google से साइन इन करें' बटन
'Google से साइन इन करें' बटन को अपने हिसाब से बनाएं.
अपने हिसाब से 'Google से साइन-इन करें' बटन

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

Chrome 116 में शिपिंग के लिए, User Info API, तीसरे पक्ष की कुकी पर निर्भर हुए बिना, आईडीपी (IdP) को सर्वर से लौटने वाले उपयोगकर्ता की जानकारी हासिल करने में मदद मिलती है.

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

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

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

FedCM डायलॉग इसके साथ रेंडर किया गया
FedCM डायलॉग बॉक्स को "**** में साइन इन करें" के साथ रेंडर किया जाता है. अगर आरपी कॉन्टेक्स्ट नहीं बताया गया है, तो यह डिफ़ॉल्ट विकल्प है.
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) साइन-इन स्टेटस एपीआई का ऑरिजिन ट्रायल

Chrome, डेस्कटॉप पर Chrome 116 से IdP साइन-इन स्टेटस एपीआई ऑरिजिन ट्रायल शुरू करता है. इसके बाद, वह Chrome 116 से और उसके बाद Android Chrome शुरू करता है. ऑरिजिन ट्रायल की मदद से, आपको किसी नई या एक्सपेरिमेंट के तौर पर शुरू की गई सुविधा का ऐक्सेस मिलता है. इसकी मदद से, ऐसी सुविधाएं बनाई जा सकती हैं जिन्हें सभी के लिए उपलब्ध कराने से पहले, आपके उपयोगकर्ता सीमित समय के लिए इन्हें आज़मा सकते हैं.

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

ब्राउज़र को उपयोगकर्ता की साइन इन स्थिति की जानकारी दें

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

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

IdP-SignIn-Status: action=signin

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

IdentityProvider.login()

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

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

IdP-SignIn-Status: action=signout-all

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

IdentityProvider.logout()

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

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

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

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

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

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

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

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

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

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

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

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

  • 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) में साइन इन करने के बाद, उपयोगकर्ता आरपी में साइन इन करता है

हमारे डेमो में, आईडीपी (IdP) साइन-इन स्टेटस एपीआई के काम करने का तरीका आज़माया जा सकता है. डेमो आईडीपी (IdP) में साइन इन करने के तीन मिनट बाद, सेशन खत्म हो जाता है. इसके बाद, पॉप-अप विंडो की मदद से, आईडीपी (IdP) में हुए साइन इन की जांच की जा सकती है.

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

स्थानीय तौर पर, आईडीपी (IdP) से साइन-इन स्टेटस एपीआई को आज़माया जा सकता है. इसके लिए, आपको
Chrome 116 या इसके बाद के वर्शन पर, Chrome
फ़्लैग chrome://flags#fedcm-idp-signin-status-api को चालू करना होगा.

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

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

आईडीपी (IdP) साइन-इन स्टेटस एपीआई का ऑरिजिन ट्रायल, Chrome 116 से लेकर Chrome 119 तक के वर्शन पर किया जा सकता है.

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

  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 पर डैन क्रिस्चियन पादुरेत की फ़ोटो