WebOTP API اکنون می‌تواند گذرواژه‌های یک‌بارمصرف را از داخل iframe دریافت کند.
WebOTP API به وب‌سایت‌ها امکان می‌دهد به‌طور برنامه‌نویسی‌شده گذرواژه یک‌بارمصرف را از پیامک دریافت کنند و آن را به‌طور خودکار در فرم برای کاربران وارد کنند، فقط با یک تک‌ضرب و بدون تغییر برنامه. پیامک به‌طور ویژه قالب‌بندی شده و به مبدأ محدود شده است، بنابراین احتمال اینکه وب‌سایت‌های رمزگیری گذرواژه یک‌بارمصرف را بدزدند نیز کاهش می‌یابد.
One use case that has yet to be supported in WebOTP was targeting an origin inside an iframe. این مورد معمولاً برای تأیید پرداخت، به‌ویژه با 3D Secure، استفاده می‌شود. با داشتن قالب مشترک برای پشتیبانی از میان‌مبدئی iframes، اکنون WebOTP API از Chrome 91 به بعد، گذرواژه‌های یک‌بارمصرف محدود به مبدأهای تودرتو را ارائه می‌دهد.
نحوه عملکرد WebOTP API
WebOTP API به‌خودی‌خود بسیار ساده است:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
…
پیامک باید با کدهای یک‌بارمصرف محدود به مبدأ قالب‌بندی شده باشد.
Your OTP is: 123456.
@web-otp.example.com #12345
توجه داشته باشید که در خط آخر، مبدأیی که باید به آن متصل شود وجود دارد که قبل‌از آن
@ و بعداز آن گذرواژه یک‌بارمصرف قرار دارد که قبل‌از آن # قرار دارد.
وقتی پیامک می‌رسد، نوار اطلاعاتی بالا می‌آید و از کاربر می‌خواهد
شماره تلفنش را به‌تأیید برساند. پس‌از اینکه کاربر روی دکمه Verify کلیک می‌کند،
مرورگر به‌طور خودکار گذرواژه یک‌بارمصرف را به سایت بازارسال می‌کند و
navigator.credentials.get() را حل‌وفصل می‌کند. سپس وب‌سایت می‌تواند گذرواژه یک‌بارمصرف را استخراج کند و
فرایند درستی‌سنجی را تکمیل کند.
با اصول اولیه استفاده از WebOTP در درستی‌سنجی شماره تلفن در وب با WebOTP API آشنا شوید.
موارد استفاده iframeهای میان‌مبدئی
وارد کردن گذرواژه یک‌بارمصرف در فرمی درون iframe میان‌مبدئی در سناریوهای پرداخت رایج است. برخی‌از صادرکنندگان کارت اعتباری برای بررسی اصالت پرداخت‌کننده به مرحله درستی‌سنجی اضافی نیاز دارند. به این فرایند «پروتکل امن سه‌بعدی» می‌گویند و فرم معمولاً در یک iframe در همان صفحه نمایش داده می‌شود، گویی بخشی از جریان پرداخت است.
برای مثال:
- کاربری برای خرید یک جفت کفش با کارت اعتباری از
shop.exampleبازدید می‌کند. - پس‌از وارد کردن شماره کارت اعتباری، ارائه‌دهنده پرداخت یکپارچه فرمی از
bank.exampleرا در iframe نشان می‌دهد که از کاربر می‌خواهد شماره تلفنش را برای تسویه‌حساب سریع درستی‌سنجی کند. bank.exampleپیامکی حاوی گذرواژه یک‌بارمصرف به کاربر ارسال می‌کند تا کاربر بتواند با وارد کردن آن، هویتش را درستی‌سنجی کند.
نحوه استفاده از WebOTP API از iframe میان‌مبدئی
برای استفاده از WebOTP API از داخل یک iframe میان‌مبدئی، باید دو کار انجام دهید:
- هم مبدأ قاب بالایی و هم مبدأ iframe را در پیامک حاشیه‌نویسی کنید.
- خط‌مشی اجازه‌ها را پیکربندی کنید تا به iframe میان‌مبدئی اجازه دهید گذرواژه یک‌بارمصرف را مستقیماً از کاربر دریافت کند.
می‌توانید خودتان نسخه نمایشی را در https://web-otp-iframe-demo.stackblitz.io امتحان کنید.
مبدأهای محدودشده را به پیامک حاشیه‌نویسی کنید
وقتی WebOTP API از داخل iframe فراخوانی می‌شود، پیامک نوشتاری باید
شامل مبدأ قاب بالایی باشد که قبل‌از آن @ و به‌دنبال آن OTP باشد که قبل‌از آن #
و به‌دنبال آن مبدأ iframe باشد که قبل‌از آن @ باشد.
@shop.example #123456 @bank.exmple
پیکربندی خط‌مشی اجازه‌ها
برای استفاده از WebOTP در iframe میان‌مبدائی، جاسازکننده باید ازطریق خط‌مشی اجازه‌های otp-credentials به این API دسترسی اعطا کند تا از رفتار ناخواسته جلوگیری شود. به‌طور کلی دو روش برای رسیدن به این هدف وجود دارد:
- ازطریق سرایند HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
- ازطریق مشخصه iframe
allow:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>
نمونه‌های بیشتری از نحوه تعیین خط‌مشی اجازه‌ها را ببینید.
هشدارها
سطح‌های درونی
درحال‌حاضر Chrome فقط از تماس‌های میانای برنامه‌سازی کاربردی WebOTP از 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 پشتیبانی نمی‌شود.
توجه داشته باشید که سناریو زیر نیز به‌دلیل عدم تقاضا و پیچیدگی‌های تجربه کاربری پشتیبانی نمی‌شود.
- a.com -> b.com -> a.com (WebOTP API را فراخوانی می‌کند)
هم‌کنش‌پذیری
درحالی‌که موتورهای مرورگر غیراز Chromium میانای برنامه‌سازی کاربردی WebOTP را پیاده‌سازی نمی‌کنند،
Safari همان قالب پیامک را
با پشتیبانی input[autocomplete="one-time-code"] خود هم‌رسانی می‌کند. در Safari، به‌محض اینکه پیامکی حاوی قالب کد یک‌بارمصرف محدود به مبدأ با مبدأ منطبق دریافت شود، صفحه‌کلید پیشنهاد می‌کند که کد یک‌بارمصرف در فیلد ورودی وارد شود.
از آوریل ۲۰۲۱، Safari از iframe با قالب پیامک منحصربه‌فرد بااستفاده از
% پشتیبانی می‌کند.
بااین‌حال، ازآنجایی‌که بحث مشخصات به این نتیجه رسید که به‌جای آن از @ استفاده شود، امیدواریم که
پیاده‌سازی قالب پیامک پشتیبانی‌شده همگرا شود.
بازخورد
بازخورد شما برای بهتر کردن WebOTP API بسیار ارزشمند است، پس آن را امتحان کنید و نظرتان را به ما بگویید.