فرم های OTP را در iframe های متقاطع با WebOTP API پر کنید

WebOTP API اکنون می تواند OTP ها را از داخل iframe دریافت کند.

ایجی کیتامورا
یی گو
OTP های پیامکی (گذرواژه های یکبار مصرف) معمولاً برای تأیید شماره تلفن استفاده می شوند، به عنوان مثال به عنوان مرحله دوم در احراز هویت، یا برای تأیید پرداخت ها در وب. با این حال، جابه‌جایی بین مرورگر و برنامه پیام کوتاه، کپی پیست یا وارد کردن دستی OTP باعث می‌شود که اشتباه کنید و به تجربه کاربر اصطکاک می‌افزاید.

WebOTP API به وب‌سایت‌ها این امکان را می‌دهد که به صورت برنامه‌ریزی رمز عبور یکبار مصرف را از یک پیام کوتاه دریافت کنند و آن را به صورت خودکار در فرم برای کاربران تنها با یک ضربه بدون تغییر برنامه وارد کنند. پیامک مخصوصاً قالب‌بندی شده و به مبدأ متصل است، بنابراین شانس وب‌سایت‌های فیشینگ را برای سرقت OTP نیز کاهش می‌دهد.

یکی از موارد استفاده ای که هنوز در WebOTP پشتیبانی نشده است، هدف قرار دادن مبدا در داخل iframe بود. این معمولاً برای تأیید پرداخت استفاده می‌شود، مخصوصاً با 3D Secure . WebOTP API با داشتن قالب مشترک برای پشتیبانی از iframe های متقاطع ، اکنون OTP های متصل به مبداهای تودرتو را از 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 کلیک کرد، مرورگر به طور خودکار OTP را به سایت ارسال می کند و navigator.credentials.get() را حل می کند. سپس وب سایت می تواند OTP را استخراج کرده و فرآیند تأیید را تکمیل کند.

اصول استفاده از WebOTP را در تأیید شماره تلفن در وب با WebOTP API بیاموزید.

موارد استفاده از فریم های متقاطع

وارد کردن یک OTP در یک فرم در یک iframe متقاطع در سناریوهای پرداخت رایج است. برخی از صادرکنندگان کارت اعتباری برای بررسی اصالت پرداخت کننده به یک مرحله تأیید اضافی نیاز دارند. این 3D Secure نامیده می شود و فرم معمولاً در داخل یک iframe در همان صفحه نمایش داده می شود که گویی بخشی از جریان پرداخت است.

به عنوان مثال:

  • کاربر برای خرید یک جفت کفش با کارت اعتباری از shop.example بازدید می کند.
  • پس از وارد کردن شماره کارت اعتباری، ارائه‌دهنده پرداخت یکپارچه فرمی را از bank.example در یک iframe نشان می‌دهد که از کاربر می‌خواهد شماره تلفن خود را برای پرداخت سریع تأیید کند.
  • bank.example یک پیام کوتاه حاوی یک OTP برای کاربر می فرستد تا بتواند آن را برای تایید هویت خود وارد کند.

نحوه استفاده از WebOTP API از یک iframe متقاطع

برای استفاده از WebOTP API از داخل یک iframe متقاطع، باید دو کار را انجام دهید:

  • منشاء فریم بالا و مبدا iframe را در پیام متنی پیامک حاشیه نویسی کنید.
  • خط مشی مجوزها را پیکربندی کنید تا به iframe متقاطع اجازه دهید OTP را مستقیماً از کاربر دریافت کند.
WebOTP API در یک iframe در حال عمل.

می‌توانید نسخه آزمایشی را خودتان در https://web-otp-iframe-demo.stackblitz.io امتحان کنید.

مبداهای محدود شده را به پیام متنی پیامک حاشیه نویسی کنید

وقتی WebOTP API از داخل یک iframe فراخوانی می‌شود، پیام متنی پیامک باید حاوی مبدا فریم بالا باشد که قبل از آن @ و OTP قبل از آن # و سپس مبدا iframe قبل از @ باشد. 

@shop.example #123456 @bank.exmple

سیاست مجوزها را پیکربندی کنید

برای استفاده از WebOTP در iframe متقاطع، جاساز باید از طریق خط مشی مجوزهای otp-credentials به این API دسترسی دهد تا از رفتار ناخواسته جلوگیری شود. به طور کلی دو راه برای رسیدن به این هدف وجود دارد:

  • از طریق HTTP Header:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • از طریق ویژگی iframe allow :
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

مثال های بیشتری در مورد نحوه تعیین یک خط مشی مجوز ببینید.

هشدارها

سطوح تودرتو

در حال حاضر Chrome فقط از تماس‌های WebOTP API از iframe‌های متقاطع پشتیبانی می‌کند که بیش از یک منشاء منحصربه‌فرد در زنجیره اجداد خود ندارند . در سناریوهای زیر:

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

استفاده از WebOTP در b.com پشتیبانی می شود اما استفاده از آن در c.com پشتیبانی نمی شود.

توجه داشته باشید که سناریوی زیر نیز به دلیل عدم تقاضا و پیچیدگی های UX پشتیبانی نمی شود.

  • a.com -> b.com -> a.com (با WebOTP API تماس می گیرد)

قابلیت همکاری

در حالی که موتورهای مرورگر غیر از Chromium WebOTP API را پیاده‌سازی نمی‌کنند، Safari همان قالب پیامک را با پشتیبانی input[autocomplete="one-time-code"] به اشتراک می‌گذارد. در Safari، به محض اینکه پیامکی حاوی فرمت کد یکبار مصرف با مبدأ با مبدأ منطبق می رسد، صفحه کلید پیشنهاد می کند OTP را در قسمت ورودی وارد کنید.

از آوریل 2021، Safari از iframe با قالب پیام کوتاه منحصر به فرد با استفاده از % پشتیبانی می‌کند. با این حال، همانطور که بحث مشخصات به پایان رسید و در عوض با @ همراه شد، امیدواریم اجرای قالب SMS پشتیبانی شده همگرا شود.

بازخورد

بازخورد شما در بهبود WebOTP API بسیار ارزشمند است، بنابراین ادامه دهید و آن را امتحان کنید و نظر خود را به ما بگویید .

منابع

عکس توسط rupisen.com در Unsplash