معمولاً از کاربر خواسته می‌شود برای تأیید هویت خود ازطریق ارسال پیامک، گذرواژه یکبارمصرف (OTP) ارائه دهد. برخی‌از موارد استفاده از «گذرواژه یکبارمصرف پیامکی» عبارت‌اند از:
- اصالت‌سنجی دوعاملی. علاوه‌بر نام کاربری و گذرواژه، «گذرواژه یکبارمصرف پیامکی» می‌تواند به‌عنوان نشانه‌ای قوی از اینکه حساب متعلق به فردی است که «گذرواژه یکبارمصرف پیامکی» را دریافت کرده است استفاده شود.
- درستی‌سنجی شماره تلفن. برخی‌از سرویس‌ها از شماره تلفن به‌عنوان شناسه اصلی کاربر استفاده می‌کنند. در چنین سرویس‌هایی، کاربران می‌توانند شماره تلفن خود و گذرواژه یکبارمصرف دریافتی ازطریق پیامک را برای اثبات هویت خود وارد کنند. گاهی اوقات با پین ترکیب می‌شود تا اصالت‌سنجی دوعاملی را تشکیل دهد.
- بازیابی حساب. وقتی کاربری دسترسی به حسابش را ازدست می‌دهد، باید راهی برای بازیابی آن وجود داشته باشد. ارسال ایمیل به نشانی ایمیل ثبت‌شده آن‌ها یا گذرواژه یکبارمصرف پیامکی به شماره تلفن آن‌ها از روش‌های رایج بازیابی حساب است.
- تأیید پرداخت در سیستم‌های پرداخت، برخی‌از بانک‌ها یا صادرکنندگان کارت اعتباری به‌دلایل امنیتی از پرداخت‌کننده درخواست اصالت‌سنجی اضافی می‌کنند. گذرواژه یکبارمصرف پیامکی معمولاً برای این منظور استفاده می‌شود.
برای آشنایی با روال‌های مطلوب ساختن فرم‌های گذرواژه یکبارمصرف پیامکی برای این موارد استفاده، به خواندن ادامه دهید.
بازبینه
برای ارائه بهترین تجربه کاربری با «گذرواژه یکبارمصرف پیامکی»، این مراحل را دنبال کنید:
- از عنصر
<input>با این موارد استفاده کنید:type="text"inputmode="numeric"autocomplete="one-time-code"
- از
@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"
به‌طور گسترده پشتیبانی نمی‌شد. از زمانی که Firefox شروع به پشتیبانی از
inputmode="numeric" کرده است،
دیگر نیازی به استفاده از ترفند type="tel" که ازنظر معنایی نادرست است نیست.
autocomplete="one-time-code"
autocomplete
به توسعه‌دهندگان امکان می‌دهد مشخص کنند مرورگر چه اجازه‌ای برای ارائه کمک تکمیل خودکار دارد و به مرورگر درباره نوع اطلاعات موردانتظار در فیلد اطلاع می‌دهد.
با autocomplete="one-time-code"، هروقت کاربر پیامک دریافت می‌کند و فرمی باز است، سیستم‌عامل گذرواژه یکبارمصرف را در پیامک به‌صورت اکتشافی تجزیه می‌کند و صفحه‌کلید گذرواژه یکبارمصرف را برای وارد کردن به کاربر پیشنهاد می‌دهد. این روش فقط در Safari نسخه ۱۲ و
جدیدتر در iOS، iPadOS، و macOS کار می‌کند، اما اکیداً توصیه می‌کنیم از آن استفاده کنید، زیرا
روش بهتری برای بهبود تجربه «گذرواژه یکبارمصرف» پیامکی در این پلاتفرم‌ها است.
autocomplete="one-time-code" درحال جنب‌وجوش.
autocomplete="one-time-code" تجربه کاربری را بهبود می‌بخشد، اما با اطمینان از اینکه پیامک با قالب پیام محدود به مبدأ مطابقت دارد می‌توانید کارهای بیشتری انجام دهید.
مشخصه‌های اختیاری
مشخصه‌های اختیاری عبارت‌اند از:
patternقالبی را که گذرواژه یکبارمصرف واردشده باید با آن مطابقت داشته باشد مشخص می‌کند. برای مشخص کردن الگوی مطابقت، از عبارت‌های باقاعده استفاده کنید. برای مثال،\d{6}گذرواژه یکبارمصرف را به رشته‌ای شش‌رقمی محدود می‌کند. برای کسب اطلاعات بیشتر دربارهpattern، استفاده از جاوا اسکریپت برای اعتبارسنجی هم‌زمان پیچیده‌تر را بخوانید.requiredنشان می‌دهد که کاربر باید فیلد را پر کند.
برای دریافت توصیه‌های بیشتر، روال‌های مطلوب فرم ورود به سیستم ما را بخوانید.
قالب‌بندی نوشتار پیامک
تجربه کاربری وارد کردن گذرواژه یکبارمصرف را با هم‌راستا کردن با مشخصات کدهای یکبارمصرف محدود به مبدأ ارائه‌شده ازطریق پیامک بهبود دهید.
در اصل، قانون قالب‌بندی به‌صورت زیر است: پیامک را با دامنه گیرنده که قبل‌از آن @ قرار دارد و گذرواژه یکبارمصرف که قبل‌از آن # قرار دارد تمام کنید.
برای مثال:
Your OTP is 123456
@web-otp.example.com #123456
قالب استاندارد پیام‌های گذرواژه یکبارمصرف، استخراج را آسان‌تر و مطمئن‌تر می‌کند. مرتبط کردن کدهای گذرواژه یکبارمصرف با وب‌سایت‌ها باعث می‌شود فریب دادن کاربران برای ارائه کد به سایت‌های مخرب دشوارتر شود.
قوانین قالب‌بندی دقیق
قوانین دقیق عبارت‌اند از:
- پیام با نوشتاری قابل‌خواندن برای انسان (اختیاری) شروع می‌شود که حاوی رشته‌ای الفبایی‌عددی با چهار تا ده نویسه است که حداقل یک عدد دارد، و خط آخر برای نشانی وب و گذرواژه یکبارمصرف باقی می‌ماند.
- بخش دامنه نشانی وب وب‌سایتی که میانای برنامه‌سازی کاربردی را فراخوانی کرده است باید
با
@شروع شود. - نشانی وب باید حاوی
#باشد و پس‌از آن گذرواژه یکبارمصرف بیاید. تعداد نویسه‌ها باید ۱۴۰ یا کمتر باشد.
استفاده از این قالب چند مزیت دارد:
- گذرواژه یکبارمصرف به دامنه محدود خواهد شد. اگر کاربر در دامنه‌هایی غیراز دامنه مشخص‌شده در پیامک باشد، پیشنهاد گذرواژه یکبارمصرف نشان داده نخواهد شد. این کار همچنین خطر حملات رمزگیری و حساب‌ربایی‌های احتمالی را کاهش می‌دهد.
- اکنون مرورگر می‌تواند بدون وابستگی به روش‌های اکتشافی مرموز و ناپایدار، گذرواژه یکبارمصرف را به‌طور قابل‌اعتماد استخراج کند.
وقتی وب‌سایتی از autocomplete="one-time-code" استفاده می‌کند، Safari با iOS 14 یا جدیدتر
گذرواژه یکبارمصرف را طبق این قوانین پیشنهاد خواهد داد.
این قالب پیامک برای مرورگرهای دیگر به‌غیراز Safari نیز مفید است. Chrome، Opera،
و Vivaldi در Android نیز از قانون کدهای یکبارمصرف محدود به مبدأ با
WebOTP API پشتیبانی می‌کنند، اما نه ازطریق autocomplete="one-time-code".
استفاده از WebOTP API
WebOTP API دسترسی به گذرواژه یکبارمصرف
دریافت‌شده در پیامک را فراهم می‌کند. با فراخوانی
navigator.credentials.get()
با نوع otp (OTPCredential) که transport شامل sms است، وب‌سایت
منتظر پیامکی می‌ماند که با کدهای یکبارمصرف محدود به مبدأ مطابقت داشته باشد تا
تحویل داده شود و کاربر به آن دسترسی دهد. وقتی گذرواژه یکبارمصرف به جاوا اسکریپت منتقل شد،
وب‌سایت می‌تواند از آن در فرم استفاده کند یا آن را مستقیماً به سرور ارسال کند.
navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
با نحوه استفاده از WebOTP API به‌طور دقیق در درستی‌سنجی شماره تلفن در وب
با WebOTP API آشنا شوید
یا قطعه کد زیر را کپی و جای‌گذاری کنید. حتماً مشخصه action و
method را در <form> خود تنظیم کنید.
// 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);
});
});
}