পাসকী-র মতো 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': RP খুঁজে নেওয়ার যোগ্য ক্রেডেনশিয়াল তৈরি করতে পছন্দ করে, তবে খুঁজে নেওয়ার যোগ্য নয় এমন ক্রেডেনশিয়ালও গ্রহণ করে।'discouraged': RP খুঁজে নেওয়ার যোগ্য নয় এমন ক্রেডেনশিয়াল তৈরি করতে পছন্দ করে, তবে খুঁজে নেওয়ার যোগ্য ক্রেডেনশিয়াল গ্রহণ করে।
requireResidentKey:
- এই প্রপার্টিটি WebAuthn লেভেল ১ থেকে ব্যাকওয়ার্ড কম্প্যাটিবিলিটির জন্য রাখা হয়েছে, যা স্পেসিফিকেশনের একটি পুরনো ভার্সন।
residentKeyযদি'required'হয় তাহলে এটিtrue-এ সেট করুন, অন্যথায় এটিfalse-এ সেট করুন।
allowCredentials
RP-রা পাসকী যাচাইকরণের অভিজ্ঞতা নিয়ন্ত্রণ করতে navigator.credentials.get()-এ allowCredentials ব্যবহার করতে পারবেন। সাধারণত তিন ধরনের পাসকী যাচাইকরণের অভিজ্ঞতা হয়:
একটি মডেল অ্যাকাউন্ট নির্বাচক দেখান
খুঁজে নেওয়ার যোগ্য ক্রেডেনশিয়ালের মাধ্যমে, RP ব্যবহারকারীকে সাইন-ইন করার জন্য অ্যাকাউন্ট বেছে নিতে একটি মডাল অ্যাকাউন্ট সিলেক্টর দেখাতে পারে, তারপরে ব্যবহারকারীকে যাচাই করা হয়। পাসকী যাচাইকরণের জন্য নির্দিষ্ট বোতাম প্রেস করে শুরু করা পাসকী যাচাইকরণ ফ্লোয়ের জন্য এটি উপযুক্ত।
এই ব্যবহারকারীর অভিজ্ঞতা পেতে, 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' নির্দিষ্ট করুন এবং autocomplete="username webauthn" সহ একটি HTML username ইনপুট ফিল্ড বা autocomplete="password webauthn" সহ একটি password ইনপুট ফিল্ড অ্যানোটেট করুন।
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=&qu>ot;username webauthn" ...
আপনি ফর্ম অটোফিলের মাধ্যমে পাসকী দিয়ে সাইন-ইন করুন এবং ওয়েব অ্যাপে ফর্ম অটোফিলের মাধ্যমে পাসকী প্রয়োগ করুন কোডল্যাব থেকে এই ব্যবহারকারীর অভিজ্ঞতা কীভাবে তৈরি করতে হয় তা জানতে পারবেন।
আবার যাচাইকরণ
কিছু ক্ষেত্রে, যেমন আবার যাচাই করার জন্য পাসকী ব্যবহার করার সময়, ব্যবহারকারীর আইডেন্টিফায়ার আগে থেকেই জানা থাকে। এই ক্ষেত্রে, আমরা ব্রাউজার বা OS-এর কোনও অ্যাকাউন্ট বাছাইকারী না দেখিয়েই পাসকী ব্যবহার করতে চাই। 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-এর কম্বিনেশনের মাধ্যমে, RP এমন সাইন-ইন অভিজ্ঞতা প্রদান করতে পারে যা:
- একটি মডেল অ্যাকাউন্ট নির্বাচক দেখান।
- অটোফিল থেকে পাসকী ফর্ম দেখান।
- আবার যাচাইকরণ।
খুঁজে নেওয়ার যোগ্য ক্রেডেনশিয়াল বুদ্ধি করে ব্যবহার করুন। এটি করার মাধ্যমে, আপনি পাসকী ব্যবহার করে সাইন-ইন করার অত্যাধুনিক অভিজ্ঞতা ডিজাইন করতে পারবেন যা ব্যবহারকারীরা নির্বিঘ্ন বলে মনে করবেন এবং এর সাথে আরও বেশি করে যুক্ত হবেন।