আবিষ্কারযোগ্য শংসাপত্র গভীর ডুব

যদিও পাসকির মতো FIDO ক্রেডেনশিয়ালগুলোর লক্ষ্য পাসওয়ার্ড প্রতিস্থাপন করা, এগুলোর বেশিরভাগই ব্যবহারকারীকে ইউজারনেম টাইপ করার ঝামেলা থেকেও মুক্তি দিতে পারে। এর ফলে ব্যবহারকারীরা বর্তমান ওয়েবসাইটের জন্য তাদের কাছে থাকা পাসকির তালিকা থেকে একটি অ্যাকাউন্ট নির্বাচন করে নিজেদের প্রমাণীকরণ করতে পারেন।

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

আপনার ক্রেডেনশিয়ালগুলো যাতে পাসকি (খুঁজে পাওয়া যায় এমন ক্রেডেনশিয়াল) হিসেবে তৈরি হয়, তা নিশ্চিত করতে ক্রেডেনশিয়াল তৈরির সময় residentKey এবং requireResidentKey উল্লেখ করুন।

রিলায়িং পার্টি (RP) পাসকি অথেনটিকেশনের সময় allowCredentials বাদ দিয়ে ডিসকভারেবল ক্রেডেনশিয়াল ব্যবহার করতে পারে। এই ক্ষেত্রে, ব্রাউজার বা সিস্টেম ব্যবহারকারীকে উপলব্ধ পাসকিগুলোর একটি তালিকা দেখায়, যা তৈরির সময় সেট করা user.name প্রপার্টি দ্বারা চিহ্নিত করা হয়। যদি ব্যবহারকারী কোনো একটি নির্বাচন করেন, তাহলে user.id ভ্যালুটি চূড়ান্ত সিগনেচারে অন্তর্ভুক্ত হবে। এরপর সার্ভার টাইপ করা ইউজারনেমের পরিবর্তে অ্যাকাউন্টটি খুঁজে বের করার জন্য সেটি বা ফেরত আসা ক্রেডেনশিয়াল আইডি ব্যবহার করতে পারে।

পূর্বে আলোচিত অ্যাকাউন্ট সিলেক্টর UI-গুলো কখনোই এমন ক্রেডেনশিয়াল দেখায় না যা খুঁজে পাওয়া যায় না।

requireResidentKey এবং residentKey

একটি পাসকি তৈরি করতে, navigator.credentials.create() ফাংশনে authenticatorSelection.residentKey এবং authenticatorSelection.requireResidentKey নিম্নলিখিতভাবে নির্দেশিত মান সহ উল্লেখ করুন।

async function register () {
  // ...

  const publicKeyCredentialCreationOptions = {
    // ...
    authenticatorSelection: {
      authenticatorAttachment: 'platform',
      residentKey: 'required',
      requireResidentKey: true,
    }
  };

  const credential = await navigator.credentials.create({
    publicKey: publicKeyCredentialCreationOptions
  });

  // This does not run until the user selects a passkey.
  const credential = {};
  credential.id = cred.id;
  credential.rawId = cred.id; // Pass a Base64URL encoded ID string.
  credential.type = cred.type;

  // ...
}

residentKey :

  • 'required' : একটি শনাক্তযোগ্য ক্রেডেনশিয়াল তৈরি করতে হবে। যদি এটি তৈরি করা না যায়, তাহলে NotSupportedError রিটার্ন করা হয়।
  • 'preferred' : আরপি একটি আবিষ্কারযোগ্য ক্রেডেনশিয়াল তৈরি করতে পছন্দ করে, কিন্তু একটি অ-আবিষ্কারযোগ্য ক্রেডেনশিয়ালও গ্রহণ করে।
  • 'discouraged' : আরপি এমন একটি ক্রেডেনশিয়াল তৈরি করতে পছন্দ করে যা খুঁজে পাওয়া যায় না, কিন্তু একটি খুঁজে পাওয়া যায় এমন ক্রেডেনশিয়ালও গ্রহণ করে।

requireResidentKey :

  • স্পেসিফিকেশনের একটি পুরোনো সংস্করণ, WebAuthn লেভেল ১ থেকে ব্যাকওয়ার্ড কম্প্যাটিবিলিটির জন্য এই প্রপার্টিটি রাখা হয়েছে। residentKey 'required' হলে এটিকে true সেট করুন, অন্যথায় false সেট করুন।

allowCredentials

আরপি-রা পাসকি অথেন্টিকেশন অভিজ্ঞতা নিয়ন্ত্রণ করতে navigator.credentials.get() -এ allowCredentials ব্যবহার করতে পারেন। সাধারণত তিন ধরনের পাসকি অথেন্টিকেশন অভিজ্ঞতা রয়েছে:

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

এই ইউজার এক্সপেরিয়েন্সটি পেতে, navigator.credentials.get() -এর allowCredentials প্যারামিটারটি বাদ দিন অথবা একটি খালি অ্যারে পাস করুন।

async function authenticate() {
  // ...

  const publicKeyCredentialRequestOptions = {
    // Server generated challenge:
    challenge: ****,
    // The same RP ID as used during registration:
    rpId: 'example.com',
    // You can omit `allowCredentials` as well:
    allowCredentials: []
  };

  const credential = await navigator.credentials.get({
    publicKey: publicKeyCredentialRequestOptions,
    signal: abortController.signal
  });

  // This does not run until the user selects a passkey.
  const credential = {};
  credential.id = cred.id;
  credential.rawId = cred.id; // Pass a Base64URL encoded ID string.
  credential.type = cred.type;
  
  // ...
}

পাসকি ফর্ম স্বয়ংক্রিয়ভাবে পূরণ দেখান

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

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

যখন আরপি (RP) মাইগ্রেশনের অধীনে থাকে এবং পাসওয়ার্ড ও পাসকি উভয়ই মিশ্রভাবে ব্যবহৃত হয়, তখন এই ইউজার এক্সপেরিয়েন্সটি আদর্শ।

এই ইউজার এক্সপেরিয়েন্সটি অর্জন করতে, allowCredentials প্রপার্টিতে একটি খালি অ্যারে পাস করা বা প্যারামিটারটি বাদ দেওয়ার পাশাপাশি, navigator.credentials.get() -এ mediation: 'conditional' নির্দিষ্ট করুন এবং একটি HTML username ইনপুট ফিল্ডকে autocomplete="username webauthn" অথবা একটি password ইনপুট ফিল্ডকে autocomplete="password webauthn" দিয়ে অ্যানোটেট করুন।

navigator.credentials.get() কল করলে কোনো UI দেখানো হবে না, কিন্তু ব্যবহারকারী যদি অ্যানোটেড ইনপুট ফিল্ডটিতে ফোকাস করেন, তাহলে উপলব্ধ যেকোনো পাসকি অটোফিল অপশনে অন্তর্ভুক্ত হবে। যদি ব্যবহারকারী কোনো একটি পাসকি নির্বাচন করেন, তাহলে তিনি সাধারণ ডিভাইস আনলক ভেরিফিকেশনের মধ্য দিয়ে যাবেন, এবং কেবল তখনই .get() দ্বারা রিটার্ন করা প্রমিসটি একটি ফলাফলসহ রিজলভ হবে। যদি ব্যবহারকারী কোনো পাসকি নির্বাচন না করেন, তাহলে প্রমিসটি কখনোই রিজলভ হয় না।

async function authenticate() {
  // ...

  const publicKeyCredentialRequestOptions = {
    // Server generated challenge:
    challenge: ****,
    // The same RP ID as used during registration:
    rpId: 'example.com',
    // You can omit `allowCredentials` as well:
    allowCredentials: []
  };

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

  // This does not run until the user selects a passkey.
  const credential = {};
  credential.id = cred.id;
  credential.rawId = cred.id; // Pass a Base64URL encoded ID string.
  credential.type = cred.type;
  
  // ...
}
<input type="text" name="username" autocomplete="username webauthn" ...>

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

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

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

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

এই ইউজার এক্সপেরিয়েন্সটি নিশ্চিত করতে, সাইন ইন করা ব্যবহারকারীর ক্রেডেনশিয়াল আইডিগুলোর একটি তালিকা প্রদান করুন। RP-এর সেগুলো কোয়েরি করার সক্ষমতা থাকা উচিত, কারণ ব্যবহারকারীটি আগে থেকেই পরিচিত। navigator.credentials.get() -এর allowCredentials প্রপার্টিতে ক্রেডেনশিয়াল আইডিগুলো PublicKeyCredentialDescriptor অবজেক্ট হিসেবে প্রদান করুন।

async function authenticate() {
  // ...

  const publicKeyCredentialRequestOptions = {
    // Server generated challenge:
    challenge: ****,
    // The same RP ID as used during registration:
    rpId: 'example.com',
    // Provide a list of PublicKeyCredentialDescriptors:
    allowCredentials: [{
      id: ****,
      type: 'public-key',
      transports: [
        'internal',
        'hybrid'
      ]
    }, {
      id: ****,
      type: 'public-key',
      transports: [
        'internal',
        'hybrid'
      ]
    }, ...]
  };

  const credential = await navigator.credentials.get({
    publicKey: publicKeyCredentialRequestOptions,
    signal: abortController.signal
  });

  // This does not run until the user selects a passkey.
  const credential = {};
  credential.id = cred.id;
  credential.rawId = cred.id; // Pass a Base64URL encoded ID string.
  credential.type = cred.type;
  
  // ...
}

একটি PublicKeyCredentialDescriptor অবজেক্ট নিম্নলিখিত উপাদানগুলো নিয়ে গঠিত:

  • id : পাসকি নিবন্ধনের সময় RP কর্তৃক প্রাপ্ত পাবলিক কী ক্রেডেনশিয়ালের একটি আইডি।
  • type : এই ফিল্ডটি সাধারণত 'public-key' হয়ে থাকে।
  • transports : এই ক্রেডেনশিয়ালটি ধারণকারী ডিভাইস দ্বারা সমর্থিত ট্রান্সপোর্টগুলোর একটি ইঙ্গিত, যা ব্রাউজারগুলো ব্যবহারকারীকে একটি বাহ্যিক ডিভাইস উপস্থাপন করতে বলার UI অপ্টিমাইজ করার জন্য ব্যবহার করে। এই তালিকাটি, যদি প্রদান করা হয়, তবে এতে প্রতিটি ক্রেডেনশিয়ালের নিবন্ধনের সময় getTransports() কল করার ফলাফল থাকা উচিত।

সারসংক্ষেপ

ডিসকভারেবল ক্রেডেনশিয়ালস ব্যবহারকারীদের ইউজারনেম প্রবেশ করানো এড়িয়ে যাওয়ার সুযোগ দিয়ে পাসকি সাইন-ইন অভিজ্ঞতাকে অনেক বেশি ব্যবহারকারী-বান্ধব করে তোলে। residentKey , requireResidentKey , এবং allowCredentials এর সমন্বয়ে, আরপি-রা এমন সাইন-ইন অভিজ্ঞতা অর্জন করতে পারে যা:

  • একটি মোডাল অ্যাকাউন্ট সিলেক্টর দেখান।
  • পাসকি ফর্মটি স্বয়ংক্রিয়ভাবে পূরণ হতে দেখান।
  • পুনঃপ্রমাণীকরণ।

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