عنوان:

‫ورود پیامکی در سایت‌ها و پر کردن خودکار کد OTP


نویسنده: وحید نصیری
تاریخ: ۱۴۰۴/۰۲/۲۸ ۱۰:۵۶
آدرس: www.dntips.ir
امنیت و تجربه کاربری (User Experience) از مهم‌ترین عوامل موفقیت یک برنامه یا وب‌سایت به شمار می‌روند. یکی از روش‌های پرکاربرد برای تأیید هویت کاربران، استفاده از کد یک‌بارمصرف (One-Time Password یا OTP) ارسال‌شده از طریق پیامک است. این روش به دلیل سادگی و دسترسی گسترده به گوشی‌های موبایل، در کاربردهایی مانند احراز هویت دو مرحله‌ای (Two-Factor Authentication)، تأیید شماره تلفن، بازیابی حساب کاربری و تأیید پرداخت‌ها بسیار محبوب است. با این حال، پیاده‌سازی نادرست این سیستم می‌تواند تجربه کاربری را مختل کرده یا امنیت را به خطر بیندازد. این مقاله به بررسی بهترین شیوه‌های طراحی فرم ورود پیامکی و پر کردن خودکار کد OTP با استفاده از فناوری‌های مدرن وب مانند WebOTP API می‌پردازد.

چرا کد OTP پیامکی مهم است؟
کد OTP پیامکی به عنوان یک ابزار ساده اما قدرتمند، امکان تأیید هویت کاربر را بدون نیاز به سخت‌افزارهای پیچیده فراهم می‌کند. این روش در سناریوهای مختلفی کاربرد دارد. برای مثال، در احراز هویت دو مرحله‌ای، پس از ورود نام کاربری و رمز عبور، کد OTP به شماره تلفن کاربر ارسال می‌شود تا اطمینان حاصل شود که فرد در حال ورود، صاحب حساب است. در تأیید شماره تلفن، برخی سرویس‌ها از شماره موبایل به عنوان شناسه اصلی کاربر استفاده می‌کنند و OTP راهی برای اثبات مالکیت این شماره است. همچنین، در بازیابی حساب کاربری، زمانی که کاربر دسترسی به ایمیل یا رمز عبور خود را از دست می‌دهد، OTP پیامکی می‌تواند راه‌حلی سریع و مؤثر باشد. در نهایت، در سیستم‌های پرداخت، بانک‌ها و مؤسسات مالی از OTP برای تأیید تراکنش‌ها استفاده می‌کنند تا امنیت بیشتری فراهم شود.
با این حال، OTP پیامکی بدون نقص نیست. شماره‌های تلفن ممکن است بازیافت شوند یا مورد سوءاستفاده قرار گیرند، و خود مفهوم OTP در برابر حملات فیشینگ (Phishing) مقاومت کامل ندارد. به همین دلیل، استفاده از فناوری‌های پیشرفته مانند WebAuthn می‌تواند جایگزین امن‌تری باشد. با این وجود، به دلیل فراگیری پیامک، OTP همچنان گزینه‌ای محبوب است، به شرطی که با بهترین شیوه‌ها پیاده‌سازی شود.

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

استفاده از عنصر با ویژگی‌های مناسب
عنصر پایه اصلی فرم OTP است، زیرا در تمامی مرورگرها به درستی کار می‌کند. برای مثال، کد زیر یک فرم ساده برای ورود OTP را نشان می‌دهد:
<form action="/verify-otp" method="POST">
  <input type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
         pattern="\d{6}"
         required>
</form>
در این کد، ویژگی type="text" به جای type="number" استفاده شده است. اگرچه OTP معمولاً شامل اعداد است، استفاده از type="number" می‌تواند مشکلاتی مانند نمایش دکمه‌های افزایش و کاهش در کنار فیلد یا حذف صفرهای ابتدایی ایجاد کند. در عوض، ویژگی inputmode="numeric" صفحه‌کلید عددی را در دستگاه‌های موبایل فعال می‌کند، بدون اینکه رفتار غیرمنتظره‌ای ایجاد شود.
ویژگی autocomplete="one-time-code" به مرورگر اجازه می‌دهد تا کد OTP را از پیامک دریافت‌شده به‌صورت خودکار شناسایی کرده و به کاربر پیشنهاد دهد. این ویژگی در مرورگر سافاری (Safari) نسخه ۱۲ به بعد در سیستم‌عامل‌های iOS، iPadOS و macOS پشتیبانی می‌شود و تجربه کاربری را به طور قابل‌توجهی بهبود می‌بخشد. همچنین، ویژگی pattern="\d{6}" تضمین می‌کند که کد واردشده یک رشته شش‌رقمی باشد، و required فیلد را اجباری می‌کند.

فرمت‌بندی پیامک OTP
برای بهبود تجربه کاربری و افزایش امنیت، پیامک OTP باید از فرمت استاندارد پیروی کند. این فرمت شامل افزودن دامنه وب‌سایت (Domain) و کد OTP در خط آخر پیامک است. برای مثال:
کد تأیید شما ۱۲۳۴۵۶ است
@web-otp.glitch.me #123456
این فرمت، که به عنوان کد یک‌بارمصرف محدود به دامنه (Origin-Bound One-Time Code) شناخته می‌شود، دو مزیت اصلی دارد. اول، کد OTP تنها در دامنه مشخص‌شده پیشنهاد می‌شود، که خطر حملات فیشینگ را کاهش می‌دهد. دوم، مرورگرها می‌توانند کد را با اطمینان بیشتری استخراج کنند، بدون نیاز به الگوریتم‌های پیچیده. این فرمت در مرورگرهایی مانند کروم (Chrome)، اپرا (Opera) و ویوالدی (Vivaldi) روی اندروید و سافاری روی iOS 14 به بعد پشتیبانی می‌شود.

استفاده از WebOTP API
یکی از پیشرفته‌ترین ابزارها برای خودکارسازی ورود OTP، رابط برنامه‌نویسی WebOTP API است. این API به وب‌سایت اجازه می‌دهد تا کد OTP را مستقیماً از پیامک دریافت‌شده استخراج کرده و در فرم قرار دهد یا به سرور ارسال کند. برای استفاده از WebOTP API، وب‌سایت باید روی پروتکل امن HTTPS اجرا شود. کد زیر نمونه‌ای از پیاده‌سازی این API است:
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport: ['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}
در این کد، ابتدا بررسی می‌شود که آیا WebOTP API در مرورگر پشتیبانی می‌شود. سپس، با استفاده از navigator.credentials.get، وب‌سایت منتظر دریافت پیامک OTP می‌ماند. پس از دریافت کد، آن را در فیلد ورودی قرار داده و فرم به‌صورت خودکار ارسال می‌شود. این فرآیند برای کاربر کاملاً شفاف است و تجربه‌ای سریع و بدون دردسر فراهم می‌کند.

نتیجه‌گیری
ورود پیامکی و پر کردن خودکار کد OTP یکی از روش‌های مؤثر برای بهبود امنیت و تجربه کاربری در برنامه‌های وب است. با استفاده از عنصر با تنظیمات مناسب، فرمت‌بندی استاندارد پیامک، و WebOTP API، توسعه‌دهندگان می‌توانند فرمی طراحی کنند که هم در تمامی مرورگرها کار کند و هم تجربه‌ای سریع و امن برای کاربران فراهم آورد. برای توسعه‌دهندگان دات‌نت، ادغام این تکنیک‌ها با ASP.NET Core امکان ایجاد برنامه‌های وب قدرتمند و کاربرپسند را فراهم می‌کند. با این حال، باید به محدودیت‌های امنیتی OTP پیامکی توجه داشت و در صورت نیاز، از فناوری‌های پیشرفته‌تر مانند WebAuthn استفاده کرد. با رعایت این بهترین شیوه‌ها، می‌توان سیستمی ساخت که هم از نظر فنی قوی باشد و هم رضایت کاربران را جلب کند.


مشاهده مطلب اصلی