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

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

डेवलपर की परेशानी की वजहें

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

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

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

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

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

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

लागू करने का तरीका

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

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

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

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

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

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

(कोड पढ़ें)

दूसरा भाग: लोगों को दिखने वाला टैब बनाना

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

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

मॉडल

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

हालांकि, हम कभी-कभी मॉडल से जवाब पास करते हैं, ताकि या तो नए बनाए गए Authenticator का आईडी उपलब्ध कराया जा सके या किसी मौजूदा पुष्टि करने वाले व्यक्ति में सेव किए गए क्रेडेंशियल वापस किए जा सकें.

(कोड पढ़ें)

व्यू

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

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

(कोड पढ़ें)

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

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

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

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

Authenticator सेक्शन जोड़ना

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

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

Authenticator व्यू

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

Authenticator का नाम

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

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

हमने पुष्टि करने वाले हर सेक्शन में एक टेबल जोड़ी है. इसमें वे सभी क्रेडेंशियल मौजूद हैं जिन्हें पुष्टि करने वाले ने रजिस्टर किया है. हर पंक्ति में, हम क्रेडेंशियल के बारे में जानकारी के साथ-साथ क्रेडेंशियल को हटाने या एक्सपोर्ट करने के लिए बटन भी देते हैं.

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

ऐक्टिव बटन

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

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

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

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

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

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

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

अब, स्थिति यह है: X चालू Authenticator है. हालांकि, 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 के बारे में ज़्यादा जानकारी चाहिए, तो यहां कुछ संसाधन दिए गए हैं:

• WebAuthn DevTools का फ़्रंट-एंड डिज़ाइन दस्तावेज़
• वेब की पुष्टि करने वाले टेस्टिंग एपीआई के डिज़ाइन का दस्तावेज़
• Web Authentication API (WebAuthn) की जानकारी
• WebAuthn के बारे में जानकारी और गाइड

झलक दिखाने वाले चैनलों को डाउनलोड करना

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

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

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

• crbug.com के ज़रिए हमें कोई सुझाव या सुझाव सबमिट करें.
• DevTools में ज़्यादा विकल्प     > सहायता > DevTools से जुड़ी समस्याओं की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी समस्या की शिकायत करें.
• @ChromeDevTool पर ट्वीट करें.
• हमारे DevTools YouTube वीडियो या DevTools सलाह YouTube वीडियो में नया क्या है पर टिप्पणी करें.