基于JavaScript+Firebase的手机号OTP验证400错误求助

1. 检查Firebase项目配置与权限 #

• 确认Firebase控制台里Auth > 登录方法已经启用“电话”登录方式
• 核对firebase.initializeApp(config)里的API密钥、项目ID等参数，必须和控制台显示的完全一致
• 如果用了受限API密钥，要确保当前域名在控制台的API密钥限制列表里，别被跨域或域名规则拦截了

2. RecaptchaVerifier配置问题 #

• 页面里必须有用于Recaptcha的DOM元素，比如<div id="recaptcha-container"></div>，初始化时要指定正确的ID
• 检查RecaptchaVerifier的参数，size设成"invisible"或"normal"都可以，但用invisible的话要保证触发逻辑没问题
• 打开浏览器控制台看有没有Recaptcha加载报错，加载失败直接就会导致signInWithPhoneNumber调用失败

3. 手机号格式必须规范 #

• 传入的手机号必须带国际区号，比如+8613xxxxxxxxx，Firebase硬性要求，不带区号肯定返回400
• 检查前端输入处理逻辑，别误删区号或者加了多余字符
• 手动输一个格式正确的手机号测试，排除前端输入处理的问题

4. 代码逻辑细节排查 #

• 确保signInWithPhoneNumber调用前，RecaptchaVerifier已经初始化完成，别在异步初始化还没结束就触发请求
• 打开浏览器Network面板，找到返回400的POST请求，看Response Body里的具体错误信息，Firebase会返回明确提示，比如invalid-phone-number、recaptcha-token-invalid这类
• 确认代码里是在用户点击“Send OTP”按钮时才触发Recaptcha验证，别在页面加载时自动触发

5. Firebase SDK版本兼容 #

• 检查用的Firebase SDK版本，太旧的话可能有兼容问题，建议升级到最新稳定版（比如firebase@9.x或firebase@10.x）
• 如果用的是模块化SDK，要确保导入方法正确，比如import { signInWithPhoneNumber } from "firebase/auth"，别用旧版的命名空间写法

内容的提问来源于stack exchange，提问作者ProXiMa Akash