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

Eiji Kitamura

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

बटन मोड एपीआई

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

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

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

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

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

{
  // ... 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-demo-rp.dev/active-mode पर जाएं.

कोई उपयोगकर्ता, 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 के ओरिजिन ट्रायल के लिए रजिस्टर करें.
  • आईडीपी (IdP), IdP कॉन्फ़िगरेशन फ़ाइल में यह जानकारी देता है:
{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

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

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

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

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

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

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