আমরা কীভাবে Chrome DevTools WebAuthn ট্যাব তৈরি করেছি

Fawaz Mohammad

Nina Satragno

দ্রষ্টব্য: DevTools উন্নত করতে সাহায্য করতে আগ্রহী? এখানে Google ব্যবহারকারী গবেষণায় অংশ নিতে সাইন আপ করুন।

ওয়েব প্রমাণীকরণ API , যা WebAuthn নামেও পরিচিত, ব্যবহারকারীদের নিবন্ধন ও প্রমাণীকরণের জন্য সার্ভারগুলিকে - পাসওয়ার্ডের পরিবর্তে - সর্বজনীন কী ক্রিপ্টোগ্রাফি ব্যবহার করার অনুমতি দেয়৷ এটি এই সার্ভার এবং শক্তিশালী প্রমাণীকরণকারীদের মধ্যে একীকরণ সক্ষম করে এটি করে। এই প্রমাণীকরণকারী হতে পারে ডেডিকেটেড ফিজিক্যাল ডিভাইস (যেমন সিকিউরিটি কী) অথবা প্ল্যাটফর্মের সাথে ইন্টিগ্রেটেড (যেমন ফিঙ্গারপ্রিন্ট রিডার)। আপনি WebAuthn সম্পর্কে এখানে webauthn.guide এ আরও পড়তে পারেন।

বিকাশকারী ব্যথা পয়েন্ট

এই প্রকল্পের আগে, WebAuthn-এর Chrome-এ নেটিভ ডিবাগিং সমর্থনের অভাব ছিল। একজন ডেভেলপার একটি অ্যাপ তৈরি করে যা WebAuth ব্যবহার করে শারীরিক প্রমাণীকরণকারীদের অ্যাক্সেসের প্রয়োজন। এটি দুটি কারণে বিশেষভাবে কঠিন ছিল:

1. প্রমাণীকরণকারীর বিভিন্ন স্বাদ রয়েছে। কনফিগারেশন এবং ক্ষমতার বিস্তৃতি ডিবাগ করার জন্য ডেভেলপারের কাছে অনেকগুলি ভিন্ন, কখনও কখনও ব্যয়বহুল, প্রমাণীকরণের অ্যাক্সেস থাকা প্রয়োজন।

2. ভৌত প্রমাণীকরণকারী, নকশা দ্বারা, সুরক্ষিত। অতএব, তাদের রাষ্ট্র পরিদর্শন সাধারণত অসম্ভব।

আমরা সরাসরি Chrome DevTools-এ ডিবাগিং সমর্থন যোগ করে এটিকে আরও সহজ করতে চেয়েছিলাম।

সমাধান: একটি নতুন WebAuthn ট্যাব

WebAuthn DevTools ট্যাবটি ডেভেলপারদের এই প্রমাণীকরণকারীদের অনুকরণ করতে, তাদের ক্ষমতাগুলি কাস্টমাইজ করতে এবং তাদের রাজ্যগুলি পরিদর্শন করার অনুমতি দিয়ে WebAuthn-কে ডিবাগ করা আরও সহজ করে তোলে৷

বাস্তবায়ন

WebAuthn-এ ডিবাগিং সমর্থন যোগ করা একটি দুই-অংশের প্রক্রিয়া ছিল।

পার্ট 1: Chrome DevTools প্রোটোকলে WebAuthn ডোমেন যোগ করা

প্রথমত, আমরা Chrome DevTools Protocol (CDP) এ একটি নতুন ডোমেন প্রয়োগ করেছি যা WebAuthn ব্যাকএন্ডের সাথে যোগাযোগ করে এমন একটি হ্যান্ডলারের সাথে যুক্ত।

CDP DevTools ফ্রন্ট-এন্ডকে Chromium-এর সাথে সংযুক্ত করে। আমাদের ক্ষেত্রে, আমরা WebAuthn DevTools ট্যাব এবং Chromium-এর WebAuthn বাস্তবায়নের মধ্যে সেতুবন্ধন করতে WebAuthn ডোমেন অ্যাক্ট ব্যবহার করেছি।

WebAuthn ডোমেন ভার্চুয়াল প্রমাণীকরণকারী পরিবেশকে সক্ষম এবং নিষ্ক্রিয় করার অনুমতি দেয়, যা প্রকৃত প্রমাণীকরণকারী আবিষ্কার থেকে ব্রাউজারটিকে সংযোগ বিচ্ছিন্ন করে এবং পরিবর্তে একটি ভার্চুয়াল আবিষ্কারে প্লাগ করে।

আমরা ডোমেনে এমন পদ্ধতিগুলিও প্রকাশ করি যা বিদ্যমান ভার্চুয়াল প্রমাণীকরণকারী এবং ভার্চুয়াল আবিষ্কার ইন্টারফেসে একটি পাতলা স্তর হিসাবে কাজ করে, যা Chromium-এর WebAuthn বাস্তবায়নের অংশ৷ এই পদ্ধতিগুলির মধ্যে রয়েছে প্রমাণীকরণকারীদের যোগ করা এবং অপসারণ করার পাশাপাশি তাদের নিবন্ধিত শংসাপত্রগুলি তৈরি করা, পাওয়া এবং পরিষ্কার করা।

( কোডটি পড়ুন)

যদিও WebAuthn ডোমেন WebAuthn ট্যাবটিকে সম্ভব করে তুলেছে, তখনই তা হয়নি। WebAuthn ডোমেনটি প্রাথমিকভাবে WebAuthn টেস্টিং API-এর একটি বৃহত্তর অংশ ছিল এবং ওয়েব প্ল্যাটফর্ম পরীক্ষা সক্ষম করতে ChromeDriver ব্যবহার করে। WebAuthn টেস্টিং API সম্পর্কে আরও পড়ুন।

পার্ট 2: ব্যবহারকারী-মুখী ট্যাব তৈরি করা

দ্বিতীয়ত, আমরা DevTools ফ্রন্টএন্ডে একটি ব্যবহারকারী-মুখী ট্যাব তৈরি করেছি। ট্যাবটি একটি ভিউ এবং একটি মডেল দিয়ে তৈরি। একটি স্বয়ংক্রিয়-উত্পন্ন এজেন্ট ডোমেনটিকে ট্যাবের সাথে সংযুক্ত করে।

যদিও 3টি প্রয়োজনীয় উপাদান প্রয়োজন, আমাদের শুধুমাত্র তাদের দুটি সম্পর্কে উদ্বিগ্ন হওয়া দরকার: মডেল এবং ভিউ । 3য় উপাদান - এজেন্ট , ডোমেন যোগ করার পরে স্বয়ংক্রিয়ভাবে তৈরি হয়। সংক্ষেপে, এজেন্ট হল সেই স্তর যা সামনের প্রান্ত এবং CDP-এর মধ্যে কলগুলি বহন করে।

মডেল

মডেলটি হল জাভাস্ক্রিপ্ট স্তর যা এজেন্ট এবং ভিউকে সংযুক্ত করে। আমাদের ক্ষেত্রে, মডেলটি বেশ সহজ। এটি ভিউ থেকে কমান্ড নেয়, অনুরোধগুলি তৈরি করে যাতে সেগুলি সিডিপি দ্বারা ব্যবহারযোগ্য হয় এবং তারপরে এজেন্টের মাধ্যমে সেগুলি প্রেরণ করে। এই অনুরোধগুলি সাধারণত এক-দিকনির্দেশক হয় যেখানে কোনও তথ্য ফেরত পাঠানো হয় না।

যাইহোক, আমরা কখনও কখনও মডেলের কাছ থেকে একটি নতুন-তৈরি প্রমাণীকরণকারীর জন্য একটি আইডি প্রদান করতে বা একটি বিদ্যমান প্রমাণীকরণকারীতে সংরক্ষিত শংসাপত্রগুলি ফেরত দেওয়ার জন্য একটি প্রতিক্রিয়া পাঠাই।

( কোডটি পড়ুন)

দৃশ্য

আমরা ব্যবহারকারী-ইন্টারফেস প্রদান করতে ভিউ ব্যবহার করি যা একজন ডেভেলপার DevTools অ্যাক্সেস করার সময় খুঁজে পেতে পারে। এতে রয়েছে:

1. ভার্চুয়াল প্রমাণীকরণকারী পরিবেশ সক্ষম করার জন্য একটি টুলবার।
2. প্রমাণীকরণকারীদের যোগ করার জন্য একটি বিভাগ।
3. তৈরি প্রমাণীদের জন্য একটি বিভাগ।

( কোডটি পড়ুন)

ভার্চুয়াল প্রমাণীকরণকারী পরিবেশ সক্ষম করতে টুলবার

যেহেতু বেশিরভাগ ব্যবহারকারী-ইন্টার্যাকশন সম্পূর্ণ ট্যাবের পরিবর্তে এক সময়ে একটি প্রমাণীকরণকারীর সাথে হয়, তাই টুলবারে আমরা যে কার্যকারিতা প্রদান করি তা হল ভার্চুয়াল পরিবেশকে চালু এবং বন্ধ করা।

কেন এই প্রয়োজন? এটি গুরুত্বপূর্ণ যে ব্যবহারকারীকে স্পষ্টভাবে পরিবেশ টগল করতে হবে কারণ এটি করার ফলে ব্রাউজারটিকে প্রকৃত প্রমাণীকরণকারী আবিষ্কার থেকে সংযোগ বিচ্ছিন্ন করা হয়। অতএব, এটি চালু থাকাকালীন, ফিঙ্গারপ্রিন্ট রিডারের মতো সংযুক্ত শারীরিক প্রমাণীকরণকারীগুলি স্বীকৃত হবে না৷

আমরা সিদ্ধান্ত নিয়েছি যে একটি সুস্পষ্ট টগল মানে একটি ভাল ব্যবহারকারীর অভিজ্ঞতা, বিশেষ করে যারা বাস্তব আবিষ্কার অক্ষম করার আশা না করে WebAuthn ট্যাবে ঘুরে বেড়ান।

প্রমাণীকরণ বিভাগ যোগ করা হচ্ছে

ভার্চুয়াল প্রমাণীকরণকারী পরিবেশ সক্ষম করার পরে, আমরা বিকাশকারীকে একটি ইনলাইন-ফর্ম সহ উপস্থাপন করি যা তাদের একটি ভার্চুয়াল প্রমাণীকরণকারী যোগ করতে দেয়। এই ফর্মের মধ্যে, আমরা কাস্টমাইজেশন বিকল্পগুলি সরবরাহ করি যা ব্যবহারকারীকে প্রমাণীকরণকারীর প্রোটোকল এবং পরিবহন পদ্ধতিগুলি নির্ধারণ করতে দেয়, সেইসাথে প্রমাণীকরণকারী আবাসিক কী এবং ব্যবহারকারীর যাচাইকরণ সমর্থন করে কিনা।

ব্যবহারকারী একবার Add এ ক্লিক করলে, এই বিকল্পগুলিকে বান্ডিল করা হয় এবং মডেলে পাঠানো হয় যা একটি প্রমাণীকরণকারী তৈরি করতে কল করে। একবার এটি সম্পূর্ণ হয়ে গেলে, সামনের প্রান্তটি একটি প্রতিক্রিয়া পাবে এবং তারপরে নতুন তৈরি প্রমাণীকরণকে অন্তর্ভুক্ত করতে UI সংশোধন করবে।

প্রমাণীকরণকারী দৃশ্য

প্রতিবার প্রমাণীকরণকারীকে অনুকরণ করা হলে, আমরা এটিকে উপস্থাপন করার জন্য প্রমাণীকরণকারী দৃশ্যে একটি বিভাগ যোগ করি। প্রতিটি প্রমাণীকরণকারী বিভাগে একটি নাম, আইডি, কনফিগারেশন বিকল্প, প্রমাণীকরণকারী অপসারণ বা এটি সক্রিয় সেট করার জন্য বোতাম এবং একটি শংসাপত্র টেবিল অন্তর্ভুক্ত থাকে।

প্রমাণীকরণকারীর নাম

প্রমাণীকরণকারীর নামটি কাস্টমাইজযোগ্য এবং ডিফল্ট "প্রমাণকারী" এর আইডির শেষ 5টি অক্ষরের সাথে সংযুক্ত। মূলত, প্রমাণীকরণকারীর নামটি ছিল তার সম্পূর্ণ আইডি এবং অপরিবর্তনীয়। আমরা কাস্টমাইজযোগ্য নামগুলি প্রয়োগ করেছি যাতে ব্যবহারকারী তার ক্ষমতার উপর ভিত্তি করে প্রমাণীকরণকারীকে লেবেল করতে পারে, এটি যে শারীরিক প্রমাণীকরণকে অনুকরণ করার জন্য বোঝানো হয়েছে, বা 36-অক্ষরের আইডির চেয়ে হজম করা কিছুটা সহজ।

শংসাপত্রের টেবিল

আমরা প্রতিটি প্রমাণীকরণ বিভাগে একটি টেবিল যুক্ত করেছি যা একটি প্রমাণীকরণকারী দ্বারা নিবন্ধিত সমস্ত শংসাপত্র দেখায়। প্রতিটি সারির মধ্যে, আমরা একটি শংসাপত্র সম্পর্কে তথ্য প্রদান করি, সেইসাথে শংসাপত্র অপসারণ বা রপ্তানি করার জন্য বোতামগুলি প্রদান করি৷

বর্তমানে, আমরা প্রতিটি প্রমাণীকরণকারীর জন্য নিবন্ধিত শংসাপত্র পাওয়ার জন্য সিডিপিতে পোলিং করে এই টেবিলগুলি পূরণ করার জন্য তথ্য সংগ্রহ করি। ভবিষ্যতে, আমরা শংসাপত্র তৈরির জন্য একটি ইভেন্ট যোগ করার পরিকল্পনা করছি।

সক্রিয় বোতাম

আমরা প্রতিটি প্রমাণীকরণ বিভাগে একটি সক্রিয় রেডিও বোতাম যুক্ত করেছি। যে প্রমাণীকরণকারীটি বর্তমানে সক্রিয় সেট করা আছে সেটিই শংসাপত্রের জন্য শুনবে এবং নিবন্ধন করবে। এটি ছাড়া, একাধিক প্রমাণীকরণকারী প্রদত্ত শংসাপত্রের নিবন্ধন অ-নিয়ন্ত্রক যা WebAuthn ব্যবহার করে পরীক্ষা করার চেষ্টা করার সময় একটি মারাত্মক ত্রুটি হবে।

আমরা ভার্চুয়াল প্রমাণীকরণকারীদের উপর SetUserPresence পদ্ধতি ব্যবহার করে সক্রিয় স্থিতি প্রয়োগ করেছি। SetUserPresence পদ্ধতি সেট করে যে প্রদত্ত প্রমাণীকরণকারীর জন্য ব্যবহারকারীর উপস্থিতির পরীক্ষা সফল হবে কিনা। যদি আমরা এটি বন্ধ করি, একটি প্রমাণীকরণকারী শংসাপত্রের জন্য শুনতে সক্ষম হবে না। অতএব, এটি নিশ্চিত করে যে এটি সর্বাধিক একজন প্রমাণীকরণকারীর জন্য চালু আছে (একটি সক্রিয় হিসাবে সেট), এবং অন্য সকলের জন্য ব্যবহারকারীর উপস্থিতি অক্ষম করে, আমরা নির্ধারক আচরণকে বাধ্য করতে পারি।

সক্রিয় বোতামটি যোগ করার সময় আমরা একটি আকর্ষণীয় চ্যালেঞ্জের মুখোমুখি হয়েছিলাম যা ছিল একটি রেস কন্ডিশন এড়ানো। নিম্নলিখিত দৃশ্যকল্প বিবেচনা করুন:

1. ব্যবহারকারী প্রমাণীকরণকারী X-এর জন্য সক্রিয় রেডিও বোতামে ক্লিক করে, X কে সক্রিয় হিসাবে সেট করার জন্য CDP-কে একটি অনুরোধ পাঠায়। X-এর জন্য সক্রিয় রেডিও বোতামটি নির্বাচন করা হয়েছে, এবং অন্য সবগুলি অনির্বাচিত হয়েছে৷

2. অবিলম্বে, ব্যবহারকারী প্রমাণীকরণকারী Y-এর জন্য সক্রিয় রেডিও বোতামে ক্লিক করে, Y কে সক্রিয় হিসাবে সেট করার জন্য CDP-কে একটি অনুরোধ পাঠায়। 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. টুলবারে "ভার্চুয়াল প্রমাণীকরণকারী পরিবেশ সক্ষম করুন" চেকবক্সটি কতবার টগল করা হয়েছে তা ট্র্যাক করুন ৷ এই বিকল্পটিতে একটি সম্ভাব্য অতিরিক্ত গণনা সমস্যা ছিল কারণ কেউ কেউ একই সেশনে একাধিকবার পরিবেশকে চালু এবং বন্ধ করতে পারে।

শেষ পর্যন্ত, আমরা পরেরটির সাথে যাওয়ার সিদ্ধান্ত নিয়েছি কিন্তু সেশনে পরিবেশ ইতিমধ্যে সক্ষম হয়েছে কিনা তা পরীক্ষা করে গণনা সীমাবদ্ধ করেছি । তাই, ডেভেলপার পরিবেশকে কতবার টগল করেছে তা নির্বিশেষে আমরা শুধুমাত্র 1 দ্বারা গণনা বাড়াব। এটি কাজ করে কারণ প্রতিবার ট্যাবটি পুনরায় খোলার সময় একটি নতুন সেশন তৈরি করা হয়, এইভাবে চেকটি পুনরায় সেট করে এবং মেট্রিকটিকে আবার বৃদ্ধি করার অনুমতি দেয়।

সারাংশ

পড়ার জন্য আপনাকে ধন্যবাদ! WebAuthn ট্যাব উন্নত করার জন্য আপনার যদি কোনো পরামর্শ থাকে, একটি বাগ ফাইল করে আমাদের জানান।

আপনি WebAuthn সম্পর্কে আরও জানতে চাইলে এখানে কিছু সংস্থান রয়েছে:

• WebAuthn DevTools ফ্রন্ট-এন্ড ডিজাইন ডক
• ওয়েব প্রমাণীকরণ পরীক্ষার API ডিজাইন ডক
• Web Authentication API (WebAuthn) স্পেক
• WebAuthn ব্যাখ্যা এবং গাইড

প্রিভিউ চ্যানেল ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসাবে Chrome Canary , Dev , বা Beta ব্যবহার করার কথা বিবেচনা করুন৷ এই প্রিভিউ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম APIগুলি পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের করার আগে আপনার সাইটে সমস্যাগুলি খুঁজে পেতে সহায়তা করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

নতুন বৈশিষ্ট্য, আপডেট বা DevTools সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন৷

• crbug.com এ আমাদের কাছে প্রতিক্রিয়া এবং বৈশিষ্ট্যের অনুরোধ জমা দিন।
• more_vert আরও বিকল্প > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন।
• @ ChromeDevTools-এ টুইট করুন।
• DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷