প্রকাশিত: ১২ মে, ২০২৬
লগইনের জন্য ইমিডিয়েট UI মোড হলো একটি ওয়েব সুবিধা, যা সাইন-ইন প্রক্রিয়াকে আরও সহজ করার জন্য ডিজাইন করা হয়েছে। এই ফিচারটি আপনাকে ব্যবহারকারীদের সাইন-ইন করার মুহূর্তে, যেমন সাইন ইন বা চেকআউট বাটনে ক্লিক করার সময়, সরাসরি তাদের কাছে পাসকি এবং ম্যানেজড পাসওয়ার্ড অফার করার সুযোগ দেয়।
সারসংক্ষেপ
ইমিডিয়েট UI মোড এমন একটি ব্যবস্থা প্রদান করে, যা স্থানীয়ভাবে কোনো ক্রেডেনশিয়াল উপলব্ধ না থাকলে তাৎক্ষণিকভাবে ব্যর্থ হয়ে যায়। এই আচরণটি অ্যান্ড্রয়েড এবং আইওএস-এর মতো মোবাইল প্ল্যাটফর্মে ব্যবহৃত preferImmediatelyAvailableCredentials API-এর অনুরূপ। ক্রেডেনশিয়াল বিদ্যমান থাকলে, ব্রাউজার ব্যবহারকারীকে তাৎক্ষণিক একটি লগইন ডায়ালগ দেখায়। অন্যথায়, এটি নীরবে প্রমিসটি প্রত্যাখ্যান করে, যার ফলে আপনি ব্যবহারকারীর অভিজ্ঞতায় কোনো ব্যাঘাত না ঘটিয়েই বিকল্প সাইন-ইন পদ্ধতি, যেমন একটি সাইন-ইন ফর্ম, প্রদান করতে পারেন।
২০২৬ সালের মে মাস পর্যন্ত, ক্রোমই একমাত্র ব্রাউজার যা ইমিডিয়েট ইউআই মোড সমর্থন করে।
পূর্বশর্তগুলো যাচাই করুন
ইমিডিয়েট UI মোড ব্যবহার করার জন্য, ব্যবহারকারীর ডিভাইসে আগে থেকেই উপযুক্ত ক্রেডেনশিয়াল উপলব্ধ থাকতে হবে। ক্রোমে, এই ক্রেডেনশিয়ালগুলো হলো:
- গুগল পাসওয়ার্ড ম্যানেজার , উইন্ডোজ হ্যালো বা আইক্লাউড কিচেইন-এর মতো কোনো পাসকি প্রোভাইডারে সংরক্ষিত পাসকি।
- পাসওয়ার্ডগুলো গুগল পাসওয়ার্ড ম্যানেজারে সংরক্ষিত আছে।
যদি কোনো স্থানীয় ক্রেডেনশিয়াল না থাকে, তাহলে এপিআই তাৎক্ষণিক লগইন ডায়ালগ না দেখিয়ে অনুরোধটি প্রত্যাখ্যান করে।
বৈশিষ্ট্য সমর্থন সনাক্ত করুন
ইমিডিয়েট UI মোড কল করার আগে, PublicKeyCredential.getClientCapabilities() মেথড ব্যবহার করে যাচাই করে নিন যে ব্রাউজারটি immediateGet ক্যাপাবিলিটি সমর্থন করে কিনা। যদি এটি সমর্থিত না হয়, তবে বিদ্যমান সাইন-ইন পদ্ধতি, যেমন ইমেল ও পাসওয়ার্ড ফর্ম, ফোন নম্বর যাচাইকরণ, বা সোশ্যাল লগইন ব্যবহার করুন।
async function checkImmediateAvailability() {
try {
const capabilities = await PublicKeyCredential.getClientCapabilities();
if (capabilities.immediateGet) {
console.log("Immediate UI mode is supported.");
} else {
console.log("Immediate UI mode is NOT supported.");
}
} catch (error) {
console.error("Error checking client capabilities:", error);
}
}
আরও বেশি ব্রাউজারে সমর্থনের জন্য, WebAuthn Polyfills GitHub রিপোজিটরিতে উপলব্ধ পলিফিলটি ব্যবহার করুন।
পরিচয়পত্র অনুরোধ করুন
তাৎক্ষণিক লগইন প্রক্রিয়াটি চালু করতে, navigator.credentials.get() কল করুন এবং uiMode ফিল্ডটি 'immediate' এ সেট করুন।
আপনার অনুরোধে password: true অন্তর্ভুক্ত করার মাধ্যমে, ব্যবহারকারীরা এই অভিজ্ঞতা লাভ করতে পারবেন, যদি ব্রাউজারটি পাসওয়ার্ড ক্রেডেনশিয়াল সমর্থন করে।
// This call must follow a user gesture, like a button click
button.addEventListener('click', async (event) => {
event.preventDefault();
try {
const cred = await navigator.credentials.get({
password: true,
publicKey: {
challenge: serverGeneratedChallenge,
rpId: 'example.com'
},
uiMode: 'immediate',
});
// Handle successful sign-in
} catch (error) {
if (error.name === 'NotAllowedError') {
// Provide a fallback sign-in experience
showFallbackUI();
}
}
});
একটি বিকল্প সাইন-ইন ব্যবস্থা প্রদানের জন্য আপনাকে অবশ্যই একটি catch ব্লকের মধ্যে NotAllowedError হ্যান্ডেল করতে হবে।
সাইন-ইন প্রক্রিয়া পরিচালনা করুন
আপনি দুটি প্রধান পরিস্থিতির জন্য তাৎক্ষণিক UI মোড প্রয়োগ করতে পারেন।
একটি বোতাম দিয়ে সাইন ইন করুন
একটি নির্দিষ্ট সাইন-ইন বাটন দিন, যা কোনো অপ্রত্যাশিত প্রম্পট ছাড়াই একটি স্বচ্ছন্দ অভিজ্ঞতা প্রদান করবে।
- ব্যবহারকারী সাইন ইন বোতামে ক্লিক করেন।
- আপনার সাইট
navigator.credentials.get()uiMode: "immediate"দিয়ে কল করে। - ব্রাউজারটি স্থানীয় পরিচয়পত্র যাচাই করে।
- ব্রাউজারটি ব্যবহারকারীর লগইন তথ্য খুঁজে পেলে, তাকে একটি অ্যাকাউন্ট বেছে নেওয়ার জন্য অবিলম্বে একটি লগইন ডায়ালগ বক্স দেখায়।
- যদি ব্রাউজার কোনো ক্রেডেনশিয়াল খুঁজে না পায় অথবা ব্যবহারকারী তাৎক্ষণিক লগইন ডায়ালগটি খারিজ করে দেয়, তাহলে এটি একটি
NotAllowedErrorথ্রো করে। - যদি একটি
NotAllowedErrorথ্রো করা হয়, তাহলে আপনার সাইট তার স্ট্যান্ডার্ড সাইন-ইন পেজটি চালু করে দেয়।
চেকআউটের আগে সাইন ইন করুন
ব্যবহারকারী এমন কোনো কাজ করার আগেই, যেটিতে প্রমাণীকরণের প্রয়োজন রয়েছে, যেমন কোনো অনলাইন স্টোরফ্রন্টে চেকআউট প্রক্রিয়া শুরু করা, তাকে সক্রিয়ভাবে ক্রেডেনশিয়াল প্রদান করুন।
ই-কমার্সে, অতিথি ব্যবহারকারীরা প্রায়শই বিদ্যমান অ্যাকাউন্টে সাইন ইন করা অথবা অতিথি হিসেবে চেকআউট করার মধ্যে একটিকে বেছে নেন। একটি তাৎক্ষণিক লগইন ডায়ালগ প্রদান করলে পুরনো গ্রাহকদের জন্য চেকআউট প্রক্রিয়াটি আরও সহজ ও সাবলীল হতে পারে।
- ব্যবহারকারী কেনাকাটার সময় কোনো একটি কাজ শুরু করেন, যেমন চেকআউট বাটনে ক্লিক করা।
- আপনার সাইট
navigator.credentials.get()uiMode: "immediate"দিয়ে কল করে। - যদি পরিচয়পত্র বিদ্যমান থাকে, তবে ব্যবহারকারী সাইন-ইন সম্পন্ন করার জন্য সেগুলোর মধ্যে একটি নির্বাচন করেন।
- যদি লগইন তথ্য না থাকে, তাহলে ব্রাউজার একটি ত্রুটি দেখায় এবং তাৎক্ষণিক কোনো লগইন ডায়ালগ বক্স প্রদর্শন করে না। ব্যবহারকারীর অভিজ্ঞতা অপরিবর্তিত থাকে এবং আপনি ব্যবহারকারীকে বিদ্যমান চেকআউট স্ক্রিনে নিয়ে যেতে পারেন, যেখানে অন্যান্য সাইন-ইন বিকল্প বা একটি গেস্ট চেকআউট ফর্ম থাকতে পারে।
গোপনীয়তা এবং নিরাপত্তা ব্যবস্থা পর্যালোচনা করুন
ব্যবহারকারীর গোপনীয়তা রক্ষা করার জন্য ব্রাউজারটি গুরুত্বপূর্ণ ব্যবস্থা গ্রহণ করে:
- ব্যবহারকারীর অঙ্গভঙ্গির আবশ্যকতা : সাইলেন্ট প্রোবিং প্রতিরোধ করতে, আপনাকে অবশ্যই ব্যবহারকারীর কোনো অঙ্গভঙ্গি, যেমন একটি ক্লিকের মাধ্যমে, এপিআই কলটি শুরু করতে হবে। এই কলটি অ্যাক্টিভেশনটি গ্রহণ করে না।
- ইনকগনিটো মোডের সীমাবদ্ধতা : ইনকগনিটো বা প্রাইভেট সেশনে করা অনুরোধগুলি সর্বদা একটি
NotAllowedErrorপ্রদর্শন করে। - কোনো অনুমোদিত তালিকা নেই : ক্রস-সেশন ট্র্যাকিং প্রতিরোধ করার জন্য, যে অনুরোধগুলির
allowCredentialsতালিকা খালি নয়, সেগুলি একটিNotAllowedErrorপ্রদর্শন করে। - প্রোগ্রাম্যাটিক বাতিলকরণ সম্ভব নয় : আপনি তাৎক্ষণিক লগইন ডায়ালগটি প্রোগ্রাম্যাটিকভাবে বাতিল করার জন্য
signalপ্যারামিটার ব্যবহার করতে পারবেন না।