Chrome 125 से, Button Mode API की मदद से डेस्कटॉप पर ऑरिजिन ट्रायल शुरू किया जा रहा है. बटन मोड एपीआई की मदद से, पहचान देने वाली सेवा, FedCM API का इस्तेमाल कर सकती है. ऐसा तब भी किया जा सकता है, जब एपीआई कॉल के दौरान उनके उपयोगकर्ताओं के पास आईडीपी (IdP) सेशन चालू न हों. उपयोगकर्ता, आईडीपी (IdP) साइट पर जाए बिना अपने फ़ेडरेटेड खाते से किसी वेबसाइट में साइन इन कर सकते हैं. बटन मोड में FedCM यूज़र इंटरफ़ेस (यूआई), मौजूदा विजेट फ़्लो के यूज़र इंटरफ़ेस (यूआई) के मुकाबले ज़्यादा बेहतर तरीके से काम करता है. ऐसा इसलिए होता है, क्योंकि इस पर उपयोगकर्ता के जेस्चर (हाव-भाव) की सुरक्षा होती है और यह साइन इन करने की उपयोगकर्ता की इच्छा के बारे में बेहतर तरीके से बताता है.
बटन मोड एपीआई
FedCM यूज़र इंटरफ़ेस, एपीआई के शुरू होने के बाद डेस्कटॉप पर सबसे ऊपर दाएं कोने में दिखाए गए विजेट के तौर पर या मोबाइल पर बॉटम शीट के तौर पर उपलब्ध है. इसे विजेट मोड कहा जाता है. विजेट को दिखाने के लिए, आरपी पर पहुंचने से पहले उपयोगकर्ता को आईडीपी में साइन इन करना होगा. FedCM के पास, आईडीपी पर उपलब्ध खाते से उपयोगकर्ता को आरपी में साइन इन करने की अनुमति देने से पहले, आईडीपी में साइन इन करने का एक भरोसेमंद तरीका नहीं था. ऐसा करने के लिए, FedCM में एक तरीका जोड़ा जाने वाला है.
नए बटन मोड एपीआई में, नया यूज़र इंटरफ़ेस (यूआई) मोड जोड़ा गया है. इस मोड को बटन मोड कहा जाता है. विजेट मोड के उलट, जैसे ही उपयोगकर्ता आरपी पर उतरता है, बटन मोड लागू नहीं किया जाता. इसे तब लागू किया जाता है, जब उपयोगकर्ता साइन इन फ़्लो शुरू करता है, जैसे कि "आईडीपी (IdP) की मदद से साइन-इन करें" बटन दबाना.
बटन दबाते ही, FedCM यह जांच करता है कि उपयोगकर्ता ने खाते के एंडपॉइंट को फ़ेच करने की सुविधा या ब्राउज़र में सेव किए गए लॉगिन स्टेटस की मदद से, आईडीपी में साइन इन किया है या नहीं. अगर किसी उपयोगकर्ता ने अब तक साइन इन नहीं किया है, तो FedCM, उपयोगकर्ता को पॉप-अप विंडो के ज़रिए आईडीपी से मिले login_url
का इस्तेमाल करके, आईडीपी में साइन इन करने के लिए कहता है. अगर ब्राउज़र को पता है कि उपयोगकर्ता ने पहले ही आईडीपी (IdP) में साइन इन किया है या पॉप-अप विंडो से आईडीपी में साइन इन करते ही, FedCM, मॉडल डायलॉग बॉक्स खोलता है. इससे उपयोगकर्ता को साइन इन करने के लिए आईडीपी खाता चुनने का विकल्प मिलता है. कोई खाता चुनकर, उपयोगकर्ता आईडीपी (IdP) खाते का इस्तेमाल करके
आरपी में साइन इन कर सकता है.
https://fedcm-rp-demo.glitch.me/button_flow पर जाकर, Chrome 125 का इस्तेमाल करके इसे खुद आज़माएं.
बटन मोड एपीआई का इस्तेमाल करने के लिए:
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
खाते का कोई दूसरा विकल्प इस्तेमाल करें
आरपी की मदद से उपयोगकर्ता, खाता चुनने की सुविधा में, "दूसरे खातों का इस्तेमाल" कर सकते हैं. उदाहरण के लिए, जब आईडीपी (IdP) कई खातों के साथ काम करते हों या मौजूदा खाते को बदल रहे हों.
अन्य खाता इस्तेमाल करने का विकल्प चालू करने के लिए:
chrome://flags
में प्रयोग के तौर पर शुरू की गई सुविधाFedCmUseOtherAccount
को चालू करें या बटन मोड एपीआई के ऑरिजिन ट्रायल को रजिस्टर करें.- आईडीपी (IdP) की मदद से, IdP कॉन्फ़िगरेशन फ़ाइल में यह जानकारी मिलती है:
{
"accounts_endpoint" : ...,
"modes: {
"button": {
"supports_use_other_account": true,
}
}
}
ऑरिजिन ट्रायल में हिस्सा लेना
Chrome 125 या इसके बाद के वर्शन पर, Chrome फ़्लैग
chrome://flags#fedcm-button-mode
को चालू करके, बटन मोड एपीआई को स्थानीय तौर पर आज़माया जा सकता है.
आईडीपी (IdP) ऑरिजिन ट्रायल को रजिस्टर करके बटन मोड को भी चालू कर सकते हैं:
- आरपी के लिए, तीसरे पक्ष का ऑरिजिन ट्रायल रजिस्टर करें.
ऑरिजिन ट्रायल की मदद से, नई सुविधाएं आज़माई जा सकती हैं. साथ ही, वेब स्टैंडर्ड से जुड़ी कम्यूनिटी के लिए उनकी उपयोगिता, व्यावहारिकता, और असर के बारे में सुझाव, शिकायत या राय दी जा सकती है. ज़्यादा जानकारी के लिए, वेब डेवलपर के लिए ऑरिजिन ट्रायल गाइड देखें.
बटन मोड एपीआई का ऑरिजिन ट्रायल, Chrome 125 से Chrome 127 तक उपलब्ध है.
- ऑरिजिन ट्रायल रजिस्ट्रेशन पेज पर जाएं.
- रजिस्टर करें बटन पर क्लिक करें और टोकन का अनुरोध करने के लिए फ़ॉर्म भरें.
- आईडीपी (IdP) का ऑरिजिन वेब ऑरिजिन डालें.
- अन्य ऑरिजिन पर, JavaScript के साथ टोकन इंजेक्ट करने के लिए, तीसरे पक्ष की मैचिंग की जांच करें.
- सबमिट करें पर क्लिक करें.
- जारी किए गए टोकन को तीसरे पक्ष की वेबसाइट पर एम्बेड करें.
तीसरे पक्ष की किसी वेबसाइट पर टोकन एम्बेड करने के लिए, आईडीपी की 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, 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
के तौर पर मार्क किया गया है.