ফর্ম অটোফিলের মাধ্যমে একটি পাসকি দিয়ে সাইন ইন করুন

এমন একটি সাইন ইন অভিজ্ঞতা তৈরি করুন যা পাসকি ব্যবহার করে এবং বিদ্যমান পাসওয়ার্ড ব্যবহারকারীদেরকে মিটমাট করে।

Eiji Kitamura

পাসকিগুলি পাসওয়ার্ডগুলি প্রতিস্থাপন করে এবং ওয়েবে ব্যবহারকারীর অ্যাকাউন্টগুলিকে নিরাপদ, সহজ, ব্যবহার করা সহজ করে তোলে৷ যাইহোক, পাসওয়ার্ড-ভিত্তিক থেকে পাসকি-ভিত্তিক প্রমাণীকরণে রূপান্তর ব্যবহারকারীর অভিজ্ঞতাকে জটিল করতে পারে। পাসকি সাজেস্ট করার জন্য ফর্ম অটোফিল ব্যবহার করা একটি ইউনিফাইড অভিজ্ঞতা তৈরি করতে সাহায্য করতে পারে।

পাসকি দিয়ে সাইন-ইন করতে ফর্ম অটোফিল ব্যবহার করবেন কেন?

একটি পাসকি দিয়ে, একজন ব্যবহারকারী শুধুমাত্র আঙ্গুলের ছাপ, মুখ বা ডিভাইসের পিন ব্যবহার করে একটি ওয়েবসাইটে সাইন ইন করতে পারেন।

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

যাইহোক, পাসওয়ার্ড থেকে পাসকি-ভিত্তিক প্রমাণীকরণে রূপান্তর চ্যালেঞ্জিং হতে পারে। ব্যবহারকারীরা পাসকিতে স্যুইচ করার সাথে সাথে, সেখানে এখনও যারা পাসওয়ার্ড ব্যবহার করে এবং ওয়েবসাইটগুলিকে উভয় ধরণের ব্যবহারকারীদের মিটমাট করতে হবে। ব্যবহারকারীদের নিজেদের মনে রাখা উচিত নয় যে তারা কোন সাইটগুলিতে পাসকিতে স্যুইচ করেছে, তাই ব্যবহারকারীদের সামনে কোন পদ্ধতি ব্যবহার করতে হবে তা নির্বাচন করতে বলা খারাপ UX হবে।

পাসকিগুলিও একটি নতুন প্রযুক্তি। সেগুলি ব্যাখ্যা করা এবং ব্যবহারকারীরা সেগুলি ব্যবহারে স্বাচ্ছন্দ্য বোধ করছেন তা নিশ্চিত করা ওয়েবসাইটগুলির জন্য একটি চ্যালেঞ্জ হতে পারে৷ উভয় সমস্যা সমাধানের জন্য আমরা পাসওয়ার্ড অটোফিলিং করার জন্য পরিচিত ব্যবহারকারীর অভিজ্ঞতার উপর নির্ভর করতে পারি।

শর্তসাপেক্ষ UI

পাসকি এবং পাসওয়ার্ড উভয় ব্যবহারকারীর জন্য একটি দক্ষ ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে, আপনি অটোফিল পরামর্শগুলিতে পাসকিগুলি অন্তর্ভুক্ত করতে পারেন। এটিকে শর্তসাপেক্ষ UI বলা হয় এবং এটি WebAuthn স্ট্যান্ডার্ডের একটি অংশ।

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

এইভাবে, ব্যবহারকারীরা আপনার ওয়েবসাইটে বিদ্যমান ফর্মটি দিয়ে সাইন ইন করতে পারেন যেন কিছুই পরিবর্তন হয়নি, তবে পাসকিগুলির অতিরিক্ত নিরাপত্তা সুবিধার সাথে যদি তাদের কাছে একটি থাকে।

সফলতা: যখন একজন ব্যবহারকারী একটি পাসওয়ার্ড দিয়ে সাইন ইন করে, সেই সুযোগটি ব্যবহার করে তাদের একটি পাসকি তৈরি করার প্রস্তাব বিবেচনা করুন৷

এটা কিভাবে কাজ করে

একটি পাসকি দিয়ে প্রমাণীকরণ করতে, আপনি WebAuthn API ব্যবহার করেন।

একটি পাসকি প্রমাণীকরণ প্রবাহের চারটি উপাদান হল: ব্যবহারকারী:

• ব্যাকএন্ড : আপনার ব্যাকএন্ড সার্ভার যা অ্যাকাউন্ট ডাটাবেস ধারণ করে পাবলিক কী এবং পাসকি সম্পর্কে অন্যান্য মেটাডেটা সংরক্ষণ করে।
• ফ্রন্টএন্ড : আপনার ফ্রন্টএন্ড যা ব্রাউজারের সাথে যোগাযোগ করে এবং ব্যাকএন্ডে আনার অনুরোধ পাঠায়।
• ব্রাউজার : ব্যবহারকারীর ব্রাউজার যা আপনার জাভাস্ক্রিপ্ট চালাচ্ছে।
• প্রমাণীকরণকারী : ব্যবহারকারীর প্রমাণীকরণকারী যা পাসকি তৈরি করে এবং সংরক্ষণ করে। এটি ব্রাউজারের মতো একই ডিভাইসে (যেমন উইন্ডোজ হ্যালো ব্যবহার করার সময়) বা ফোনের মতো অন্য ডিভাইসে হতে পারে।

1. একজন ব্যবহারকারী ফ্রন্টএন্ডে অবতরণ করার সাথে সাথে, এটি একটি পাসকি দিয়ে প্রমাণীকরণের জন্য ব্যাকএন্ড থেকে একটি চ্যালেঞ্জের অনুরোধ করে এবং একটি পাসকি দিয়ে প্রমাণীকরণ শুরু করার জন্য navigator.credentials.get() কল করে। এটি একটি Promise প্রদান করে।
2. ব্যবহারকারী যখন সাইন-ইন ক্ষেত্রে কার্সার রাখে, ব্রাউজার পাসকি সহ একটি পাসওয়ার্ড স্বয়ংক্রিয়ভাবে পূরণ ডায়ালগ প্রদর্শন করে। ব্যবহারকারী একটি পাসকি নির্বাচন করলে একটি প্রমাণীকরণ ডায়ালগ উপস্থিত হয়।
3. ব্যবহারকারী ডিভাইসের স্ক্রিন লক ব্যবহার করে তাদের পরিচয় যাচাই করার পরে, প্রতিশ্রুতিটি সমাধান করা হয় এবং একটি সর্বজনীন কী শংসাপত্র ফ্রন্টএন্ডে ফিরিয়ে দেওয়া হয়।
4. ফ্রন্টএন্ড ব্যাকএন্ডে পাবলিক কী শংসাপত্র পাঠায়। ব্যাকএন্ড ডাটাবেসের মধ্যে মিলে যাওয়া অ্যাকাউন্টের পাবলিক কী-এর বিপরীতে স্বাক্ষর যাচাই করে। যদি এটি সফল হয়, ব্যবহারকারী সাইন ইন করা হয়.

ফর্ম অটোফিলের মাধ্যমে একটি পাসকি দিয়ে প্রমাণীকরণ করুন

যখন একজন ব্যবহারকারী সাইন ইন করতে চান, তখন আপনি একটি শর্তসাপেক্ষ WebAuthn get কল করতে পারেন যাতে পাসকিগুলি স্বয়ংক্রিয়ভাবে পূরণ করার পরামর্শ অন্তর্ভুক্ত হতে পারে। WebAuthn- এর navigator.credentials.get() API-তে একটি শর্তসাপেক্ষ কল UI দেখায় না এবং ব্যবহারকারী স্বয়ংক্রিয়ভাবে পূরণের পরামর্শ থেকে সাইন-ইন করার জন্য একটি অ্যাকাউন্ট বেছে না নেওয়া পর্যন্ত মুলতুবি থাকে। যদি ব্যবহারকারী একটি পাসকি বাছাই করে তবে ব্রাউজার সাইন-ইন ফর্মটি পূরণ করার পরিবর্তে একটি শংসাপত্রের সাথে প্রতিশ্রুতিটি সমাধান করবে। তারপর ব্যবহারকারীকে সাইন ইন করার দায়িত্ব পেজের।

টীকা ফর্ম ইনপুট ক্ষেত্র

প্রয়োজনে ব্যবহারকারীর নাম input ক্ষেত্রে একটি autocomplete বৈশিষ্ট্য যোগ করুন। পাসকিগুলির পরামর্শ দেওয়ার জন্য এটির টোকেন হিসাবে username এবং webauthn যুক্ত করুন৷

<input type="text" name="username" autocomplete="username webauthn" ...>

বৈশিষ্ট্য সনাক্তকরণ

একটি শর্তসাপেক্ষ WebAuthn API কল করার আগে, পরীক্ষা করুন যদি:

• ব্রাউজারটি PublicKeyCredential এর সাথে WebAuthn সমর্থন করে।

ব্রাউজার সমর্থন

• 67
• 18
• 60
• 13

উৎস

• ব্রাউজারটি PublicKeyCredenital.isConditionalMediationAvailable() সহ WebAuthn শর্তসাপেক্ষ UI সমর্থন করে।

ব্রাউজার সমর্থন

• 108
• 108
• 119
• 16

উৎস

// Availability of `window.PublicKeyCredential` means WebAuthn is usable.  
if (window.PublicKeyCredential &&  
    PublicKeyCredential.​​isConditionalMediationAvailable) {  
  // Check if conditional mediation is available.  
  const isCMA = await PublicKeyCredential.​​isConditionalMediationAvailable();  
  if (isCMA) {  
    // Call WebAuthn authentication  
  }  
}  

RP সার্ভার থেকে একটি চ্যালেঞ্জ আনুন

RP সার্ভার থেকে একটি চ্যালেঞ্জ আনুন যা navigator.credentials.get() কল করার জন্য প্রয়োজন :

• challenge : একটি ArrayBuffer-এ একটি সার্ভার-উত্পন্ন চ্যালেঞ্জ। রিপ্লে আক্রমণ প্রতিরোধ করার জন্য এটি প্রয়োজনীয়। প্রতিটি সাইন-ইন প্রচেষ্টায় একটি নতুন চ্যালেঞ্জ তৈরি করা নিশ্চিত করুন এবং একটি নির্দিষ্ট সময়ের পরে বা সাইন-ইন প্রচেষ্টা যাচাই করতে ব্যর্থ হওয়ার পরে এটিকে উপেক্ষা করুন৷ এটি একটি CSRF টোকেনের মত বিবেচনা করুন।
• allowCredentials : এই প্রমাণীকরণের জন্য গ্রহণযোগ্য শংসাপত্রের একটি অ্যারে। ব্যবহারকারীকে ব্রাউজার দ্বারা দেখানো একটি তালিকা থেকে একটি উপলব্ধ পাসকি নির্বাচন করতে দেওয়ার জন্য একটি খালি অ্যারে পাস করুন৷

• userVerification : ডিভাইসের স্ক্রিন লক ব্যবহার করে ব্যবহারকারীর যাচাইকরণ "required" , "preferred" বা "discouraged" কিনা তা নির্দেশ করে। ডিফল্টটি "preferred" , যার অর্থ প্রমাণীকরণকারী ব্যবহারকারীর যাচাইকরণ এড়িয়ে যেতে পারে৷ এটিকে "preferred" হিসাবে সেট করুন বা সম্পত্তি বাদ দিন।

  সতর্কতা: userVerification অনুরোধের জন্য "preferred" তে সেট করা হয়েছে, প্রমাণকারীরা ব্যবহারকারী যাচাইকরণ চেক এড়িয়ে যেতে পারে। উদাহরণস্বরূপ, যদি ডিভাইসটিতে কোনো বায়োমেট্রিক সেন্সর না থাকে, ব্যবহারকারী এটি সেট আপ করেনি (কোন নথিভুক্ত আঙ্গুলের ছাপ নেই), অথবা যদি সেন্সর সাময়িকভাবে অনুপলব্ধ থাকে (একটি বন্ধ ডিসপ্লে ঢাকনা দিয়ে ল্যাপটপ চলছে)। প্রতিক্রিয়ার প্রমাণীকরণকারী ডেটাতে থাকা UV বিট সর্বদা নির্দেশ করে যে ব্যবহারকারীর যাচাইকরণ করা হয়েছে কিনা। আপনি যদি নিশ্চিত করতে চান যে এটি একটি দুই ফ্যাক্টর প্রমাণীকরণ, UV বিট বন্ধ থাকলে দ্বিতীয় ধাপের জন্য (যেমন একটি পাসওয়ার্ড) জিজ্ঞাসা করুন। অথবা, আপনি userVerification "required" হিসাবে সেট করতে পারেন৷

দ্রষ্টব্য: সার্ভার থেকে ট্রান্সফার করা ArrayBuffer মান যেমন challenge , user.id এবং excludeCredentials এর জন্য ক্রেডেনশিয়াল id ট্রান্সমিশনে এনকোড করা প্রয়োজন। WebAuthn API কলে মানগুলি পাস করার আগে সেগুলিকে RP ফ্রন্টএন্ডে ডিকোড করা নিশ্চিত করুন৷ আমরা Base64URL এনকোড ব্যবহার করার পরামর্শ দিই।

ব্যবহারকারীকে প্রমাণীকরণ করতে conditional পতাকা সহ WebAuthn API কল করুন

ব্যবহারকারীর প্রমাণীকরণের জন্য অপেক্ষা শুরু করতে navigator.credentials.get() এ কল করুন।

// To abort a WebAuthn call, instantiate an `AbortController`.
const abortController = new AbortController();

const publicKeyCredentialRequestOptions = {
  // Server generated challenge
  challenge: ****,
  // The same RP ID as used during registration
  rpId: 'example.com',
};

const credential = await navigator.credentials.get({
  publicKey: publicKeyCredentialRequestOptions,
  signal: abortController.signal,
  // Specify 'conditional' to activate conditional UI
  mediation: 'conditional'
});

• rpId : একটি RP ID হল একটি ডোমেন এবং একটি ওয়েবসাইট তার ডোমেন বা একটি নিবন্ধনযোগ্য প্রত্যয় নির্দিষ্ট করতে পারে। এই মানটি পাসকি তৈরি করার সময় ব্যবহৃত rp.id-এর সাথে মেলে।

mediation: 'conditional' ।

দ্রষ্টব্য: এখানে WebAuthn কলটি মুলতুবি থাকবে এবং ব্যবহারকারী অটোফিল ইনপুট উপাদানের সাথে ইন্টারঅ্যাক্ট না করা এবং প্রমাণীকরণ প্রবাহ সম্পূর্ণ না করা পর্যন্ত প্রতিশ্রুতিটি সমাধান করা হবে না৷ WebAuthn কল বাতিল করতে RP ফ্রন্টএন্ড AbortController ব্যবহার করতে পারে।

ফিরে আসা পাবলিক কী শংসাপত্রটি RP সার্ভারে পাঠান

ব্যবহারকারী একটি অ্যাকাউন্ট নির্বাচন করার পরে এবং ডিভাইসের স্ক্রিন লক ব্যবহার করে সম্মতি দেওয়ার পরে, প্রতিশ্রুতিটি RP ফ্রন্টএন্ডে একটি PublicKeyCredential অবজেক্ট ফেরত দিয়ে সমাধান করা হয়।

একটি প্রতিশ্রুতি বিভিন্ন কারণে প্রত্যাখ্যান করা যেতে পারে। Error বস্তুর name বৈশিষ্ট্যের উপর নির্ভর করে আপনাকে সেই অনুযায়ী ত্রুটিগুলি পরিচালনা করতে হবে:

• NotAllowedError : ব্যবহারকারী অপারেশনটি বাতিল করেছে৷
• অন্যান্য ব্যতিক্রম : অপ্রত্যাশিত কিছু ঘটেছে। ব্রাউজার ব্যবহারকারীকে একটি ত্রুটি ডায়ালগ দেখায়।

সর্বজনীন কী শংসাপত্রের অবজেক্টে নিম্নলিখিত বৈশিষ্ট্যগুলি রয়েছে:

• id : প্রমাণীকৃত পাসকি শংসাপত্রের base64url এনকোড করা আইডি।
• rawId : শংসাপত্র আইডির একটি ArrayBuffer সংস্করণ।
• response.clientDataJSON : ক্লায়েন্ট ডেটার একটি ArrayBuffer। এই ক্ষেত্রটিতে চ্যালেঞ্জ এবং উৎপত্তির মতো তথ্য রয়েছে যা RP সার্ভারকে যাচাই করতে হবে।
• response.authenticatorData : প্রমাণীকরণকারী ডেটার একটি ArrayBuffer। এই ক্ষেত্রটিতে RP ID এর মতো তথ্য রয়েছে।
• response.signature : স্বাক্ষরের একটি ArrayBuffer। এই মানটি শংসাপত্রের মূল এবং সার্ভারে যাচাই করা প্রয়োজন৷
• response.userHandle : একটি ArrayBuffer যাতে ব্যবহারকারী আইডি থাকে যা তৈরির সময় সেট করা হয়েছিল। এই মানটি ক্রেডেনশিয়াল আইডির পরিবর্তে ব্যবহার করা যেতে পারে, যদি সার্ভারের আইডি মানগুলি বাছাই করার প্রয়োজন হয় যা এটি ব্যবহার করে, অথবা যদি ব্যাকএন্ড শংসাপত্র আইডিগুলিতে একটি সূচক তৈরি করা এড়াতে চায়।
• authenticatorAttachment : স্থানীয় ডিভাইস থেকে এই শংসাপত্রটি আসার সময় platform ফেরত দেয়। অন্যথায় cross-platform , বিশেষত যখন ব্যবহারকারী সাইন ইন করতে একটি ফোন ব্যবহার করেন । যদি ব্যবহারকারীর সাইন-ইন করার জন্য একটি ফোন ব্যবহার করার প্রয়োজন হয়, তাহলে স্থানীয় ডিভাইসে একটি পাসকি তৈরি করার জন্য তাদের অনুরোধ করার কথা বিবেচনা করুন৷
• type : এই ক্ষেত্রটি সর্বদা "public-key" এ সেট করা থাকে।

আপনি যদি RP সার্ভারে সর্বজনীন-কী শংসাপত্রের অবজেক্ট পরিচালনা করার জন্য একটি লাইব্রেরি ব্যবহার করেন, আমরা সুপারিশ করি যে আপনি base64url এর সাথে আংশিকভাবে এনকোড করার পরে সম্পূর্ণ বস্তুটিকে সার্ভারে পাঠান।

স্বাক্ষর যাচাই করুন

যখন আপনি সার্ভারে সর্বজনীন কী শংসাপত্রটি পান, তখন বস্তুটি প্রক্রিয়া করতে এটি FIDO লাইব্রেরিতে প্রেরণ করুন।

id প্রপার্টির সাথে মিলে যাওয়া ক্রেডেনশিয়াল আইডিটি দেখুন (যদি আপনি ব্যবহারকারীর অ্যাকাউন্ট নির্ধারণ করতে চান, তাহলে userHandle প্রপার্টিটি ব্যবহার করুন যেটি user.id আপনি শংসাপত্র তৈরি করার সময় উল্লেখ করেছেন)। শংসাপত্রের signature সংরক্ষণ করা পাবলিক কী দিয়ে যাচাই করা যায় কিনা দেখুন। এটি করার জন্য, আমরা আপনার নিজের কোড লেখার পরিবর্তে একটি সার্ভার সাইড লাইব্রেরি বা একটি সমাধান ব্যবহার করার পরামর্শ দিই। আপনি অসাধারণ-webauth GitHub রেপোতে ওপেন সোর্স লাইব্রেরি খুঁজে পেতে পারেন ।

একটি মিলে যাওয়া পাবলিক কী দিয়ে শংসাপত্র যাচাই হয়ে গেলে, ব্যবহারকারীকে সাইন ইন করুন৷

সার্ভার-সাইড পাসকি প্রমাণীকরণে আরও বিস্তারিত নির্দেশাবলী অনুসরণ করুন

সম্পদ

• সার্ভার-সাইড পাসকি প্রমাণীকরণ
• পাসওয়ার্ডহীন লগইন করার জন্য একটি পাসকি তৈরি করুন
• পাসকি
• অ্যাপল নথি: একটি ওয়েব পরিষেবার মাধ্যমে ব্যবহারকারীর প্রমাণীকরণ
• গুগল ডকুমেন্ট: পাসওয়ার্ডবিহীন লগইন পাসকি দিয়ে