SMS OTP بهترین شیوه ها را تشکیل می دهد

Eiji Kitamura

رایج است که از کاربر خواسته شود برای تأیید هویت خود از طریق ارسال پیامک، رمز عبور یکبار مصرف (OTP) ارائه دهد. برخی از موارد استفاده از OTP پیامکی عبارتند از:

• احراز هویت دو مرحله‌ای. علاوه بر نام کاربری و رمز عبور، می‌توان از رمز عبور یک‌بار مصرف پیامکی (SMS OTP) به عنوان یک سیگنال قوی مبنی بر اینکه حساب متعلق به شخصی است که رمز عبور یک‌بار مصرف پیامکی را دریافت کرده است، استفاده کرد.
• تأیید شماره تلفن. برخی سرویس‌ها از شماره تلفن به عنوان شناسه اصلی کاربر استفاده می‌کنند. در چنین سرویس‌هایی، کاربران می‌توانند شماره تلفن و رمز یکبار مصرف دریافتی از طریق پیامک را برای اثبات هویت خود وارد کنند. گاهی اوقات این رمز با یک پین ترکیب می‌شود تا احراز هویت دو مرحله‌ای را تشکیل دهد.
• بازیابی حساب. وقتی کاربری دسترسی به حساب خود را از دست می‌دهد، باید راهی برای بازیابی آن وجود داشته باشد. ارسال ایمیل به آدرس ایمیل ثبت شده یا ارسال پیامک OTP به شماره تلفن آنها از روش‌های رایج بازیابی حساب است.
• تأیید پرداخت در سیستم‌های پرداخت، برخی از بانک‌ها یا صادرکنندگان کارت اعتباری به دلایل امنیتی از پرداخت‌کننده درخواست احراز هویت اضافی می‌کنند. معمولاً برای این منظور از OTP پیامکی استفاده می‌شود.

برای آشنایی با بهترین شیوه‌های ساخت فرم‌های OTP پیامکی برای این موارد استفاده، به خواندن ادامه دهید.

چک لیست

برای ارائه بهترین تجربه کاربری با رمز یکبار مصرف پیامکی، مراحل زیر را دنبال کنید:

• از عنصر <input> با موارد زیر استفاده کنید:
  • type="text"
  • inputmode="numeric"
  • autocomplete="one-time-code"
• از @BOUND_DOMAIN #OTP_CODE ‎ به عنوان آخرین خط پیام کوتاه OTP استفاده کنید.
• از API وب‌اوتی‌پی استفاده کنید.

از عنصر <input> استفاده کنید

استفاده از فرم با عنصر <input> مهمترین و بهترین روشی است که می‌توانید دنبال کنید زیرا در همه مرورگرها کار می‌کند. حتی اگر سایر پیشنهادات این پست در برخی مرورگرها کار نکند، کاربر همچنان می‌تواند رمز یکبار مصرف (OTP) را به صورت دستی وارد و ارسال کند.

<form action="/verify-otp" method="POST">
  <input type="text"
      inputmode="numeric"
      autocomplete="one-time-code"
      pattern="\d{6}"
      required>
</form>

در ادامه چند ایده برای اطمینان از اینکه یک فیلد ورودی بهترین عملکرد را از مرورگر دریافت می‌کند، ارائه شده است.

type="text"

از آنجایی که رمزهای یک‌بار مصرف (OTP) معمولاً اعداد پنج یا شش رقمی هستند، استفاده از type="number" برای یک فیلد ورودی ممکن است بدیهی به نظر برسد زیرا صفحه کلید موبایل را فقط به اعداد تغییر می‌دهد. این کار توصیه نمی‌شود زیرا مرورگر انتظار دارد که یک فیلد ورودی یک عدد قابل شمارش باشد نه یک توالی از چندین عدد، که می‌تواند باعث رفتار غیرمنتظره‌ای شود. استفاده از type="number" باعث می‌شود دکمه‌های بالا و پایین در کنار فیلد ورودی نمایش داده شوند. فشار دادن این دکمه‌ها عدد را افزایش یا کاهش می‌دهد و ممکن است صفرهای قبل از آن را حذف کند.

به جای آن از type="text" استفاده کنید. این کار صفحه کلید موبایل را فقط به اعداد تبدیل نمی‌کند، اما اشکالی ندارد زیرا نکته بعدی برای استفاده از inputmode="numeric" این کار را انجام می‌دهد.

inputmode="numeric"

برای تغییر صفحه کلید موبایل به حالت فقط اعداد، از inputmode="numeric" استفاده کنید.

برخی وب‌سایت‌ها از type="tel" برای فیلدهای ورودی OTP استفاده می‌کنند، زیرا این ویژگی، صفحه‌کلید موبایل را نیز هنگام فوکوس، فقط به اعداد (شامل * و # ) تبدیل می‌کند. این ترفند در گذشته، زمانی که inputmode="numeric" به طور گسترده پشتیبانی نمی‌شد، استفاده می‌شد. از زمانی که فایرفاکس پشتیبانی از inputmode="numeric" را آغاز کرده است ، نیازی به استفاده از ترفند type="tel" که از نظر معنایی نادرست است، نیست.

autocomplete="one-time-code"

ویژگی autocomplete به توسعه‌دهندگان اجازه می‌دهد تا مشخص کنند که مرورگر چه مجوزهایی برای ارائه کمک تکمیل خودکار دارد و مرورگر را در مورد نوع اطلاعات مورد انتظار در این فیلد مطلع می‌کند.

با استفاده از autocomplete="one-time-code" هر زمان که کاربر در حین باز بودن فرم، پیامکی دریافت کند، سیستم عامل به صورت اکتشافی رمز یکبار مصرف (OTP) موجود در پیامک را تجزیه و تحلیل می‌کند و صفحه کلید رمز یکبار مصرف را برای ورود به کاربر پیشنهاد می‌دهد. این قابلیت فقط در Safari نسخه ۱۲ و بالاتر در iOS، iPadOS و macOS کار می‌کند، اما ما اکیداً استفاده از آن را توصیه می‌کنیم، زیرا راه بهتری برای بهبود تجربه رمز یکبار مصرف پیامکی در این پلتفرم‌ها است.

autocomplete="one-time-code" تجربه کاربری را بهبود می‌بخشد، اما با اطمینان از اینکه پیام SMS با قالب پیام مبدا مطابقت دارد، می‌توانید کارهای بیشتری انجام دهید.

ویژگی‌های اختیاری

ویژگی‌های اختیاری عبارتند از:

• pattern قالبی را مشخص می‌کند که رمز یکبار مصرف وارد شده باید با آن مطابقت داشته باشد. از عبارات منظم برای مشخص کردن الگوی تطبیق استفاده کنید. برای مثال، \d{6} رمز یکبار مصرف را به یک رشته شش رقمی محدود می‌کند. برای اطلاعات بیشتر در مورد pattern ، Use JavaScript را برای اعتبارسنجی پیچیده‌تر در زمان واقعی بخوانید.
• required نشان می‌دهد که کاربر باید فیلد را پر کند.

برای توصیه‌های بیشتر ، بهترین شیوه‌های فرم ورود ما را مطالعه کنید.

قالب‌بندی متن پیامک

با هماهنگی با کدهای یکبار مصرف مبدا که از طریق مشخصات پیامکی ارسال می‌شوند، تجربه کاربری در ورود رمز یکبار مصرف (OTP) را بهبود بخشید.

در اصل، قانون قالب‌بندی به شرح زیر است: پیام SMS را با دامنه گیرنده با @ و OTP با # تکمیل کنید.

برای مثال:

Your OTP is 123456

@web-otp.glitch.me #123456

قالب استاندارد پیام‌های OTP، استخراج را آسان‌تر و قابل اعتمادتر می‌کند. مرتبط کردن کدهای OTP با وب‌سایت‌ها، فریب کاربران برای ارائه کد به سایت‌های مخرب را دشوارتر می‌کند.

قوانین قالب‌بندی دقیق

قوانین دقیق عبارتند از:

• پیام با متنی (اختیاری) قابل خواندن توسط انسان آغاز می‌شود که شامل یک رشته الفبایی عددی چهار تا ده کاراکتری با حداقل یک عدد است و آخرین خط برای URL و OTP باقی می‌ماند.
• بخش دامنه‌ی URL وب‌سایتی که API را فراخوانی کرده است، باید با @ شروع شود.
• آدرس اینترنتی (URL) باید شامل یک # و به دنبال آن رمز عبور یکبار مصرف (OTP) باشد. تعداد کاراکترها باید ۱۴۰ یا کمتر باشد.

استفاده از این قالب چند مزیت دارد:

• رمز یکبار مصرف (OTP) به دامنه متصل خواهد شد. اگر کاربر در دامنه‌های دیگری غیر از دامنه مشخص شده در پیامک باشد، پیشنهاد OTP نمایش داده نمی‌شود. این امر همچنین خطر حملات فیشینگ و سرقت احتمالی حساب را کاهش می‌دهد.
• مرورگر اکنون قادر خواهد بود بدون وابستگی به روش‌های اکتشافی مرموز و نامشخص، رمز عبور یک‌بار مصرف (OTP) را به طور قابل اعتمادی استخراج کند.

وقتی یک وب‌سایت از autocomplete="one-time-code" استفاده می‌کند، سافاری با iOS 14 یا بالاتر، OTP را با پیروی از این قوانین پیشنهاد می‌دهد.

این قالب پیامکی علاوه بر سافاری، در مرورگرهای دیگری نیز کاربرد دارد. کروم، اپرا و ویوالدی در اندروید نیز از قانون کدهای یکبار مصرف مبتنی بر مبدا با WebOTP API پشتیبانی می‌کنند، البته نه از طریق autocomplete="one-time-code" .

از API وب‌اوتی‌پی استفاده کنید

API وب‌ات‌پی (WebOTP) دسترسی به OTP دریافتی در یک پیام کوتاه را فراهم می‌کند. با فراخوانی navigator.credentials.get() با نوع otp ( OTPCredential ) که در آن transport شامل sms می‌شود، وب‌سایت منتظر می‌ماند تا پیامکی که با کدهای یکبار مصرف مبدا مطابقت دارد، ارسال شود و به کاربر دسترسی داده شود. پس از ارسال OTP به جاوا اسکریپت، وب‌سایت می‌تواند از آن در یک فرم استفاده کند یا آن را مستقیماً به سرور ارسال کند.

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);
    });
  });
}