हमने Chrome DevTools WebAuthn टैब कैसे बनाया है

Fawaz Mohammad
Fawaz Mohammad
GitHub
Nina Satragno
Nina Satragno
X

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

डेवलपर की समस्याएं

इस प्रोजेक्ट से पहले, Chrome पर WebAuthn के लिए, डिबग करने की सुविधा नहीं थी. WebAuth का इस्तेमाल करने वाले ऐप्लिकेशन को बनाने वाले डेवलपर को, पुष्टि करने वाले फ़िज़िकल डिवाइसों का ऐक्सेस चाहिए. ऐसा खास तौर पर इन दो वजहों से मुश्किल था:

  1. पुष्टि करने वाले टूल कई तरह के होते हैं. अलग-अलग कॉन्फ़िगरेशन और सुविधाओं को डीबग करने के लिए, ज़रूरी है कि डेवलपर के पास कई अलग-अलग और कभी-कभी महंगे ऑथेंटिकेटर का ऐक्सेस हो.

  2. पुष्टि करने वाले फ़िज़िकल डिवाइस, डिज़ाइन के हिसाब से सुरक्षित होते हैं. इसलिए, आम तौर पर उनकी स्थिति की जांच करना मुमकिन नहीं होता.

हमने Chrome DevTools में ही डीबग करने की सुविधा जोड़कर, इसे आसान बनाने की कोशिश की है.

समाधान: WebAuthn का नया टैब

WebAuthn DevTools टैब की मदद से, WebAuthn को डीबग करना बहुत आसान हो जाता है. इस टैब की मदद से, डेवलपर इन पुष्टि करने वाले टूल को एमुलेट कर सकते हैं, उनकी क्षमताओं को पसंद के मुताबिक बना सकते हैं, और उनकी स्थिति की जांच कर सकते हैं.

नया WebAuthn टैब

लागू करना

WebAuthn में डीबग करने की सुविधा जोड़ने की प्रोसेस दो चरणों में पूरी हुई.

दो चरणों में की जाने वाली प्रोसेस

पहला चरण: Chrome DevTools प्रोटोकॉल में WebAuthn डोमेन जोड़ना

सबसे पहले, हमने Chrome DevTools प्रोटोकॉल (CDP) में एक नया डोमेन लागू किया है. यह डोमेन, ऐसे हैंडलर से जुड़ा है जो WebAuthn बैकएंड के साथ संपर्क करता है.

सीडीपी, DevTools के फ़्रंट-एंड को Chromium से कनेक्ट करता है. हमारे मामले में, हमने WebAuthn DevTools टैब और Chromium में WebAuthn को लागू करने के बीच ब्रिज बनाने के लिए, WebAuthn डोमेन ऐक्ट का इस्तेमाल किया.

WebAuthn डोमेन, वर्चुअल ऑथेंटिकेटर एनवायरमेंट को चालू और बंद करने की अनुमति देता है. इससे ब्राउज़र, Authenticator डिस्कवरी से डिसकनेक्ट हो जाता है और उसकी जगह वर्चुअल डिस्कवरी प्लग इन हो जाती है.

हम डोमेन में ऐसे तरीके भी दिखाते हैं जो मौजूदा वर्चुअल ऑथेंटिकेटर और वर्चुअल डिस्कवरी इंटरफ़ेस के लिए, थिन लेयर के तौर पर काम करते हैं. ये इंटरफ़ेस, Chromium के WebAuthn लागू करने का हिस्सा हैं. इन तरीकों में, पुष्टि करने वाले टूल जोड़ना और हटाना शामिल है. साथ ही, इनमें पुष्टि करने वाले टूल के रजिस्टर किए गए क्रेडेंशियल बनाना, उन्हें पाना, और मिटाना भी शामिल है.

(कोड पढ़ें)

दूसरा चरण: उपयोगकर्ताओं को दिखने वाला टैब बनाना

दूसरा, हमने DevTools के फ़्रंटएंड में, उपयोगकर्ता के लिए एक टैब बनाया है. यह टैब, एक व्यू और एक मॉडल से बना होता है. अपने-आप जनरेट हुआ एजेंट, डोमेन को टैब से कनेक्ट करता है.

हालांकि, इसमें तीन ज़रूरी कॉम्पोनेंट होते हैं, लेकिन हमें सिर्फ़ दो कॉम्पोनेंट के बारे में सोचना था: मॉडल और व्यू. डोमेन जोड़ने के बाद, तीसरा कॉम्पोनेंट - एजेंट अपने-आप जनरेट होता है. आसान शब्दों में, एजेंट वह लेयर है जो फ़्रंट एंड और सीडीपी के बीच कॉल करता है.

मॉडल

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

हालांकि, हम कभी-कभी मॉडल से जवाब वापस भेजते हैं. ऐसा, नए बनाए गए ऑथेंटिकेटर के लिए आईडी देने या किसी मौजूदा ऑथेंटिकेटर में सेव किए गए क्रेडेंशियल वापस करने के लिए किया जाता है.

(कोड पढ़ें)

व्यू

नया WebAuthn टैब

हम व्यू का इस्तेमाल, ऐसा यूज़र-इंटरफ़ेस उपलब्ध कराने के लिए करते हैं जो डेवलपर को DevTools ऐक्सेस करते समय मिल सकता है. इसमें ये चीज़ें शामिल हैं:

  1. वर्चुअल ऑथेंटिकेटर एनवायरमेंट की सुविधा चालू करने के लिए टूलबार.
  2. पुष्टि करने वाले ऐप्लिकेशन जोड़ने के लिए सेक्शन.
  3. बनाए गए पुष्टि करने वाले तरीकों के लिए सेक्शन.

(कोड पढ़ें)

वर्चुअल ऑथेंटिकेटर एनवायरमेंट की सुविधा चालू करने के लिए टूलबार

टूलबार

ज़्यादातर मामलों में, उपयोगकर्ता पूरे टैब के बजाय, एक ही ऑथेंटिकेटर से इंटरैक्ट करते हैं. इसलिए, हम टूलबार में सिर्फ़ वर्चुअल एनवायरमेंट को चालू और बंद करने की सुविधा देते हैं.

यह क्यों ज़रूरी है? यह ज़रूरी है कि उपयोगकर्ता, एनवायरमेंट को साफ़ तौर पर टॉगल करे, क्योंकि ऐसा करने से ब्राउज़र, Authenticator डिस्कवरी से डिसकनेक्ट हो जाता है. इसलिए, इस मोड के चालू होने पर, कनेक्ट किए गए फ़िज़िकल ऑथेंटिकेटर की पहचान नहीं की जाएगी. जैसे, फ़िंगरप्रिंट रीडर.

हमने तय किया है कि साफ़ तौर पर टॉगल करने का मतलब है कि उपयोगकर्ताओं को बेहतर अनुभव मिलेगा. खास तौर पर, उन लोगों को जो रीयल डिस्कवरी के बंद होने की उम्मीद के बिना, WebAuthn टैब में जाकर देखते हैं.

पुष्टि करने वाले ऐप्लिकेशन का सेक्शन जोड़ना

पुष्टि करने वाले ऐप्लिकेशन का सेक्शन जोड़ना

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

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

Authenticator का व्यू

Authenticator का व्यू

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

Authenticator का नाम

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

क्रेडेंशियल की टेबल

हमने हर ऑथेंटिकेटर सेक्शन में एक टेबल जोड़ी है. इसमें, ऑथेंटिकेटर से रजिस्टर किए गए सभी क्रेडेंशियल दिखते हैं. हम हर लाइन में क्रेडेंशियल की जानकारी देते हैं. साथ ही, क्रेडेंशियल को हटाने या एक्सपोर्ट करने के लिए बटन भी देते हैं.

फ़िलहाल, हम इन टेबल को भरने के लिए जानकारी इकट्ठा करते हैं. इसके लिए, हम CDP को पोल करके हर पुष्टि करने वाले टूल के लिए रजिस्टर किए गए क्रेडेंशियल पाते हैं. आने वाले समय में, हम क्रेडेंशियल बनाने के लिए एक इवेंट जोड़ने वाले हैं.

हरे रंग का ऐक्टिव बटन

हमने पुष्टि करने वाले हर टूल के सेक्शन में, चालू है रेडियो बटन भी जोड़ा है. फ़िलहाल, जिस पुष्टि करने वाले टूल को चालू किया गया है वह ही क्रेडेंशियल को सुनेगा और रजिस्टर करेगा. इसके बिना, एक से ज़्यादा पुष्टि करने वाले एजेंट के लिए क्रेडेंशियल रजिस्टर करना तय नहीं होता. इसका मतलब है कि WebAuthn की सुविधा का इस्तेमाल करके, इन एजेंट की जांच करने पर गंभीर गड़बड़ी हो सकती है.

हमने वर्चुअल ऑथेंटिकेटर पर SetUserPresence तरीके का इस्तेमाल करके, चालू होने की स्थिति लागू की है. SetUserPresence तरीका यह सेट करता है कि किसी दिए गए पुष्टि करने वाले टूल के लिए, उपयोगकर्ता की मौजूदगी की जांच पूरी हुई है या नहीं. अगर हम इसे बंद कर देते हैं, तो पुष्टि करने वाला ऐप्लिकेशन क्रेडेंशियल नहीं सुन पाएगा. इसलिए, यह पक्का करके कि यह सुविधा ज़्यादा से ज़्यादा एक पुष्टि करने वाले टूल (सक्रिय के तौर पर सेट किए गए टूल) के लिए चालू है और अन्य सभी के लिए उपयोगकर्ता की मौजूदगी की सुविधा बंद है, हम तय किए गए व्यवहार को लागू कर सकते हैं.

ऐक्टिव बटन जोड़ते समय, हमें एक दिलचस्प समस्या का सामना करना पड़ा. हमें रेस कंडीशन से बचना था. यह उदाहरण देखें:

  1. उपयोगकर्ता, पुष्टि करने की सुविधा X के लिए चालू है रेडियो बटन पर क्लिक करता है. इससे, CDP को X को चालू के तौर पर सेट करने का अनुरोध भेजा जाता है. X के लिए, चालू है रेडियो बटन चुना गया है और बाकी सभी से चुने हुए का निशान हटा दिया गया है.

  2. इसके तुरंत बाद, उपयोगकर्ता Y Authenticator के लिए चालू है रेडियो बटन पर क्लिक करता है. इससे, Y को चालू के तौर पर सेट करने के लिए, सीडीपी को अनुरोध भेजा जाता है. Y के लिए चालू है रेडियो बटन चुना गया है और X के साथ-साथ अन्य सभी से चुने हुए का निशान हटा दिया गया है.

  3. बैकएंड में, Y को चालू के तौर पर सेट करने का कॉल पूरा हो गया है और उसे हल कर दिया गया है. Y अब चालू है और अन्य सभी पुष्टि करने वाले तरीके बंद हैं.

  4. बैकएंड में, X को चालू के तौर पर सेट करने का कॉल पूरा हो गया है और उसे हल कर दिया गया है. X अब चालू है और Y के साथ-साथ अन्य सभी पुष्टि करने वाले टूल बंद हैं.

अब, इस स्थिति में X ऐक्टिव पुष्टि करने वाला ऐप्लिकेशन है. हालांकि, X के लिए चालू है रेडियो बटन चुना नहीं गया है. Y, पुष्टि करने की सुविधा के तौर पर चालू नहीं है. हालांकि, Y के लिए चालू है रेडियो बटन चुना गया है. पुष्टि करने वाले टूल के फ़्रंट एंड और असल स्टेटस में अंतर है. जाहिर है, यह एक समस्या है.

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

यह ऐसा दिखता है:


 async _setActiveAuthenticator(authenticatorId) {
   await this._clearActiveAuthenticator();
   await this._model.setAutomaticPresenceSimulation(authenticatorId, true);
   this._activeId = authenticatorId;
   this._updateActiveButtons();
 }
 
 _updateActiveButtons() {
   const authenticators = this._authenticatorsView.getElementsByClassName('authenticator-section');
   Array.from(authenticators).forEach(authenticator => {
     authenticator.querySelector('input.dt-radio-button').checked =
         authenticator.getAttribute('data-authenticator-id') === this._activeId;
   });
 }
 
 async _clearActiveAuthenticator() {
   if (this._activeId) {
     await this._model.setAutomaticPresenceSimulation(this._activeId, false);
   }
   this._activeId = null;
 }

इस्तेमाल से जुड़ी मेट्रिक

हम इस सुविधा के इस्तेमाल को ट्रैक करना चाहते थे. शुरुआत में, हमने दो विकल्पों के बारे में सोचा था.

  1. DevTools में WebAuthn टैब को हर बार खोलने की गिनती करें. इस विकल्प की वजह से, टैब के खुलने की गिनती ज़्यादा हो सकती है. ऐसा इसलिए, क्योंकि कोई व्यक्ति टैब को खोल सकता है, लेकिन उसका इस्तेमाल नहीं कर सकता.

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

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

खास जानकारी

पढ़ने के लिए धन्यवाद! अगर आपके पास WebAuthn टैब को बेहतर बनाने के लिए कोई सुझाव है, तो बग दर्ज करके हमें बताएं.

अगर आपको WebAuthn के बारे में ज़्यादा जानना है, तो यहां कुछ संसाधन दिए गए हैं:

झलक वाले चैनल डाउनलोड करना

Chrome कैनरी, डेवलपर या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन झलक वाले चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, इनसे आपको वेब प्लैटफ़ॉर्म के सबसे नए एपीआई की जांच करने में मदद मिलती है. इसके अलावा, इनकी मदद से उपयोगकर्ताओं से पहले ही अपनी साइट पर समस्याओं का पता लगाया जा सकता है!

Chrome DevTools की टीम से संपर्क करना

DevTools से जुड़ी नई सुविधाओं, अपडेट या किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, यहां दिए गए विकल्पों का इस्तेमाल करें.