部署后Firebase手机号认证功能失效问题求助

嘿，我碰到过好几次类似的情况——本地跑的好好的功能，一部署到Firebase就罢工，大概率是环境配置或者ReCAPTCHA的适配问题，结合你的代码给你几个精准的排查方向：

1. 先检查ReCAPTCHA的授权域名 #

这是最容易踩的坑！本地开发时localhost是Firebase默认授权的，但部署到Firebase Hosting（比如xxx.web.app或你的自定义域名）后，必须把这个域名手动加到授权列表里：

• 打开Firebase控制台进入你的项目
• 点击Authentication -> Sign-in method
• 找到Phone登录方式，拉到最下方的Authorized domains
• 添加你部署后的域名（比如your-app.web.app），保存后等几分钟再测试

2. 确保ReCAPTCHA Widget正确渲染 #

你的代码里注释掉了render()逻辑，本地环境DOM加载快可能没问题，但部署后网络或渲染延迟会导致ReCAPTCHA没有正确初始化。把这段代码取消注释，保证widget被显式渲染：

componentDidMount() {
  // 先确认DOM元素存在再初始化，避免空指针
  const signInElement = document.getElementById('sign-in');
  if (!signInElement) return;

  window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in', {
    'size': 'invisible',
    'callback': function (response) {
      console.log('res', response)
    }
  });
  // 显式渲染ReCAPTCHA，部署环境必须要有这一步
  window.recaptchaVerifier.render().then(function (widgetId) {
    window.recaptchaWidgetId = widgetId;
  });
}

3. 查看浏览器控制台的具体错误信息 #

部署后打开浏览器开发者工具（F12），盯着Console里的错误日志——你的代码已经加了console.log('err',error)，这里的错误码是定位问题的关键：

• 如果是auth/operation-not-allowed：检查Firebase控制台是否开启了手机号登录方式
• 如果是auth/invalid-recaptcha-token：说明ReCAPTCHA没正确加载，回到前两步排查
• 如果是auth/network-request-failed：确认网络正常，Firebase Hosting的CORS配置默认是没问题的

4. 确认Firebase SDK的生产环境配置 #

有时候本地用的测试配置和生产环境不一致，确保打包部署时用的是项目的正式Firebase配置（就是控制台Project Settings里复制的firebaseConfig代码块），别用本地的测试变量。

按这个顺序排查，先从ReCAPTCHA域名授权开始，这个是最容易忽略的点，应该能快速解决问题！

内容的提问来源于stack exchange，提问作者Muhammad Yousuf