React JS应用中OTP短信自动读取无响应问题求助

问题背景 #

开发React登录页的OTP验证码自动填充功能时，调用navigator.credentials.get()无任何响应，已满足HTTPS环境和短信格式要求，但未触发预期的OTP获取逻辑。

核心问题与解决步骤 #

1. 必须在用户交互上下文调用API

浏览器安全策略限制：OTP获取API必须由用户主动触发（如点击、输入事件），不能在页面加载的useEffect中直接调用，否则会被浏览器拦截，导致无响应。
修改方案：将handleOtpRetrieval绑定到用户交互事件（比如按钮点击），而非页面初始化时执行。

2. 完善AbortController逻辑

当前代码创建了AbortController但未设置超时或取消逻辑，可能导致请求长期挂起。建议添加超时自动取消，避免资源浪费。

3. 验证短信域名匹配度

短信中的@domain.info必须与当前页面的顶级域名或完全域名严格匹配：

• 若页面地址是https://app.domain.info，短信可以用@domain.info或@app.domain.info
• 若页面是https://www.domain.info，短信需对应@www.domain.info或@domain.info

4. 调试错误细节

将alert替换为console.log/console.error，因为alert可能被浏览器阻止，且无法输出详细错误信息。通过控制台查看具体错误类型（如NotAllowedError，通常是因为非用户交互触发）。

修改后的代码示例 #

import { useState } from 'react';

const OtpLogin = () => {
    const [otp, setOtp] = useState('');

    const handleOtpRetrieval = () => {
        const ac = new AbortController();
        // 设置5分钟超时，自动取消请求
        const timeoutId = setTimeout(() => ac.abort(), 5 * 60 * 1000);

        navigator.credentials.get({
            otp: { transport: ['sms'] },
            signal: ac.signal
        }).then(otpCredential => {
            console.log('获取到OTP:', otpCredential.code);
            setOtp(otpCredential.code); // 自动填充到输入框
        }).catch(err => {
            console.error('OTP获取失败:', err);
            clearTimeout(timeoutId);
        });
    };

    return (
        <div className="login-container">
            <h2>短信验证码登录</h2>
            <input 
                type="text" 
                value={otp} 
                onChange={(e) => setOtp(e.target.value)}
                placeholder="请输入6位验证码"
            />
            <button onClick={handleOtpRetrieval}>自动获取验证码</button>
        </div>
    );
};

export default OtpLogin;

额外检查点 #

• 确认浏览器版本：Chrome 84+、Edge 84+、Firefox 90+才支持OTP自动填充API
• 检查页面权限：部分浏览器可能需要用户允许网站读取短信权限（首次触发时会弹窗请求）

内容的提问来源于stack exchange，提问作者Hossein jebeli