‫بهینه‌سازی تجربه کاربری در احراز هویت چندعاملی: نقش صفت معنایی autocomplete=one-time-code

چکیده: احراز هویت چندعاملی (MFA) و کدهای یک‌بارمصرف (OTP) به استانداردی فراگیر در امنیت سامانه‌های تحت وب تبدیل شده‌اند. با این حال، افزایش لایه‌های امنیتی غالباً با کاهش سهولت کاربری (UX) و اصطکاک تعاملی -به‌ویژه در دستگاه‌های همراه- همراه است. در معماری‌های مبتنی بر مایکروسافت دات‌نت (ASP.NET Core، Blazor و Web Forms)، توسعه‌دهندگان معمولاً برای رفع این چالش به سراغ کتابخانه‌های جاوا اسکریپت یا پکیج‌های ثالث می‌روند. این مقاله به بررسی و تحلیل یک راهکار بومی، استاندارد و متکی بر وب معنایی (Semantic HTML) یعنی استفاده از صفت autocomplete="one-time-code" به همراه inputmode="numeric" می‌پردازد. این ویژگی با بهره‌گیری از توانایی مرورگرها و سیستم‌های عامل در استخراج خودکار رمزهای یک‌بارمصرف (SMS/Email)، بدون تحمیل سربار پردازشی یا افزودن وابستگی‌های خارجی، نرخ موفقیت لاگین را بهبود می‌بخشد. همچنین در این نوشتار، چالش رابط‌های کاربری چند‌ورودی (Split-box Inputs)، تمایز این رویکرد با استاندارد WebOTP API و ملاحظات امنیت SMS مبتنی بر دامنه (Domain-bound SMS) تبیین شده است.

• دریافت پیامک یا اعلان رمز.
• خروج از مرورگر و ورود به اپلیکیشن پیام‌رسان (Context Switch).
• خواندن و به‌خاطرسپاری کد موقت.
• بازگشت به مرورگر و فراخوانی مجدد کیبورد مجازی.
• تایپ دستی کاراکترها و ارسال فرم.

• صفت autocomplete="one-time-code" (معنا و رفتار): نشان‌دهنده ماهیت داده است. این صفت به مرورگر، سیستم‌عامل (iOS، اندروید) و ابزارهای مدیریت گذرواژه (مانند Bitwarden یا 1Password) می‌گوید که مقادیر دریافتی در کلیپ‌بورد یا پیامک‌های اخیر را بررسی و پیشنهاد تکمیل خودکار (Autofill Suggestion) را فعال کنند.
• صفت inputmode="numeric" (رابط کاربری ورود داده): صرفاً ظاهر صفحه‌کلید مجازی در دستگاه‌های لمسی را تنظیم می‌کند تا مستقیماً پد عددی (Numpad) به جای کیبورد کامل حروفی نمایش داده شود.

<input type="text"
       autocomplete="one-time-code"
       inputmode="numeric"
       maxlength="6" />

@model MfaVerificationViewModel

<form asp-action="VerifyMfa" method="post">
    <label asp-for="Code">کد تأیید ارسال‌شده را وارد کنید:</label>
    
    <input asp-for="Code"
           class="form-control text-center"
           autocomplete="one-time-code"
           inputmode="numeric"
           maxlength="6"
           placeholder="------" />

    <span asp-validation-for="Code" class="text-danger"></span>
    <button type="submit" class="btn btn-primary mt-3">تأیید و ورود</button>
</form>

@using System.ComponentModel.DataAnnotations

<EditForm Model="@authModel" OnValidSubmit="HandleVerification">
    <DataAnnotationsValidator />
    
    <InputText @bind-Value="authModel.OtpCode"
               class="form-control"
               autocomplete="one-time-code"
               inputmode="numeric"
               maxlength="6" />

    <button type="submit" class="btn btn-success mt-2">بررسی کد</button>
</EditForm>

@code {
    private AuthModel authModel = new();

    public class AuthModel
    {
        [Required(ErrorMessage = "کد تأیید الزامی است.")]
        [StringLength(6, MinimumLength = 6, ErrorMessage = "کد باید ۶ رقم باشد.")]
        public string OtpCode { get; set; } = string.Empty;
    }

    private void HandleVerification()
    {
        // فراخوانی منطق احراز هویت
    }
}

<asp:TextBox ID="txtOtp" 
             runat="server" 
             MaxLength="6" 
             autocomplete="one-time-code" 
             inputmode="numeric" />

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        txtOtp.Attributes.Add("autocomplete", "one-time-code");
        txtOtp.Attributes.Add("inputmode", "numeric");
        txtOtp.Attributes.Add("maxlength", "6");
    }
}

┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐
│ 4 │ │ 8 │ │ 2 │ │ 9 │ │ 1 │ │ 3 │
└───┘ └───┘ └───┘ └───┘ └───┘ └───┘

<div class="otp-wrapper">
    <!-- ورودی اصلی که داده را دریافت و ارسال می‌کند -->
    <input type="text"
           id="mainOtpInput"
           class="sr-only-input"
           autocomplete="one-time-code"
           inputmode="numeric"
           maxlength="6" />

    <!-- خانه‌های نمایشی برای تجربه بصری کاربر -->
    <div class="visual-boxes" aria-hidden="true">
        <span class="box"></span>
        <span class="box"></span>
        <span class="box"></span>
        <span class="box"></span>
        <span class="box"></span>
        <span class="box"></span>
    </div>
</div>

// دریافت برنامه‌ریزی‌شده کد از طریق جاوا اسکریپت
if ('OTPCredential' in window) {
    navigator.credentials.get({
        otp: { transport: ['sms'] }
    }).then(otp => {
        document.getElementById('mainOtpInput').value = otp.code;
        document.forms[0].submit(); // ارسال خودکار فرم
    });
}

کد ورود شما به سامانه: 482913.

@yourdomain.com #482913

• علامت @: مشخص‌کننده دامنه وب‌سایت است.
• علامت #: نشان‌دهنده کد تأیید است.