基于ASP.NET MVC实现网站自动读取手机短信验证码填充功能可行吗？

可以实现类似APP的验证码自动填充效果，但受限于浏览器隐私安全机制，无法直接读取用户手机短信内容，需借助浏览器原生能力完成，以下是具体方案：

1. 利用浏览器自动填充属性 #

主流浏览器（Chrome、Safari、Edge等）支持通过autocomplete属性识别验证码字段，自动匹配短信中的验证码并提示填充。

在ASP.NET MVC视图中，给验证码输入框添加对应属性：

@Html.TextBoxFor(m => m.VerificationCode, new { 
    autocomplete = "one-time-code", 
    type = "text",
    placeholder = "请输入验证码"
})

注意：发送短信时需保持格式规范，比如包含“验证码：123456”或“Your verification code is 123456”这类明确的验证码标识，浏览器才能准确识别。

2. 使用WebOTP API主动获取验证码 #

WebOTP是浏览器提供的原生API，可主动监听符合格式的短信，自动提取验证码并填充到字段，体验更流畅。

步骤1：配置短信格式 #

发送短信时需在末尾添加域名标记，格式为：@你的网站域名 #验证码，例如：

你的验证码是123456@yourdomain.com #123456

步骤2：在ASP.NET MVC视图中添加JS代码 #

async function autoFillVerificationCode() {
    // 检查浏览器是否支持WebOTP API
    if ('OTPCredential' in window) {
        try {
            const otpCredential = await navigator.credentials.get({
                otp: { transport: ['sms'] }
            });
            // 填充到验证码输入框（替换为你的输入框ID）
            document.getElementById('VerificationCode').value = otpCredential.code;
        } catch (error) {
            console.log('验证码自动填充失败:', error);
        }
    }
}

// 页面加载后触发监听
window.addEventListener('load', autoFillVerificationCode);

注意：该API仅支持HTTPS环境，且需要用户授权浏览器访问短信内容（部分浏览器会自动授权，无需手动操作）。

关键限制说明 #

• 无法直接读取短信：出于隐私安全，网页没有权限直接访问用户手机短信，所有方案均依赖浏览器原生的验证码识别能力。
• 兼容性：WebOTP API仅在现代浏览器中支持，对于旧浏览器可 fallback 到autocomplete属性方案。

内容的提问来源于stack exchange，提问作者shabnam isfehani