WebOTP API দিয়ে ক্রস-অরিজিন আইফ্রেমের মধ্যে ওটিপি ফর্মগুলি পূরণ করুন

WebOTP API এখন iframes থেকে OTP পেতে পারে।

ইজি কিতামুরা
ই গু
এসএমএস ওটিপি (ওয়ান-টাইম পাসওয়ার্ড) সাধারণত ফোন নম্বর যাচাই করতে ব্যবহৃত হয়, উদাহরণস্বরূপ প্রমাণীকরণের দ্বিতীয় ধাপ হিসেবে, বা ওয়েবে অর্থপ্রদান যাচাই করতে। যাইহোক, ব্রাউজার এবং এসএমএস অ্যাপের মধ্যে স্যুইচ করা, কপি-পেস্ট করা বা ম্যানুয়ালি ওটিপি লিখলে ভুল করা সহজ হয় এবং ব্যবহারকারীর অভিজ্ঞতায় ঘর্ষণ যোগ করে।

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

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

WebOTP API কিভাবে কাজ করে

WebOTP API নিজেই যথেষ্ট সহজ:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
…

এসএমএস বার্তাটি অবশ্যই মূল-বাউন্ড ওয়ান-টাইম কোডগুলির সাথে ফর্ম্যাট করা উচিত।

Your OTP is: 123456.

@web-otp.glitch.me #12345

লক্ষ্য করুন যে শেষ লাইনে এটির অরিজিন রয়েছে যা একটি @ এর সাথে আবদ্ধ হবে এবং একটি # এর আগে OTP দ্বারা অনুসরণ করবে।

যখন টেক্সট মেসেজ আসে, একটি ইনফো বার পপ আপ হয় এবং ব্যবহারকারীকে তাদের ফোন নম্বর যাচাই করার জন্য অনুরোধ করে। ব্যবহারকারী Verify বাটনে ক্লিক করার পর, ব্রাউজার স্বয়ংক্রিয়ভাবে সাইটের ওটিপি ফরওয়ার্ড করে এবং navigator.credentials.get() সমাধান করে। ওয়েবসাইটটি তারপর ওটিপি বের করতে পারে এবং যাচাইকরণ প্রক্রিয়াটি সম্পূর্ণ করতে পারে।

WebOTP API-এর মাধ্যমে ওয়েবে ফোন নম্বর যাচাই করুন-এ WebOTP ব্যবহারের প্রাথমিক বিষয়গুলি জানুন।

ক্রস-অরিজিন iframes কেস ব্যবহার করে

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

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

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

কিভাবে একটি ক্রস-অরিজিন আইফ্রেম থেকে WebOTP API ব্যবহার করবেন

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

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

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

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

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

@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>

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

সতর্কতা

বাসা বাঁধার মাত্রা

এই মুহুর্তে Chrome শুধুমাত্র ক্রস-অরিজিন আইফ্রেম থেকে WebOTP API কলগুলিকে সমর্থন করে যেগুলির পূর্বপুরুষ শৃঙ্খলে একাধিক অনন্য উত্স নেই ৷ নিম্নলিখিত পরিস্থিতিতে:

  • a.com -> b.com
  • a.com -> b.com -> b.com
  • a.com -> a.com -> b.com
  • a.com -> b.com -> c.com

b.com-এ WebOTP ব্যবহার করা সমর্থিত কিন্তু c.com-এ ব্যবহার করা হয় না।

মনে রাখবেন যে চাহিদার অভাব এবং UX জটিলতার কারণে নিম্নলিখিত দৃশ্যটিও সমর্থিত নয়।

  • a.com -> b.com -> a.com (WebOTP API কল করে)

ইন্টারঅপারেবিলিটি

যদিও ক্রোমিয়াম ছাড়া অন্য ব্রাউজার ইঞ্জিন WebOTP API প্রয়োগ করে না, Safari একই SMS ফরম্যাট তার input[autocomplete="one-time-code"] সমর্থনের সাথে শেয়ার করে। Safari-এ, যত তাড়াতাড়ি একটি এসএমএস যার মধ্যে একটি অরিজিন-বাউন্ড ওয়ান-টাইম কোড ফর্ম্যাট মিলিত মূলের সাথে আসে, কীবোর্ড ইনপুট ক্ষেত্রে ওটিপি প্রবেশ করার পরামর্শ দেয়।

এপ্রিল 2021 থেকে, Safari % ব্যবহার করে একটি অনন্য SMS বিন্যাস সহ iframe সমর্থন করে। যাইহোক, এর পরিবর্তে @ এর সাথে যাওয়ার জন্য বিশেষ আলোচনা শেষ হয়েছে, আমরা আশা করি সমর্থিত এসএমএস ফর্ম্যাটের বাস্তবায়ন একত্রিত হবে।

প্রতিক্রিয়া

WebOTP APIকে আরও ভাল করে তুলতে আপনার প্রতিক্রিয়া অমূল্য, তাই চালিয়ে যান এবং এটি চেষ্টা করে দেখুন এবং আপনি কী মনে করেন তা আমাদের জানান ।

সম্পদ

Unsplash- এ rupixen.com এর ছবি