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

কিভাবে আপনার SMS OTP ফর্ম অপ্টিমাইজ করবেন এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করবেন তা জানুন।

Eiji Kitamura

একটি ব্যবহারকারীর ফোন নম্বর নিশ্চিত করার একটি সাধারণ উপায় হল SMS এর মাধ্যমে বিতরণ করা OTP (এককালীন পাসওয়ার্ড) প্রদান করতে বলা। এসএমএস ওটিপির জন্য কয়েকটি ব্যবহারের ক্ষেত্রে রয়েছে:

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

এই পোস্টটি উপরোক্ত ব্যবহারের ক্ষেত্রে একটি SMS ওটিপি ফর্ম তৈরি করার সর্বোত্তম অনুশীলনগুলি ব্যাখ্যা করে৷

চেকলিস্ট

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

• এর সাথে <input> উপাদান ব্যবহার করুন:
  • type="text"
  • inputmode="numeric"
  • autocomplete="one-time-code"
• OTP SMS বার্তার শেষ লাইন হিসেবে @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" ব্যাপকভাবে সমর্থিত ছিল না। যেহেতু ফায়ারফক্স inputmode="numeric" সমর্থন করা শুরু করেছে , তাই শব্দার্থগতভাবে ভুল type="tel" হ্যাক ব্যবহার করার দরকার নেই।

autocomplete="one-time-code"

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

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

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

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

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

বিন্যাসের নিয়মটি সহজ: এসএমএস বার্তাটি রিসিভার ডোমেনের আগে @ এবং OTP এর আগে # দিয়ে শেষ করুন।

যেমন:

Your OTP is 123456

@web-otp.glitch.me #123456

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

এই বিন্যাসটি ব্যবহার করে কয়েকটি সুবিধা প্রদান করে:

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

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

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

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

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

navigator.credentials.get({
  otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);

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

আনস্প্ল্যাশে জেসন লিউং এর ছবি।