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

Login Hint API

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

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

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

{
  "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"
    }]
  }
});

User Info API

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

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

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

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

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

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

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

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

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

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

IdP-SignIn-Status: action=signin

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

IdentityProvider.login()

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

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

IdP-SignIn-Status: action=signout-all

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

IdentityProvider.logout()

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

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

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

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

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

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

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

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

{
  "accounts_endpoint": "/auth/accounts",
  "client_metadata_endpoint": "/auth/metadata",
  "id_assertion_endpoint": "/auth/idtokens",
  "signin_url": "/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();
}

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

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

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

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

• आईडीपी के लिए ऑरिजिन ट्रायल रजिस्टर करें.
• आरपी के लिए, तीसरे पक्ष के ऑरिजिन ट्रायल को रजिस्टर करें.

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

IdP साइन-इन स्टेटस एपीआई का ऑरिजिन ट्रायल, Chrome 116 से लेकर Chrome 119 तक उपलब्ध है.

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

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

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

1. ओरिजिन ट्रायल के रजिस्ट्रेशन पेज पर जाएं.
2. टोकन का अनुरोध करने के लिए, रजिस्टर करें बटन पर क्लिक करें और फ़ॉर्म भरें.
3. आईडीपी का ऑरिजिन, वेब ऑरिजिन के तौर पर डालें.
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 पर जाकर उन्हें शेयर करें.

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