এসএমএস ওটিপি ফর্ম সেরা অনুশীলন

Eiji Kitamura

এসএমএস পাঠিয়ে পরিচয় নিশ্চিত করার জন্য ব্যবহারকারীকে ওয়ান-টাইম পাসওয়ার্ড (ওটিপি) চাওয়া খুবই সাধারণ। এসএমএস ওটিপি ব্যবহারের কিছু ক্ষেত্রে এটি অন্তর্ভুক্ত:

• দ্বি-ধাপে প্রমাণীকরণ। ব্যবহারকারীর নাম এবং পাসওয়ার্ড ছাড়াও, SMS OTP একটি শক্তিশালী সংকেত হিসেবে ব্যবহার করা যেতে পারে যে অ্যাকাউন্টটি সেই ব্যক্তির মালিকানাধীন যিনি SMS OTP পেয়েছেন।
• ফোন নম্বর যাচাইকরণ। কিছু পরিষেবা ব্যবহারকারীর প্রাথমিক শনাক্তকারী হিসেবে একটি ফোন নম্বর ব্যবহার করে। এই ধরনের পরিষেবাগুলিতে, ব্যবহারকারীরা তাদের পরিচয় প্রমাণের জন্য তাদের ফোন নম্বর এবং SMS-এর সাথে প্রাপ্ত OTP প্রবেশ করতে পারেন। কখনও কখনও এটি একটি PIN-এর সাথে একত্রিত করে দ্বি-ফ্যাক্টর প্রমাণীকরণ তৈরি করা হয়।
• অ্যাকাউন্ট পুনরুদ্ধার। যখন কোনও ব্যবহারকারী তার অ্যাকাউন্টে অ্যাক্সেস হারিয়ে ফেলেন, তখন এটি পুনরুদ্ধারের একটি উপায় থাকা প্রয়োজন। তাদের নিবন্ধিত ইমেল ঠিকানায় একটি ইমেল পাঠানো বা তাদের ফোন নম্বরে একটি SMS OTP পাঠানো হল অ্যাকাউন্ট পুনরুদ্ধারের সাধারণ পদ্ধতি।
• পেমেন্ট নিশ্চিতকরণ পেমেন্ট সিস্টেমে, কিছু ব্যাংক বা ক্রেডিট কার্ড ইস্যুকারীরা নিরাপত্তার কারণে অর্থপ্রদানকারীর কাছ থেকে অতিরিক্ত প্রমাণীকরণের অনুরোধ করে। এই উদ্দেশ্যে সাধারণত SMS OTP ব্যবহার করা হয়।

এই ব্যবহারের ক্ষেত্রে SMS OTP ফর্ম তৈরির সর্বোত্তম অনুশীলনগুলির জন্য পড়তে থাকুন।

চেকলিস্ট

SMS OTP-এর মাধ্যমে সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

• <input> এলিমেন্টটি ব্যবহার করুন:
  • type="text"
  • inputmode="numeric"
  • autocomplete="one-time-code"
• OTP SMS বার্তার শেষ লাইন হিসেবে @BOUND_DOMAIN #OTP_CODE ব্যবহার করুন।
• WebOTP API ব্যবহার করুন।

<input> এলিমেন্ট ব্যবহার করুন

<input> উপাদান সহ একটি ফর্ম ব্যবহার করা আপনার জন্য সবচেয়ে গুরুত্বপূর্ণ সেরা অনুশীলন কারণ এটি সমস্ত ব্রাউজারে কাজ করে। এমনকি যদি এই পোস্টের অন্যান্য পরামর্শগুলি কোনও ব্রাউজারে কাজ না করে, তবুও ব্যবহারকারী ম্যানুয়ালি OTP প্রবেশ করতে এবং জমা দিতে সক্ষম হবেন।

<form action="/verify-otp" method="POST">
  <input type="text"
      inputmode="numeric"
      autocomplete="one-time-code"
      pattern="\d{6}"
      required>
</form>

একটি ইনপুট ফিল্ড ব্রাউজারের কার্যকারিতার সর্বোত্তম ব্যবহার নিশ্চিত করার জন্য নিচে কয়েকটি ধারণা দেওয়া হল।

type="text"

যেহেতু OTP গুলি সাধারণত পাঁচ বা ছয় অঙ্কের সংখ্যার হয়, তাই ইনপুট ক্ষেত্রের জন্য type="number" ব্যবহার করা স্বজ্ঞাত মনে হতে পারে কারণ এটি মোবাইল কীবোর্ডকে শুধুমাত্র সংখ্যায় পরিবর্তন করে। এটি সুপারিশ করা হয় না কারণ ব্রাউজার আশা করে যে একটি ইনপুট ক্ষেত্র একাধিক সংখ্যার ক্রম নয় বরং একটি গণনাযোগ্য সংখ্যা হবে, যা অপ্রত্যাশিত আচরণের কারণ হতে পারে। type="number" ব্যবহার করলে ইনপুট ক্ষেত্রের পাশে উপরে এবং নীচের বোতামগুলি প্রদর্শিত হয়; এই বোতামগুলি টিপলে সংখ্যাটি বৃদ্ধি বা হ্রাস পায় এবং পূর্ববর্তী শূন্যগুলি সরে যেতে পারে।

পরিবর্তে type="text" ব্যবহার করুন। এটি মোবাইল কীবোর্ডকে কেবল সংখ্যায় রূপান্তরিত করবে না, তবে এটি ঠিক আছে কারণ inputmode="numeric" ব্যবহারের পরবর্তী টিপসটি সেই কাজটি করে।

inputmode="numeric"

মোবাইল কীবোর্ডটি শুধুমাত্র সংখ্যায় পরিবর্তন করতে inputmode="numeric" ব্যবহার করুন।

কিছু ওয়েবসাইট OTP ইনপুট ফিল্ডের জন্য type="tel" ব্যবহার করে কারণ এটি ফোকাস করার সময় মোবাইল কীবোর্ডকে শুধুমাত্র সংখ্যায় ( * এবং # সহ) রূপান্তরিত করে। এই হ্যাকটি অতীতে ব্যবহৃত হয়েছিল যখন inputmode="numeric" ব্যাপকভাবে সমর্থিত ছিল না। যেহেতু Firefox inputmode="numeric" সমর্থন করা শুরু করেছে , তাই শব্দার্থগতভাবে ভুল type="tel" হ্যাক ব্যবহার করার কোনও প্রয়োজন নেই।

autocomplete="one-time-code"

autocomplete অ্যাট্রিবিউট ডেভেলপারদের স্বয়ংক্রিয়ভাবে সহায়তা প্রদানের জন্য ব্রাউজারটির কী অনুমতি আছে তা নির্দিষ্ট করতে দেয় এবং ক্ষেত্রে প্রত্যাশিত তথ্যের ধরণ সম্পর্কে ব্রাউজারকে অবহিত করে।

autocomplete="one-time-code" ব্যবহার করে যখনই কোনও ব্যবহারকারী ফর্ম খোলা থাকা অবস্থায় কোনও SMS বার্তা পান, তখন অপারেটিং সিস্টেম SMS-এ থাকা OTP-টিকে হিউরিস্টিকভাবে পার্স করবে এবং কীবোর্ড ব্যবহারকারীকে প্রবেশের জন্য OTP-টি সুপারিশ করবে। এটি শুধুমাত্র Safari 12 এবং পরবর্তী iOS, iPadOS এবং macOS-এ কাজ করে, তবে আমরা এটি ব্যবহার করার জন্য দৃঢ়ভাবে সুপারিশ করছি, কারণ এটি সেই প্ল্যাটফর্মগুলিতে SMS OTP অভিজ্ঞতা উন্নত করার আরও ভাল উপায়।

autocomplete="one-time-code" ব্যবহারকারীর অভিজ্ঞতা উন্নত করে, তবে SMS বার্তাটি মূল-বাউন্ড বার্তা বিন্যাসের সাথে সঙ্গতিপূর্ণ কিনা তা নিশ্চিত করে আপনি আরও অনেক কিছু করতে পারেন।

ঐচ্ছিক বৈশিষ্ট্য

ঐচ্ছিক বৈশিষ্ট্যগুলির মধ্যে রয়েছে:

• pattern সেই ফর্ম্যাটটি নির্দিষ্ট করে যা প্রবেশ করানো OTP-এর সাথে মিলতে হবে। মিলিত প্যাটার্নটি নির্দিষ্ট করতে নিয়মিত এক্সপ্রেশন ব্যবহার করুন। উদাহরণস্বরূপ, \d{6} OTP-কে ছয় অঙ্কের স্ট্রিংয়ে সীমাবদ্ধ করে। pattern সম্পর্কে আরও জানতে আরও জটিল রিয়েল-টাইম যাচাইকরণের জন্য জাভাস্ক্রিপ্ট ব্যবহার করুন পড়ুন।
• required নির্দেশ করে যে ব্যবহারকারীকে অবশ্যই ক্ষেত্রটি পূরণ করতে হবে।

আরও পরামর্শের জন্য আমাদের সাইন-ইন ফর্মের সেরা অনুশীলনগুলি পড়ুন।

এসএমএস টেক্সট ফরম্যাট করুন

এসএমএস স্পেসিফিকেশনের মাধ্যমে প্রদত্ত অরিজিন-বাউন্ড ওয়ান-টাইম কোডের সাথে সারিবদ্ধ করে ওটিপি প্রবেশের ব্যবহারকারীর অভিজ্ঞতা উন্নত করুন।

এর মূলে, ফর্ম্যাটের নিয়মটি নিম্নরূপ: রিসিভার ডোমেনের আগে @ এবং OTP এর আগে # লিখে SMS বার্তাটি শেষ করুন।

উদাহরণস্বরূপ:

Your OTP is 123456

@web-otp.glitch.me #123456

OTP বার্তাগুলির জন্য স্ট্যান্ডার্ড ফর্ম্যাট নিষ্কাশনকে আরও সহজ এবং আরও নির্ভরযোগ্য করে তোলে। ওয়েবসাইটের সাথে OTP কোড যুক্ত করার ফলে ব্যবহারকারীদের ক্ষতিকারক সাইটগুলিতে কোড সরবরাহ করার জন্য প্রতারণা করা কঠিন হয়ে পড়ে।

সুনির্দিষ্ট বিন্যাস নিয়ম

সুনির্দিষ্ট নিয়মগুলি হল:

• বার্তাটি (ঐচ্ছিক) মানুষের পাঠযোগ্য টেক্সট দিয়ে শুরু হয় যাতে চার থেকে দশ অক্ষরের একটি আলফানিউমেরিক স্ট্রিং থাকে যার মধ্যে কমপক্ষে একটি সংখ্যা থাকে, শেষ লাইনটি URL এবং OTP এর জন্য রেখে যায়।
• যে ওয়েবসাইটে API ব্যবহার করা হয়েছে তার URL-এর ডোমেন অংশের আগে @ লিখতে হবে।
• URL-এ অবশ্যই # থাকতে হবে, তারপর OTP থাকবে। অক্ষরের সংখ্যা ১৪০ বা তার কম হতে হবে।

এই ফর্ম্যাটটি ব্যবহার করলে কয়েকটি সুবিধা পাওয়া যায়:

• OTP ডোমেনের সাথে আবদ্ধ থাকবে। যদি ব্যবহারকারী SMS বার্তায় উল্লেখিত ডোমেন ছাড়া অন্য ডোমেনে থাকেন, তাহলে OTP পরামর্শটি প্রদর্শিত হবে না। এটি ফিশিং আক্রমণ এবং সম্ভাব্য অ্যাকাউন্ট হাইজ্যাকের ঝুঁকিও হ্রাস করে।
• ব্রাউজার এখন রহস্যময় এবং অস্পষ্ট হিউরিস্টিকসের উপর নির্ভর না করেই নির্ভরযোগ্যভাবে OTP বের করতে সক্ষম হবে।

যখন কোনও ওয়েবসাইট autocomplete="one-time-code" ব্যবহার করে, তখন iOS 14 বা তার পরবর্তী সংস্করণ সহ Safari এই নিয়মগুলি অনুসরণ করে OTP সুপারিশ করবে।

এই এসএমএস মেসেজ ফর্ম্যাটটি সাফারি ছাড়া অন্যান্য ব্রাউজারগুলিকেও উপকৃত করে। অ্যান্ড্রয়েডে ক্রোম, অপেরা এবং ভিভালডি ওয়েবওটিপি এপিআই-এর সাথে অরিজিন-বাউন্ড ওয়ান-টাইম কোড নিয়ম সমর্থন করে, যদিও autocomplete="one-time-code" এর মাধ্যমে নয়।

WebOTP API ব্যবহার করুন

WebOTP API একটি SMS বার্তায় প্রাপ্ত OTP অ্যাক্সেস প্রদান করে। navigator.credentials.get() otp টাইপ ( OTPCredential ) দিয়ে কল করে যেখানে transport sms অন্তর্ভুক্ত থাকে, ওয়েবসাইটটি এমন একটি SMS এর জন্য অপেক্ষা করবে যা ব্যবহারকারীর দ্বারা সরবরাহিত এবং অ্যাক্সেস মঞ্জুর করার জন্য অরিজিন-বাউন্ড ওয়ান-টাইম কোডগুলির সাথে সঙ্গতিপূর্ণ। একবার OTP জাভাস্ক্রিপ্টে পাস হয়ে গেলে, ওয়েবসাইটটি এটি একটি ফর্মে ব্যবহার করতে পারে অথবা সরাসরি সার্ভারে পোস্ট করতে পারে।

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);
    });
  });
}