এই নির্দেশিকায় পাসওয়ার্ড-ভিত্তিক সাইন-ইন সফল হওয়ার সাথে সাথেই ব্যবহারকারীর জন্য কীভাবে অটোমেটিক ও নিঃশব্দে পাসকী রেজিস্টার করা যায়, বাধা কমানো যায় এবং পাসকী গ্রহণ করার হার বাড়ানো যায় সেই সম্পর্কে বিস্তারিত তথ্য দেওয়া হয়েছে।
সঠিক ট্রিগার মুহূর্ত
অটোমেটিক পাসকী তৈরি (কন্ডিশনাল ক্রিয়েট বা সাইলেন্ট পোস্ট-লগ-ইন প্রোমোশন নামেও পরিচিত) শুধুমাত্র পাসওয়ার্ড ব্যবহার করে সম্পূর্ণ সাইন-ইন করার ঠিক পরেই ট্রিগার করতে হবে।
- পাসওয়ার্ড ছাড়া ফ্লোয়ের (যেমন, ম্যাজিক লিঙ্ক, এসএমএস ওটিপি বা আইডেন্টিটি ফেডারেশন) জন্য শর্তসাপেক্ষ ক্রিয়েশনের চেষ্টা করবেন না।
- বহু-স্তরীয় যাচাইকরণ প্রয়োজন হলে, শর্তসাপেক্ষ তৈরি শুরু করার আগে আপনাকে অবশ্যই সব ফ্যাক্টর সফল না হওয়া পর্যন্ত অপেক্ষা করতে হবে।
- ক্রিয়েশন এন্ডপয়েন্টে অনুরোধ করার আগে, একটি বৈধ, যাচাইকৃত ব্যবহারকারী সেশন অ্যাক্টিভ আছে কিনা তা নিশ্চিত করুন।
প্রয়োগ করার বিভিন্ন ধাপ
১. আগের অটোফিল অ্যাকশন বাতিল করুন
সাইন-ইন পৃষ্ঠা ফর্ম অটোফিল (শর্তাধীন UI/Get) ব্যবহার করলে, ব্রাউজার সংক্রান্ত সমস্যা এড়াতে অ্যাক্টিভ ক্রেডেনশিয়াল গেট কল বাতিল করতে হবে।
navigator.credentials.create()-এ কল করার আগে, বাকি থাকাnavigator.credentials.get()অটোফিল অনুরোধের সাথে অ্যাটাচ করাAbortController-এabortController.abort()-কে কল করুন।
২. ফিচার শনাক্তকরণ
PublicKeyCredential.getClientCapabilities()-এর সাথে conditionalCreate চেক করে কন্ডিশনাল ক্রিয়েট উপলভ্য কিনা তা নির্ধারণ করুন।
const capabilities = await PublicKeyCredential.getClientCapabilities();
if (capabilities.conditionalCreate) {
// Conditional create is available
}
৩. কন্ডিশনাল ক্রিয়েট ব্যবহার করে পাসকী তৈরি করুন
navigator.credentials.create()বিকল্পের মধ্যেmediation: 'conditional'পাস করুন। এটি ব্রাউজারকে ব্যাকগ্রাউন্ডে বা প্রাসঙ্গিকভাবে পাসকী তৈরি করার ফ্লোকে নীরবে পরিচালনা করার জন্য সিগন্যাল দেয়, যাতে কোনও বিরক্তিকর মোডাল ডায়ালগ না আসে।- ডুপ্লিকেট কী রেজিস্টার করা এড়াতে, ব্যবহারকারীর আগে থেকে থাকা পাসকী ক্রেডেনশিয়াল আইডি দিয়ে
excludeCredentialsপূরণ করুন।
৪. সাইলেন্ট এরর হ্যান্ডলিং
- পাসকী তৈরির প্রম্পট (
navigator.credentials.create) try/catch ব্লকে র্যাপ করুন। আপনাকে অবশ্যই ব্যবহারকারী নিজে ইন্টার্যাক্ট করতে পারেন এমন সাধারণ ব্যতিক্রম (InvalidStateError,NotAllowedError,AbortError) ধরতে হবে এবং ব্যবহারকারীকে কোনও ত্রুটি UI না দেখিয়ে নীরবে উপেক্ষা করতে হবে।
৫. সার্ভার-সাইড ব্যবহারকারীর উপস্থিতি যাচাইকরণ
- সার্ভার-সাইড যাচাইকরণ এন্ডপয়েন্টকে অবশ্যই ব্যবহারকারীর উপস্থিতি (UP) সংক্রান্ত প্রয়োজনীয়তা (
requireUserPresence: false) শিথিল করতে হবে, শুধুমাত্র যখন কন্ডিশনাল-ক্রিয়েট ট্রিগার দ্বারা তৈরি ক্রেডেনশিয়াল যাচাই করা হচ্ছে। স্ট্যান্ডার্ড এক্সপ্লিসিট ক্রিয়েশনের জন্য কঠোর উপস্থিতি যাচাইকরণ অবশ্যই চালু থাকতে হবে।
৬. সার্ভার যাচাইকরণ ব্যর্থ হলে তা সুন্দরভাবে ম্যানেজ করুন
navigator.credentials.create()সফল হলেও সার্ভার যাচাইকরণ ফেচ যদি খারাপ উত্তর দেয় (যেমন, স্বাক্ষর যাচাইকরণ ব্যর্থ হয়), তাহলে পাসকী প্রদানকারীর মধ্যে অনাথ ক্রেডেনশিয়াল যাতে থেকে না যায় তার জন্যPublicKeyCredential.signalUnknownCredential()কল করুন।
কোডের উদাহরণ
// optionsFetch and registerVerifyFetch are app-defined server endpoint requests
import { optionsFetch, registerVerifyFetch } from './api.js';
async function triggerConditionalCreate(loginAbortController) {
const capabilities = await PublicKeyCredential.getClientCapabilities();
if (capabilities.conditionalCreate !== true) {
return; // Platform does not support conditional creation
}
// 1. Abort any active autofill conditional-get controllers to clear the WebAuthn pipeline
loginAbortController.abort();
// 2. Fetch creation options signaling the backend that this is a conditional request
const creationOptionsJSON = await optionsFetch({ conditional: true });
const publicKey = PublicKeyCredential.parseCreationOptionsFromJSON(creationOptionsJSON);
let credential;
try {
// 3. Invoke silent credentials creation prompt
credential = await navigator.credentials.create({
publicKey,
mediation: 'conditional' // Silent background creation mediation
});
} catch (e) {
// 4. Silently swallow common WebAuthn browser exceptions
if (['InvalidStateError', 'NotAllowedError', 'AbortError'].includes(e.name)) {
return;
}
console.error('Unexpected conditional create error:', e);
return;
}
// 5. Server verification step using dedicated Try/Catch block
let encodedResponse = credential.toJSON();
try {
const response = await registerVerifyFetch(encodedResponse);
if (!response.ok) {
// If the server verification fails, clean up using Signal API
if (PublicKeyCredential.signalUnknownCredential) {
await PublicKeyCredential.signalUnknownCredential({
rpId, // RP ID must match the one defined on the server
credentialId: encodedResponse.id
});
}
}
} catch (serverErr) {
console.error('Verification network failure:', serverErr);
if (PublicKeyCredential.signalUnknownCredential) {
await PublicKeyCredential.signalUnknownCredential({
rpId, // RP ID must match the one defined on the server
credentialId: encodedResponse.id
});
}
}
}
ফলব্যাক স্ট্র্যাটেজি
পাসকী ফিচার শনাক্তকরণ ফলব্যাক
সবসময় 'webauthn-polyfills' ইনস্টল করুন এবং কনটেক্সটে এটি ইমপোর্ট করুন।
যতক্ষণ PublicKeyCredential কাজ করবে, ততক্ষণ PublicKeyCredential.getClientCapabilities-ও কাজ করবে।
import 'webauthn-polyfills';
সিগন্যাল API সিঙ্ক্রোনাইজেশন ফলব্যাক
WebAuthn Signal API (webauthn-signals) হল একটি প্রোগ্রেসিভ অপ্টিমাইজেশন যা পাসওয়ার্ড ম্যানেজারকে সার্ভার ক্রেডেনশিয়াল স্ট্যাটাসের সাথে সিঙ্ক করে রাখতে ব্যবহার করা হয়।
- ফলব্যাক অভিজ্ঞতা:
if (PublicKeyCredential.signalUnknownCredential)-এর মাধ্যমে গেট করা হয়েছে। কাজ না করলে, ব্রাউজার এক্সেপশন না দেখিয়ে ব্যাকগ্রাউন্ড যাচাইকরণ সিঙ্ক বাইপাস করা হয়।
Easy JSON Serialization Fallback
সবসময় 'webauthn-polyfills' ইনস্টল করুন এবং কনটেক্সটে এটি ইমপোর্ট করুন।
মনে রাখবেন, যতক্ষণ PublicKeyCredential কাজ করবে, ততক্ষণ PublicKeyCredential.parseCreationOptionsFromJSON এবং PublicKeyCredential.prototype.toJSON-ও কাজ করবে।
import 'webauthn-polyfills';