এসএমএস পাঠিয়ে ব্যবহারকারীর পরিচয় কনফার্ম করার জন্য তাকে একবার ব্যবহারের পাসওয়ার্ড (OTP) দিতে বলা একটি সাধারণ পদ্ধতি। এসএমএস ওটিপি-র কিছু ব্যবহারের উদাহরণ:
- দুই-ধাপে যাচাইকরণ। ইউজারনেম ও পাসওয়ার্ড ছাড়াও, এসএমএস ওটিপিকে একটি শক্তিশালী সিগন্যাল হিসেবে ব্যবহার করা যেতে পারে, যা থেকে বোঝা যায় যে এসএমএস ওটিপি পাওয়া ব্যক্তিই অ্যাকাউন্টের মালিক।
- ফোন নম্বর যাচাইকরণ। কিছু পরিষেবা ব্যবহারকারীর প্রাথমিক শনাক্তকারী হিসেবে ফোন নম্বর ব্যবহার করে। এই ধরনের পরিষেবায়, ব্যবহারকারী নিজের পরিচয় প্রমাণ করতে ফোন নম্বর এবং এসএমএসের মাধ্যমে পাওয়া ওটিপি লিখতে পারেন। কখনও কখনও দুই-ধাপে যাচাইকরণ সম্পূর্ণ করতে এটি পিনের সাথে ব্যবহার করা হয়।
- অ্যাকাউন্ট ফিরিয়ে আনা। কোনও ব্যবহারকারী তার অ্যাকাউন্টে অ্যাক্সেস হারিয়ে ফেললে, সেটি ফিরিয়ে আনার কোনও উপায় থাকতে হবে। অ্যাকাউন্ট ফিরিয়ে আনার সাধারণ পদ্ধতি হল, রেজিস্টার করা ইমেল আইডিতে ইমেল পাঠানো বা ফোন নম্বরে এসএমএস ওটিপি পাঠানো।
- পেমেন্ট কনফার্মেশন পেমেন্ট সিস্টেমে, কিছু ব্যাঙ্ক বা ক্রেডিট কার্ড ইস্যুকারী সুরক্ষার কারণে পেমেন্টকারীর থেকে অতিরিক্ত যাচাইকরণের অনুরোধ করে। এই উদ্দেশ্যে সাধারণত এসএমএস ওটিপি ব্যবহার করা হয়।
এইসব ব্যবহারের ক্ষেত্রে এসএমএস ওটিপি ফর্ম তৈরি করার পেশাদার পদ্ধতি সম্পর্কে আরও জানতে পড়তে থাকুন।
চেকলিস্ট
এসএমএস ওটিপির মাধ্যমে ব্যবহারকারীকে সবচেয়ে ভালো অভিজ্ঞতা প্রদান করতে, এইসব ধাপ অনুসরণ করুন:
<input>এলিমেন্টটি এর সাথে ব্যবহার করুন:type="text"inputmode="numeric"autocomplete="one-time-code"
- ওটিপি এসএমএস মেসেজের শেষ লাইন হিসেবে
@BOUND_DOMAIN #OTP_CODEব্যবহার করুন। - WebOTP API ব্যবহার করুন।
<input> এলিমেন্ট ব্যবহার করুন
<input> এলিমেন্ট সহ ফর্ম ব্যবহার করা হল সবচেয়ে গুরুত্বপূর্ণ পেশাদার পদ্ধতি যা আপনি
অনুসরণ করতে পারেন কারণ এটি সব ব্রাউজারে কাজ করে। এই পোস্টে দেওয়া অন্যান্য সাজেশন
কিছু ব্রাউজারে কাজ না করলেও, ব্যবহারকারী ম্যানুয়ালি ওটিপি লিখে জমা দিতে
পারবেন।
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required>
</form>
ব্রাউজার ফাংশনালিটি থেকে ইনপুট ফিল্ড যাতে সবচেয়ে ভাল ফলাফল পায় তা নিশ্চিত করার জন্য নিচে কয়েকটি আইডিয়া দেওয়া হল।
type="text"
যেহেতু ওটিপি সাধারণত পাঁচ বা ছয় সংখ্যার হয়, তাই ইনপুট ফিল্ডের জন্য
type="number" ব্যবহার করা সহজ মনে হতে পারে কারণ এটি মোবাইল
কীবোর্ডকে শুধুমাত্র সংখ্যায় পরিবর্তন করে। এটি সাজেস্ট করা হয় না কারণ ব্রাউজার আশা করে যে ইনপুট ফিল্ডে একাধিক সংখ্যার ক্রমের পরিবর্তে একটি গণনাযোগ্য সংখ্যা থাকবে,
যা অপ্রত্যাশিত আচরণের কারণ হতে পারে। type="number" ব্যবহার করলে ইনপুট ফিল্ডের পাশে উপরে ও নিচে যাওয়ার বোতাম
দেখানো হয়; এই বোতামগুলি প্রেস করলে
নম্বর বাড়ে বা কমে এবং আগে থাকা শূন্য মুছে যেতে পারে।
পরিবর্তে type="text" ব্যবহার করুন। এটি মোবাইল কীবোর্ডকে শুধুমাত্র সংখ্যায় পরিবর্তন করবে না, তবে এটি ঠিক আছে কারণ inputmode="numeric" ব্যবহার করার জন্য পরবর্তী পরামর্শ
সেই কাজটি করে।
inputmode="numeric"
মোবাইল কীবোর্ড শুধুমাত্র সংখ্যায় পরিবর্তন করতে
inputmode="numeric" ব্যবহার করুন।
কিছু ওয়েবসাইট ওটিপি ইনপুট ফিল্ডের জন্য type="tel" ব্যবহার করে, কারণ এটি
ফোকাস করা হলে মোবাইল কীবোর্ডকে শুধুমাত্র সংখ্যায় (* এবং # সহ)
পরিবর্তন করে। এই হ্যাক অতীতে ব্যবহার করা হয়েছিল যখন inputmode="numeric"
ব্যাপকভাবে কাজ করত না। Firefox
inputmode="numeric" সাপোর্ট করা শুরু করার পর থেকে,
অর্থগতভাবে ভুল type="tel" হ্যাক ব্যবহার করার আর কোনও প্রয়োজন নেই।
autocomplete="one-time-code"
autocomplete
অ্যাট্রিবিউট ডেভেলপারদের নির্দিষ্ট করতে দেয় যে ব্রাউজারের কাছে অটোমেটিক সম্পূর্ণ করার সহায়তা প্রদান করার জন্য কী অনুমতি রয়েছে এবং ফিল্ডে কী ধরনের তথ্য প্রত্যাশিত তা ব্রাউজারকে জানায়।
autocomplete="one-time-code"-এর মাধ্যমে, কোনও ফর্ম খোলা থাকাকালীন ব্যবহারকারী এসএমএস মেসেজ পেলে,
অপারেটিং সিস্টেম এসএমএসে থাকা ওটিপি হিউরিস্টিক্যালি পার্স করবে এবং
কীবোর্ড ব্যবহারকারীকে ওটিপি লেখার সাজেশন দেখাবে। এটি শুধুমাত্র iOS, iPadOS ও macOS-এর Safari 12 ও তার পরবর্তী ভার্সনে কাজ করে, তবে আমরা এটি ব্যবহার করার জন্য বিশেষভাবে সাজেস্ট করি, কারণ এটি
এইসব প্ল্যাটফর্মে এসএমএস ওটিপি অভিজ্ঞতা উন্নত করার আরও ভালো উপায়।
autocomplete="one-time-code" অ্যাকশন মোডে।
autocomplete="one-time-code" ব্যবহারকারীর অভিজ্ঞতা উন্নত করে, তবে এসএমএস মেসেজটি অরিজিন-বাউন্ড মেসেজ
ফর্ম্যাট মেনে চলছে কিনা তা নিশ্চিত করে আপনি আরও অনেক কিছু করতে পারেন।
ঐচ্ছিক অ্যাট্রিবিউট
ঐচ্ছিক অ্যাট্রিবিউটের মধ্যে রয়েছে:
patternফর্ম্যাট নির্দিষ্ট করে দেয় যার সাথে লেখা ওটিপি অবশ্যই মিলতে হবে। ম্যাচিং প্যাটার্ন নির্দিষ্ট করতে রেগুলার এক্সপ্রেশন ব্যবহার করুন। যেমন,\d{6}ওটিপিকে ছয় সংখ্যার স্ট্রিংয়ে সীমাবদ্ধ করে।patternসম্পর্কে আরও জানতে আরও জটিল রিয়েল-টাইম যাচাইকরণের জন্য জাভাস্ক্রিপ্ট ব্যবহার করুন লিঙ্কটি পড়ুন।requiredচিহ্ন থেকে বোঝা যায় যে ব্যবহারকারীকে অবশ্যই ফিল্ডটি পূরণ করতে হবে।
আরও পরামর্শের জন্য আমাদের সাইন-ইন ফর্ম সংক্রান্ত পেশাদার পদ্ধতি পড়ুন।
এসএমএস টেক্সট ফর্ম্যাট করা
এসএমএসের মাধ্যমে পাঠানো অরিজিন-বাউন্ড ওয়ান-টাইম কোড স্পেসিফিকেশনের সাথে অ্যালাইন করে ওটিপি লেখার ক্ষেত্রে ব্যবহারকারীর অভিজ্ঞতা উন্নত করুন।
মূলত, ফর্ম্যাট সংক্রান্ত নিয়মটি হল: এসএমএস মেসেজের শেষে
প্রাপকের ডোমেন লিখুন যার আগে @ থাকবে এবং ওটিপির আগে # থাকবে।
যেমন:
Your OTP is 123456
@web-otp.example.com #123456
OTP মেসেজের স্ট্যান্ডার্ড ফর্ম্যাট এক্সট্র্যাকশনকে আরও সহজ এবং আরও নির্ভরযোগ্য করে তোলে। ওয়েবসাইটের সাথে ওটিপি কোড যুক্ত করলে, ব্যবহারকারীদের প্রতারণা করে ক্ষতিকর সাইটে কোড প্রদান করার সম্ভাবনা কমে যায়।
নিখুঁত ফর্ম্যাটিংয়ের নিয়ম
নির্দিষ্ট নিয়মগুলি হল:
- মেসেজটি (ঐচ্ছিক) মানুষের-পঠনযোগ্য টেক্সট দিয়ে শুরু হয় যাতে চার থেকে দশ অক্ষরের বর্ণসাংখ্যিক স্ট্রিং থাকে এবং অন্তত একটি সংখ্যা থাকে, শেষ লাইনটি URL ও ওটিপির জন্য ছেড়ে দেওয়া হয়।
- API-কে কল করা ওয়েবসাইটের URL-এর ডোমেন অংশের আগে অবশ্যই
@থাকতে হবে। - URL-এ অবশ্যই
#থাকতে হবে, তারপরে ওটিপি থাকবে। অক্ষরের সংখ্যা অবশ্যই ১৪০ বা তার কম হতে হবে।
এই ফর্ম্যাট ব্যবহার করলে কয়েকটি সুবিধা পাওয়া যায়:
- ওটিপি ডোমেনের সাথে বাউন্ড করা হবে। ব্যবহারকারী এসএমএস মেসেজে উল্লেখ করা ডোমেন ছাড়া অন্য কোনও ডোমেনে থাকলে, ওটিপি সাজেশন দেখানো হবে না। এছাড়াও, এটি ফিশিং অ্যাটাক ও সম্ভাব্য অ্যাকাউন্ট হাইজ্যাকের ঝুঁকি কমায়।
- ব্রাউজার এখন রহস্যময় ও অবিশ্বস্ত হিউরিস্টিক্সের উপর নির্ভর না করেই নির্ভরযোগ্যভাবে ওটিপি এক্সট্র্যাক্ট করতে পারবে।
কোনও ওয়েবসাইট autocomplete="one-time-code" ব্যবহার করলে, iOS 14 বা তার পরবর্তী ভার্সন সহ Safari
এইসব নিয়ম মেনে ওটিপি সাজেস্ট করবে।
এই SMS মেসেজ ফর্ম্যাট Safari ছাড়া অন্যান্য ব্রাউজারের ক্ষেত্রেও কাজ করে। Android-এ Chrome, Opera,
এবং Vivaldi-ও WebOTP API-এর সাথে অরিজিন-বাউন্ড ওয়ান-টাইম কোড নিয়মকে সমর্থন করে, যদিও autocomplete="one-time-code"-এর মাধ্যমে নয়।
WebOTP API ব্যবহার করা
WebOTP API এসএমএস মেসেজে পাওয়া ওটিপি অ্যাক্সেস করার
সুবিধা প্রদান করে। otp ধরনের (OTPCredential) navigator.credentials.get()-এ কল করার মাধ্যমে, যেখানে transport-এর মধ্যে sms অন্তর্ভুক্ত, ওয়েবসাইটটি
এমন একটি এসএমএসের জন্য অপেক্ষা করবে যা ডেলিভারি করার জন্য এবং ব্যবহারকারীর দ্বারা অ্যাক্সেস মঞ্জুর করার জন্য
অরিজিন-বাউন্ড ওয়ান-টাইম কোড মেনে চলে। জাভাস্ক্রিপ্টে ওটিপি পাস করা হয়ে গেলে,
ওয়েবসাইট এটি কোনও ফর্মে ব্যবহার করতে বা সরাসরি সার্ভারে পোস্ট করতে পারে।
navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
WebOTP API-এর সাহায্যে
ওয়েবে ফোন নম্বর যাচাই করুন
লিঙ্ক থেকে WebOTP API-এর ব্যবহার সম্পর্কে বিস্তারিত জানুন
অথবা নিম্নলিখিত স্নিপেট কপি করে পেস্ট করুন। আপনার <form>-এ action এবং
method অ্যাট্রিবিউট সেট করতে ভুলবেন না।
// Feature detection
if ('OTPCredential' in window) {
window.addEventListener('DOMContentLoaded', e => {
const input = document.querySelector('input[autocomplete="one-time-code"]');
if (!input) return;
// Cancel the WebOTP API if the form is submitted manually.
const ac = new AbortController();
const form = input.closest('form');
if (form) {
form.addEventListener('submit', e => {
// Cancel the WebOTP API.
ac.abort();
});
}
// Invoke the WebOTP API
navigator.credentials.get({
otp: { transport:['sms'] },
signal: ac.signal
}).then(otp => {
input.value = otp.code;
// Automatically submit the form when an OTP is obtained.
if (form) form.submit();
}).catch(err => {
console.log(err);
});
});
}