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

Eiji Kitamura

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

बटन मोड API

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

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

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

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

{
  // ... Other settings (like endpoints) here
  "branding": {
    "icons": [
      {
        "url": "https://size-25px-image",
        "size": 25,
      },
      {
        "url": "https://size-40px-image",
        "size": 40
      }
    ]
  }
}

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

बटन मोड एपीआई का इस्तेमाल करने के लिए:

• 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.
}

खाते के अन्य विकल्प का इस्तेमाल करें

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

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

• chrome://flags में प्रयोग के तौर पर शुरू की गई FedCmUseOtherAccount सुविधा चालू करें या बटन मोड एपीआई के ऑरिजिन ट्रायल के लिए रजिस्टर करें.
• आईडीपी (IdP) से, आईडीपी कॉन्फ़िगरेशन में इनकी जानकारी मिलती है फ़ाइल:

{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

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

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

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

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

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

बटन मोड एपीआई का ऑरिजिन ट्रायल, Chrome 125 से Chrome के ज़रिए किया जा सकता है 130.

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

टोकन को तीसरे पक्ष की वेबसाइट पर एम्बेड करने के लिए, आईडीपी (IdP) में यह कोड जोड़ें आईडीपी (IdP) के ऑरिजिन से मिलने वाली JavaScript लाइब्रेरी या SDK टूल.

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, इन बदलावों को लागू करेगा आईडी पर CORS दावा एंडपॉइंट Chrome 125 और उसके बाद के वर्शन में उपलब्ध है.

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

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

SameSite=कोई नहीं

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

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