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

نحوه بهینه سازی فرم OTP پیامک و بهبود تجربه کاربری را بیاموزید.

ایجی کیتامورا
ایجی کیتامورا
ایکس

درخواست از کاربر برای ارائه OTP (گذرواژه یکبار مصرف) تحویل داده شده از طریق پیامک یک راه متداول برای تأیید شماره تلفن کاربر است. چند مورد استفاده برای SMS OTP وجود دارد:

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

این پست بهترین روش‌ها را برای ایجاد فرم OTP SMS برای موارد استفاده فوق توضیح می‌دهد.

چک لیست

برای ارائه بهترین تجربه کاربری با SMS OTP، مراحل زیر را دنبال کنید:

  • از عنصر <input> با استفاده از:
    • type="text"
    • inputmode="numeric"
    • autocomplete="one-time-code"
  • از @BOUND_DOMAIN #OTP_CODE به عنوان آخرین خط پیامک OTP استفاده کنید.
  • از WebOTP 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 را در پیامک به صورت اکتشافی تجزیه می کند و صفحه کلید OTP را برای ورود به کاربر پیشنهاد می کند. این فقط در Safari 12 و نسخه‌های بعدی در iOS، iPadOS و macOS کار می‌کند، اما ما قویاً استفاده از آن را توصیه می‌کنیم، زیرا این یک راه آسان برای بهبود تجربه OTP SMS در آن پلتفرم‌ها است.

`autocomplete="one-time-code"` در عمل.

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

متن اس ام اس را فرمت کنید

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

قانون قالب ساده است: پیام SMS را با دامنه گیرنده با @ و OTP قبل از # به پایان برسانید.

مثلا:

Your OTP is 123456

@web-otp.glitch.me #123456

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

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

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

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

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

از WebOTP API استفاده کنید

WebOTP API دسترسی به 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 را با جزئیات در تأیید شماره تلفن در وب با WebOTP API یاد بگیرید یا قطعه زیر را کپی و جایگذاری کنید. (مطمئن شوید که عنصر <form> دارای یک ویژگی action و method به درستی تنظیم شده است.)

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

عکس توسط Jason Leung در Unsplash .