FedCM के अपडेट: बटन Mode एपीआई का ऑरिजिन ट्रायल, सीओआरएस, और SameSite

Eiji Kitamura

Chrome 125 से, Button Mode API का डेस्कटॉप पर ऑरिजिन ट्रायल शुरू हो रहा है. बटन मोड एपीआई की मदद से, पहचान की पुष्टि करने वाली सेवाएं, FedCM API का इस्तेमाल कर सकती हैं. भले ही, एपीआई कॉल के दौरान उनके उपयोगकर्ताओं के पास चालू IdP सेशन न हों. इसके बाद, उपयोगकर्ता अपने फ़ेडरेटेड खाते से किसी वेबसाइट में साइन इन कर सकते हैं. इसके लिए, उन्हें आईडीपी साइट पर जाने की ज़रूरत नहीं होती. बटन मोड में FedCM का यूज़र इंटरफ़ेस (यूआई), मौजूदा विजेट फ़्लो के यूज़र इंटरफ़ेस की तुलना में ज़्यादा प्रमुख है. इसकी वजह यह है कि यह उपयोगकर्ता के जेस्चर से चालू होता है और इससे उपयोगकर्ता के साइन इन करने के इंटेंट को बेहतर तरीके से दिखाया जाता है.

Button Mode API

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

विजेट मोड में, उपयोगकर्ता के चालू किए बिना ही, डेस्कटॉप Chrome पर सबसे ऊपर दाएं कोने में एक डायलॉग दिखता है.
विजेट मोड में, उपयोगकर्ता के चालू किए बिना ही, डेस्कटॉप पर Chrome के सबसे ऊपर दाएं कोने में एक डायलॉग दिखता है.

नया Button Mode API, button मोड नाम का एक नया यूज़र इंटरफ़ेस (यूआई) मोड जोड़ता है. विजेट मोड के उलट, बटन मोड को उपयोगकर्ता के आरपी पर लैंड करने के तुरंत बाद चालू नहीं किया जाना चाहिए. इसके बजाय, इसे तब ट्रिगर किया जाना चाहिए, जब उपयोगकर्ता साइन-इन फ़्लो शुरू करता है. जैसे, "IdP से साइन इन करें" बटन दबाना.

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

बटन मोड के यूज़र इंटरफ़ेस (यूआई) में, विजेट मोड के मुकाबले साइन इन करने के लिए दिखाया गया डायलॉग बॉक्स बड़ा होता है. इसलिए, विज़ुअल को एक जैसा बनाए रखने के लिए, ब्रैंडिंग आइकॉन भी बड़ा होना चाहिए. विजेट मोड के लिए आइकॉन का कम से कम साइज़ 25x25 पिक्सल होना चाहिए. वहीं, बटन मोड में आइकॉन का कम से कम साइज़ 40x40 पिक्सल होना चाहिए. आईडीपी की well-known file की मदद से, एक से ज़्यादा आइकॉन यूआरएल इस तरह से दिए जा सकते हैं:

{
  // ... Other settings (like endpoints) here
  "branding": {
    "icons": [
      {
        "url": "https://size-25px-image",
        "size": 25,
      },
      {
        "url": "https://size-40px-image",
        "size": 40
      }
    ]
  }
}
बटन मोड में, डेस्कटॉप Chrome पर सबसे ऊपर बीच में एक मॉडल डायलॉग दिखता है.
बटन मोड में, डेस्कटॉप पर Chrome के सबसे ऊपर बीच में एक मोडल डायलॉग दिखता है. इसमें बड़ा आइकॉन होता है.

इसे खुद आज़माने के लिए, Chrome 125 का इस्तेमाल करके https://fedcm-rp-demo.glitch.me/button_flow पर जाएं.

कोई उपयोगकर्ता, बटन मोड एपीआई का इस्तेमाल करके आरपी में साइन इन कर रहा है.

Button Mode API का इस्तेमाल करने के लिए:

  • chrome://flags में, एक्सपेरिमेंट के तौर पर उपलब्ध सुविधा FedCmButtonMode चालू करें.
  • पक्का करें कि उपयोगकर्ता के ऐक्टिव होने के बाद एपीआई को ट्रिगर किया जाए. जैसे, बटन पर क्लिक करना.
  • mode पैरामीटर के साथ एपीआई को इस तरह से कॉल करें:
  return await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: "https://idp.example/config.json",
        clientId: "123",
        nonce:"456",
      }],
      mode: "button"
    }
  });

ब्राउज़र, mode=button को शामिल करके अनुरोध टाइप दिखाने वाले आईडी एश्योरेशन एंडपॉइंट पर एक नया पैरामीटर भेजेगा:

POST /fedcm_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity
account_id=123&client_id=client1234&nonce=Ct60bD&disclosure_text_shown=true&is_auto_selected=false&mode=button

फ़ीचर का पता लगाना

यह पता लगाने के लिए कि ब्राउज़र, बटन मोड का इस्तेमाल कर सकता है या नहीं, इस कोड की मदद से जांच की जा सकती है:

let supportsFedCmMode = false;
try {
  navigator.credentials.get({
    identity: Object.defineProperty(
      {}, 'mode', {
        get: function () { supportsFedCmMode = true; }
      }
    )
  });
} catch(e) {}

if (supportsFedCmMode) {
  // The button mode is supported.
}

किसी दूसरे खाते का विकल्प इस्तेमाल करना

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

किसी दूसरे खाते का इस्तेमाल करने का विकल्प चालू करने के लिए:

  • chrome://flags में, एक्सपेरिमेंट के तौर पर उपलब्ध FedCmUseOtherAccount सुविधा चालू करें या Button Mode API के ऑरिजिन ट्रायल में रजिस्टर करें.
  • आईडीपी, आईडीपी कॉन्फ़िगरेशन फ़ाइल में इनके बारे में बताता है:
{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

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

Chrome 125 या उसके बाद के वर्शन पर, Chrome का कोई फ़्लैग चालू करके, बटन मोड एपीआई को स्थानीय तौर पर आज़माया जा सकता हैchrome://flags#fedcm-button-mode.

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

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

Button Mode API का ऑरिजिन ट्रायल, Chrome 125 से लेकर Chrome 130 तक उपलब्ध है.

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

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

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

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

Chrome 125 में सीओआरएस और SameSite=None की ज़रूरत होगी

सीओआरएस

Chrome 125 से, Chrome आईडी एश्योरेशन एंडपॉइंट पर CORS लागू करेगा.

सीओआरएस (क्रॉस-ऑरिजिन-रिसॉर्स-शेयरिंग) एक सिस्टम है, जिसमें ट्रांसमिट करने वाले एचटीटीपी हेडर होते हैं. इससे यह तय होता है कि ब्राउज़र, फ़्रंटएंड JavaScript कोड को क्रॉस-ऑरिजिन अनुरोधों के रिस्पॉन्स ऐक्सेस करने से ब्लॉक करते हैं या नहीं. आईडीपी सर्वर पर मौजूद आईडी एश्योरेशन एंडपॉइंट को अतिरिक्त हेडर के साथ अनुरोध का जवाब देना होगा. https://fedcm-rp-demo.glitch.me से मिले अनुरोध के रिस्पॉन्स हेडर का उदाहरण यहां दिया गया है:

Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true

SameSite=None

कुकी के SameSite एट्रिब्यूट के पैरामीटर से पता चलता है कि कुकी को पहले पक्ष या सेम-साइट कॉन्टेक्स्ट तक सीमित किया गया है या नहीं. इसे None के तौर पर सेट करके, कुकी को तीसरे पक्ष के डोमेन पर भेजा जा सकता है.

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