WebOTP API দিয়ে ওয়েবে ফোন নম্বর যাচাই করুন

এসএমএসের মাধ্যমে প্রাপ্ত ওটিপিগুলির সাথে ব্যবহারকারীদের সহায়তা করুন

Eiji Kitamura

WebOTP API কি?

আজকাল, বিশ্বের বেশিরভাগ লোকেরই একটি মোবাইল ডিভাইস রয়েছে এবং বিকাশকারীরা সাধারণত তাদের পরিষেবার ব্যবহারকারীদের জন্য একটি শনাক্তকারী হিসাবে ফোন নম্বর ব্যবহার করে৷

ফোন নম্বর যাচাই করার বিভিন্ন উপায় আছে, কিন্তু এসএমএসের মাধ্যমে পাঠানো এলোমেলোভাবে জেনারেট করা ওয়ান-টাইম পাসওয়ার্ড (OTP) সবচেয়ে সাধারণ। বিকাশকারীর সার্ভারে এই কোডটি ফেরত পাঠানো ফোন নম্বরের নিয়ন্ত্রণ প্রদর্শন করে৷

এই ধারণাটি ইতিমধ্যে অর্জনের জন্য অনেক পরিস্থিতিতে স্থাপন করা হয়েছে:

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

বর্তমান প্রক্রিয়া ব্যবহারকারীদের জন্য ঘর্ষণ সৃষ্টি করে. একটি এসএমএস বার্তার মধ্যে একটি ওটিপি খোঁজা, তারপর এটিকে ফর্মে কপি করে পেস্ট করা কষ্টকর, ব্যবহারকারীর সমালোচনামূলক যাত্রায় রূপান্তর হার কমিয়ে দেয়৷ এটি সহজ করার জন্য অনেক বড় বিশ্ব ডেভেলপারদের কাছ থেকে ওয়েবের জন্য একটি দীর্ঘস্থায়ী অনুরোধ। অ্যান্ড্রয়েডের একটি এপিআই রয়েছে যা ঠিক এটি করে । আইওএস এবং সাফারিও তাই।

WebOTP API আপনার অ্যাপকে আপনার অ্যাপের ডোমেনে আবদ্ধ বিশেষভাবে ফরম্যাট করা বার্তা পেতে দেয়। এটি থেকে, আপনি প্রোগ্রাম্যাটিকভাবে একটি SMS বার্তা থেকে একটি OTP পেতে পারেন এবং ব্যবহারকারীর জন্য আরও সহজে একটি ফোন নম্বর যাচাই করতে পারেন৷

কর্ম এটি দেখুন

ধরা যাক একজন ব্যবহারকারী একটি ওয়েবসাইট দিয়ে তাদের ফোন নম্বর যাচাই করতে চায়। ওয়েবসাইটটি ব্যবহারকারীকে SMS এর মাধ্যমে একটি পাঠ্য বার্তা পাঠায় এবং ব্যবহারকারী ফোন নম্বরের মালিকানা যাচাই করতে বার্তা থেকে OTP প্রবেশ করে।

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

পুরো প্রক্রিয়াটি নীচের ছবিতে চিত্রিত করা হয়েছে।

ডেমো নিজেই চেষ্টা করুন. এটি আপনার ফোন নম্বর জিজ্ঞাসা করে না বা আপনার ডিভাইসে একটি এসএমএস পাঠায় না, তবে আপনি ডেমোতে প্রদর্শিত পাঠ্য অনুলিপি করে অন্য ডিভাইস থেকে একটি পাঠাতে পারেন। এটি কাজ করে কারণ WebOTP API ব্যবহার করার সময় প্রেরক কে তা বিবেচ্য নয়।

1. Chrome 84 বা তার পরে একটি Android ডিভাইসে https://web-otp.glitch.me- এ যান।
2. আপনার ফোনটি অন্য ফোন থেকে নিম্নলিখিত এসএমএস পাঠ্য বার্তা পাঠান।

Your OTP is: 123456.

@web-otp.glitch.me #12345

আপনি কি এসএমএস পেয়েছেন এবং ইনপুট এলাকায় কোড প্রবেশ করার প্রম্পট দেখেছেন? এইভাবে WebOTP API ব্যবহারকারীদের জন্য কাজ করে।

WebOTP API ব্যবহার করে তিনটি অংশ থাকে:

• একটি সঠিকভাবে টীকা করা <input> ট্যাগ
• আপনার ওয়েব অ্যাপে জাভাস্ক্রিপ্ট
• ফরম্যাট করা বার্তা পাঠ্য SMS এর মাধ্যমে পাঠানো হয়েছে।

আমি প্রথমে <input> ট্যাগ কভার করব।

একটি <input> ট্যাগ টীকা করুন

WebOTP নিজেই কোনো HTML টীকা ছাড়াই কাজ করে, কিন্তু ক্রস-ব্রাউজার সামঞ্জস্যের জন্য, আমি আপনাকে <input> ট্যাগে autocomplete="one-time-code" যোগ করার সুপারিশ করছি যেখানে আপনি আশা করেন যে ব্যবহারকারী একটি OTP প্রবেশ করবে।

এটি Safari 14 বা তার পরে ব্যবহারকারীকে একটি OTP দিয়ে <input> ক্ষেত্রটি স্বয়ংক্রিয়ভাবে পূরণ করার পরামর্শ দেয় যখন তারা SMS বার্তা ফর্ম্যাটে বর্ণিত ফর্ম্যাট সহ একটি SMS পায় যদিও এটি WebOTP সমর্থন করে না।

এইচটিএমএল

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

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

যেহেতু WebOTP সহজ, নিচের কোডটি কপি করে পেস্ট করলেই কাজ হবে। আমি যাইহোক কি ঘটছে মাধ্যমে আপনি হাঁটা হবে.

জাভাস্ক্রিপ্ট

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

বৈশিষ্ট্য সনাক্তকরণ

বৈশিষ্ট্য সনাক্তকরণ অন্যান্য অনেক API-এর মতোই। DOMContentLoaded ইভেন্টটি শোনার জন্য DOM ট্রি অনুসন্ধানের জন্য প্রস্তুত হওয়ার জন্য অপেক্ষা করবে৷

জাভাস্ক্রিপ্ট

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    …
    const form = input.closest('form');
    …
  });
}

OTP প্রক্রিয়া করুন

WebOTP API নিজেই যথেষ্ট সহজ। OTP পেতে navigator.credentials.get() ব্যবহার করুন। WebOTP সেই পদ্ধতিতে একটি নতুন otp বিকল্প যোগ করে। এটির শুধুমাত্র একটি বৈশিষ্ট্য রয়েছে: transport , যার মান অবশ্যই 'sms' স্ট্রিং সহ একটি অ্যারে হতে হবে।

জাভাস্ক্রিপ্ট

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
    …

এটি ব্রাউজারের অনুমতি প্রবাহকে ট্রিগার করে যখন একটি SMS বার্তা আসে। অনুমতি দেওয়া হলে, প্রত্যাবর্তিত প্রতিশ্রুতিটি একটি OTPCredential শংসাপত্রের সাথে সমাধান করে।

প্রাপ্ত OTPCredential বস্তুর বিষয়বস্তু

{
  code: "123456" // Obtained OTP
  type: "otp"  // `type` is always "otp"
}

এরপর, <input> ক্ষেত্রে OTP মান পাস করুন। সরাসরি ফর্মটি জমা দিলে ব্যবহারকারীকে একটি বোতামে ট্যাপ করতে হবে এমন পদক্ষেপটি মুছে ফেলবে৷

জাভাস্ক্রিপ্ট

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    …

বার্তাটি বাতিল করা হচ্ছে

যদি ব্যবহারকারী ম্যানুয়ালি একটি OTP প্রবেশ করে এবং ফর্ম জমা দেয়, আপনি options অবজেক্টে AbortController ইনস্ট্যান্স ব্যবহার করে get() কলটি বাতিল করতে পারেন।

জাভাস্ক্রিপ্ট

    …
    const ac = new AbortController();
    …
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    …
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    …

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

API নিজেই যথেষ্ট সহজ দেখা উচিত, তবে এটি ব্যবহার করার আগে আপনার কিছু জিনিস জানা উচিত। navigator.credentials.get() কল করার পরে বার্তাটি অবশ্যই পাঠাতে হবে এবং এটি অবশ্যই সেই ডিভাইসে গ্রহণ করতে হবে যেখানে get() কল করা হয়েছিল। অবশেষে, বার্তাটি অবশ্যই নিম্নলিখিত বিন্যাস মেনে চলতে হবে:

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

যেমন:

Your OTP is: 123456.

@www.example.com #123456

এখানে খারাপ উদাহরণ আছে:

ডেমো

ডেমো সহ বিভিন্ন বার্তা চেষ্টা করুন: https://web-otp.glitch.me

আপনি এটিকে কাঁটাও দিতে পারেন এবং আপনার সংস্করণ তৈরি করতে পারেন: https://glitch.com/edit/#!/web-otp ।

একটি ক্রস-অরিজিন iframe থেকে WebOTP ব্যবহার করুন

একটি ক্রস-অরিজিন আইফ্রেমে একটি SMS ওটিপি প্রবেশ করা সাধারণত অর্থপ্রদান নিশ্চিতকরণের জন্য ব্যবহৃত হয়, বিশেষ করে 3D সিকিউর সহ। ক্রস-অরিজিন আইফ্রেম সমর্থন করার জন্য সাধারণ বিন্যাস থাকার কারণে, WebOTP API নেস্টেড অরিজিনগুলির সাথে আবদ্ধ ওটিপি সরবরাহ করে। যেমন:

• একজন ব্যবহারকারী ক্রেডিট কার্ড দিয়ে এক জোড়া জুতা কেনার জন্য shop.example এ যান।
• ক্রেডিট কার্ড নম্বর প্রবেশ করার পরে, সমন্বিত অর্থ প্রদানকারী একটি iframe এর মধ্যে bank.example থেকে একটি ফর্ম দেখায় যাতে ব্যবহারকারীকে দ্রুত চেকআউটের জন্য তাদের ফোন নম্বর যাচাই করতে বলে৷
• bank.example ব্যবহারকারীকে একটি OTP ধারণ করে একটি SMS পাঠায় যাতে তারা তাদের পরিচয় যাচাই করতে এটি লিখতে পারে।

একটি ক্রস-অরিজিন আইফ্রেমের মধ্যে থেকে WebOTP API ব্যবহার করতে, আপনাকে দুটি জিনিস করতে হবে:

• এসএমএস পাঠ্য বার্তায় শীর্ষ-ফ্রেমের উত্স এবং আইফ্রেমের উত্স উভয়ই টীকা করুন৷
• ক্রস-অরিজিন আইফ্রেমকে সরাসরি ব্যবহারকারীর কাছ থেকে OTP পাওয়ার অনুমতি দেওয়ার জন্য অনুমতি নীতি কনফিগার করুন।

আপনি https://web-otp-iframe-demo.stackblitz.io- এ ডেমো চেষ্টা করতে পারেন।

এসএমএস টেক্সট মেসেজে বাউন্ড-অরিজিন টীকা করুন

WebOTP API-কে একটি iframe-এর মধ্যে থেকে কল করা হলে, SMS টেক্সট মেসেজে অবশ্যই শীর্ষ-ফ্রেমের অরিজিন @ এর পূর্বে # এর আগে OTP এবং শেষ লাইনে @ এর পূর্বে আইফ্রেমের অরিজিন থাকতে হবে।

Your verification code is 123456

@shop.example #123456 @bank.exmple

অনুমতি নীতি কনফিগার করুন

একটি ক্রস-অরিজিন আইফ্রেমে WebOTP ব্যবহার করতে, এমবেডারকে অবশ্যই অনাকাঙ্ক্ষিত আচরণ এড়াতে otp-প্রমাণপত্রের অনুমতি নীতির মাধ্যমে এই API-তে অ্যাক্সেস দিতে হবে। সাধারণভাবে এই লক্ষ্য অর্জনের দুটি উপায় রয়েছে:

HTTP হেডারের মাধ্যমে:

Permissions-Policy: otp-credentials=(self "https://bank.example")

iframe অ্যাট্রিবিউটের মাধ্যমে allow :

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

কিভাবে একটি অনুমতি নীতি নির্দিষ্ট করতে হয় তার আরো উদাহরণ দেখুন।

ডেস্কটপে WebOTP ব্যবহার করুন

Chrome-এ, WebOTP অন্যান্য ডিভাইসে প্রাপ্ত এসএমএস শোনার জন্য ব্যবহারকারীদের ডেস্কটপে ফোন নম্বর যাচাইকরণ সম্পূর্ণ করতে সহায়তা করে।

এই ক্ষমতার জন্য ব্যবহারকারীকে ডেস্কটপ ক্রোম এবং অ্যান্ড্রয়েড ক্রোম উভয়েই একই Google অ্যাকাউন্টে সাইন-ইন করতে হবে৷

সমস্ত ডেভেলপারদের তাদের ডেস্কটপ ওয়েবসাইটে WebOTP API প্রয়োগ করতে হবে, যেভাবে তারা তাদের মোবাইল ওয়েবসাইটে করে, কিন্তু কোন বিশেষ কৌশলের প্রয়োজন নেই।

WebOTP API ব্যবহার করে ডেস্কটপে একটি ফোন নম্বর যাচাই করুন -এ আরও বিস্তারিত জানুন।

FAQ

ডায়ালগটি উপস্থিত হয় না যদিও আমি একটি সঠিকভাবে বিন্যাসিত বার্তা পাঠাচ্ছি। কি ভুল হচ্ছে?

API পরীক্ষা করার সময় কয়েকটি সতর্কতা রয়েছে:

• যদি প্রেরকের ফোন নম্বরটি প্রাপকের যোগাযোগের তালিকায় অন্তর্ভুক্ত থাকে, তাহলে অন্তর্নিহিত SMS ব্যবহারকারীর সম্মতি API- এর নকশার কারণে এই APIটি ট্রিগার করা হবে না।
• আপনি যদি আপনার অ্যান্ড্রয়েড ডিভাইসে একটি কাজের প্রোফাইল ব্যবহার করেন এবং WebOTP কাজ না করে, তাহলে পরিবর্তে আপনার ব্যক্তিগত প্রোফাইলে (যেমন একই প্রোফাইলে আপনি SMS বার্তাগুলি পান) Chrome ইনস্টল করার এবং ব্যবহার করার চেষ্টা করুন৷

আপনার এসএমএস সঠিকভাবে ফর্ম্যাট করা হয়েছে কিনা তা দেখতে ফর্ম্যাটে আবার চেক করুন৷

এই API বিভিন্ন ব্রাউজার মধ্যে সামঞ্জস্যপূর্ণ?

ক্রোমিয়াম এবং ওয়েবকিট এসএমএস টেক্সট মেসেজ ফরম্যাটে সম্মত হয়েছে এবং অ্যাপল iOS 14 এবং macOS বিগ সুর থেকে শুরু করে সাফারির সমর্থন ঘোষণা করেছে । যদিও Safari WebOTP JavaScript API সমর্থন করে না, autocomplete=["one-time-code"] সহ input উপাদান টীকা করে, ডিফল্ট কীবোর্ড স্বয়ংক্রিয়ভাবে পরামর্শ দেয় যে আপনি যদি এসএমএস বার্তা ফর্ম্যাটের সাথে সম্মত হন তবে আপনি OTP প্রবেশ করুন৷

প্রমাণীকরণের উপায় হিসাবে এসএমএস ব্যবহার করা কি নিরাপদ?

যদিও SMS OTP একটি ফোন নম্বর যাচাই করার জন্য উপযোগী যখন নম্বরটি প্রথম প্রদান করা হয়, তবে SMS এর মাধ্যমে ফোন নম্বর যাচাইকরণ অবশ্যই পুনঃপ্রমাণিকরণের জন্য সাবধানে ব্যবহার করা উচিত কারণ ফোন নম্বরগুলি বাহক দ্বারা হাইজ্যাক এবং পুনর্ব্যবহার করা যেতে পারে। WebOTP হল একটি সুবিধাজনক পুনঃপ্রমাণ এবং পুনরুদ্ধার প্রক্রিয়া, তবে পরিষেবাগুলিকে এটিকে অতিরিক্ত কারণগুলির সাথে একত্রিত করা উচিত, যেমন একটি জ্ঞান চ্যালেঞ্জ, অথবা শক্তিশালী প্রমাণীকরণের জন্য ওয়েব প্রমাণীকরণ API ব্যবহার করা উচিত।

Chrome এর বাস্তবায়নে আমি কোথায় বাগ রিপোর্ট করব?

আপনি কি Chrome এর বাস্তবায়নের সাথে একটি বাগ খুঁজে পেয়েছেন?

• crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা পারেন বিশদ অন্তর্ভুক্ত করুন, পুনরুত্পাদনের জন্য সহজ নির্দেশাবলী, এবং উপাদানগুলিকে Blink>WebOTP তে সেট করুন।

আমি কিভাবে এই বৈশিষ্ট্য সাহায্য করতে পারেন?

আপনি WebOTP API ব্যবহার করার পরিকল্পনা করছেন? আপনার সর্বজনীন সমর্থন আমাদের বৈশিষ্ট্যগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার বিক্রেতাদের দেখায় যে তাদের সমর্থন করা কতটা গুরুত্বপূর্ণ৷ হ্যাশট্যাগ #WebOTP ব্যবহার করে @ChromiumDev- এ একটি টুইট পাঠান এবং আপনি এটি কোথায় এবং কীভাবে ব্যবহার করছেন তা আমাদের জানান।

সম্পদ

• এসএমএস ওটিপি ফর্ম সেরা অনুশীলন
• WebOTP API ব্যবহার করে ডেস্কটপে একটি ফোন নম্বর যাচাই করুন
• WebOTP API দিয়ে ক্রস-অরিজিন আইফ্রেমের মধ্যে ওটিপি ফর্মগুলি পূরণ করুন
• ইয়াহু! JAPAN-এর পাসওয়ার্ড-মুক্ত প্রমাণীকরণ অনুসন্ধানগুলি 25% কমিয়েছে, সাইন-ইন করার সময় 2.6x বাড়িয়েছে