প্রকাশিত: ১২ মে, ২০২৬
লগ-ইনের জন্য 'অবিলম্বে UI মোড' হল একটি ওয়েব সুবিধা যা সাইন-ইন ফ্লোকে আরও সহজ করার জন্য ডিজাইন করা হয়েছে। এই ফিচারের মাধ্যমে, আপনার ব্যবহারকারীরা সাইন-ইন করার সময়, যেমন, কোনও সাইন-ইন করুন বা চেক-আউট করুন বোতামে ক্লিক করলে, আপনি সরাসরি তাদের পাসকী ও ম্যানেজ করা পাসওয়ার্ড অফার করতে পারবেন।
বিমূর্ত
অবিলম্বে UI মোড এমন একটি মোড প্রদান করে যা কোনও ক্রেডেনশিয়াল লোকালি উপলভ্য না থাকলে
অবিলম্বে কাজ করে না। এই আচরণ preferImmediatelyAvailableCredentials
Android ও iOS-এর মতো মোবাইল প্ল্যাটফর্মে পাওয়া API-এর মতো। ক্রেডেনশিয়াল থাকলে, ব্রাউজার ব্যবহারকারীকে অবিলম্বে লগ-ইন ডায়ালগ দেখায়। অন্যথায়, এটি নীরবে প্রমিস বাতিল করে দেয়
এবং আপনাকে বিকল্প সাইন-ইন পদ্ধতি প্রদান করতে দেয়।
যেমন, ব্যবহারকারীর অভিজ্ঞতা ব্যাহত না করেই সাইন-ইন ফর্ম।
মে ২০২৬ পর্যন্ত, Chrome হল একমাত্র ব্রাউজার যা অবিলম্বে UI মোড সাপোর্ট করে।
পূর্বশর্ত চেক করুন
অবিলম্বে UI মোড ব্যবহার করতে, ব্যবহারকারীর ডিভাইসে আগে থেকেই উপযুক্ত ক্রেডেনশিয়াল লোকাল স্টোরেজে থাকতে হবে। Chrome-এ, এইসব ক্রেডেনশিয়ালের মধ্যে রয়েছে:
- Google Password Manager, Windows Hello বা iCloud কী-চেনের মতো পাসকী প্রদানকারীর কাছে সেভ করা পাসকী।
- Google Password Manager-এ সেভ করা পাসওয়ার্ড।
কোনও স্থানীয় ক্রেডেনশিয়াল না থাকলে, API তৎক্ষণাৎ লগ-ইন ডায়ালগ না দেখিয়ে অনুরোধটি বাতিল করে দেয়।
ফিচার কাজ করে কিনা তা শনাক্ত করা
আপনি ইমিডিয়েট UI মোড কল করার আগে, ব্রাউজার
immediateGet মেথড ব্যবহার করে
PublicKeyCredential.getClientCapabilities() ক্যাপাবিলিটি কাজ করে কিনা তা যাচাই করুন। এটি কাজ না করলে,
ইমেল ও পাসওয়ার্ড ফর্ম, ফোন
নম্বর যাচাইকরণ বা সোশ্যাল লগ-ইনের মতো আগে থেকে থাকা সাইন-ইন পদ্ধতি ব্যবহার করুন।
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 মোড প্রয়োগ করতে পারবেন। আরও UX নির্দেশাবলী এবং এড়িয়ে যেতে হবে এমন অ্যান্টি-প্যাটার্ন পেতে, তৎক্ষণাৎ UI মোডের জন্য UX প্যাটার্ন দেখুন।
বোতামের মাধ্যমে সাইন-ইন করা
একটি নির্দিষ্ট সাইন-ইন বোতাম দিন যা অপ্রত্যাশিত প্রম্পট ছাড়াই পরিষ্কার অভিজ্ঞতা প্রদান করে।
- ব্যবহারকারী সাইন-ইন করুন বোতামে ক্লিক করেন।
- আপনার সাইট
uiMode: "immediate"-এর সাথেnavigator.credentials.get()-কে কল করে। - ব্রাউজার লোকাল ক্রেডেনশিয়াল চেক করে।
- ব্রাউজার ক্রেডেনশিয়াল খুঁজে পেলে, ব্যবহারকারীর জন্য একটি অ্যাকাউন্ট বেছে নেওয়ার জন্য তা একটি অবিলম্বে লগ-ইন ডায়ালগ দেখায়।
- ব্রাউজার কোনও ক্রেডেনশিয়াল খুঁজে না পেলে বা ব্যবহারকারী অবিলম্বে
লগ-ইন ডায়ালগ বাতিল করে দিলে, এটি একটি
NotAllowedErrorদেখায়। NotAllowedErrorহলে, আপনার সাইট তার সাধারণ সাইন-ইন পৃষ্ঠা দেখায়।
চেক-আউটের আগে সাইন-ইন করা
ব্যবহারকারী এমন কোনও অ্যাকশন নেওয়ার আগেই ক্রেডেনশিয়াল অফার করুন যা পরিচয় যাচাইকরণ থেকে উপকৃত হবে, যেমন অনলাইন স্টোরফ্রন্টে চেক-আউট ফ্লো শুরু করা।
ই-কমার্স সাইটে, অতিথি ব্যবহারকারীরা প্রায়ই আগে থেকে থাকা অ্যাকাউন্টে সাইন-ইন করা অথবা অতিথি হিসেবে চেক-আউট করার মধ্যে কোনও একটি বিকল্প বেছে নেন। অবিলম্বে লগ-ইন ডায়ালগ প্রদান করলে, ফিরে আসা গ্রাহকদের জন্য চেক-আউট প্রসেস আরও সহজ হয়ে যায়।
- ব্যবহারকারী কোনও অ্যাকশন শুরু করেন, যেমন, শপিং ফ্লো চলাকালীন চেক-আউট বোতামে ক্লিক করা।
- আপনার সাইট
uiMode: "immediate"-এর সাথেnavigator.credentials.get()-কে কল করে। - ক্রেডেনশিয়াল থাকলে, ব্যবহারকারী সাইন-ইন সম্পূর্ণ করতে একটি বেছে নেন।
- ক্রেডেনশিয়াল না থাকলে, ব্রাউজার একটি সমস্যা দেখায় এবং কোনও তৎক্ষণিক লগ-ইন ডায়ালগ দেখায় না। ব্যবহারকারীর অভিজ্ঞতা অপরিবর্তিত থাকে এবং আপনি ব্যবহারকারীকে আগে থেকে থাকা চেক-আউট স্ক্রিনে নিয়ে যেতে পারেন, যা হয়ত অন্যান্য সাইন-ইন বিকল্প বা গেস্ট চেক-আউট ফর্ম প্রদান করবে।
গোপনীয়তা ও নিরাপত্তা সংক্রান্ত ব্যবস্থা পর্যালোচনা করা
ব্যবহারকারীর গোপনীয়তা সুরক্ষিত রাখতে ব্রাউজার গুরুত্বপূর্ণ পদক্ষেপ নেয়:
- ব্যবহারকারীর জেসচার সংক্রান্ত প্রয়োজনীয়তা: সাইলেন্ট প্রোবিং প্রতিরোধ করতে, আপনাকে অবশ্যই ব্যবহারকারীর জেসচারের মাধ্যমে API কল শুরু করতে হবে, যেমন ক্লিক করা। কলটি অ্যাক্টিভেশন ব্যবহার করে না।
- ছদ্মবেশী মোড সংক্রান্ত বিধিনিষেধ: ছদ্মবেশী বা ব্যক্তিগত সেশনে করা অনুরোধ
সবসময়
NotAllowedErrorদেখায়। - কোনও শ্বেততালিকা নেই: খালি নয় এমন
allowCredentialsতালিকা সহ অনুরোধ করলে ক্রস-সেশন ট্র্যাকিং প্রতিরোধ করতে একটিNotAllowedErrorদেখানো হয়। - প্রোগ্রামাটিক বাতিলকরণ নেই: আপনি
signalপ্যারামিটার ব্যবহার করে অবিলম্বে লগ-ইন ডায়ালগ প্রোগ্রামাটিক উপায়ে বাতিল করতে পারবেন না।