Firebase网页端手机号验证报错INVALID_APP_CREDENTIAL及reCAPTCHA问题求助

以下是针对该问题的具体排查和解决步骤：

• 检查reCAPTCHA域名白名单配置
  登录Firebase控制台，进入身份验证 > 登录方法 > 手机号选项，确认reCAPTCHA的域名白名单中包含当前网站的完整域名（需包含协议头，如https://yourdomain.com，本地测试需添加http://localhost:端口号）。域名不匹配会直接导致验证器凭证无效。

• 升级Firebase SDK版本
  你当前使用的6.3.3版本是2019年的旧版本，存在与新版reCAPTCHA验证机制不兼容的问题。建议升级到较新的稳定版本，比如8.x系列（兼容原有写法）：

  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
  

  升级后重新测试验证流程，旧版本可能无法正确处理新的reCAPTCHA token格式。

• 验证Firebase项目配置正确性
  确认初始化Firebase时使用的apiKey、authDomain等参数与控制台项目设置 > 通用中Web应用的配置完全一致，且项目已启用手机号登录功能。若API密钥错误或项目未启用对应登录方式，会触发INVALID_APP_CREDENTIAL错误。

• 检查reCAPTCHA实例与调用逻辑
  确保使用firebase.auth.RecaptchaVerifier正确创建验证实例，且调用signInWithPhoneNumber时传入的是该实例而非手动生成的token。示例代码如下：

  // 创建reCAPTCHA验证器
  window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
    'size': 'invisible',
    'callback': (response) => {
      // 自动处理验证回调
    }
  });
  
  // 发送验证码
  firebase.auth().signInWithPhoneNumber(phoneNumber, window.recaptchaVerifier)
    .then((confirmationResult) => {
      // 存储confirmationResult用于后续验证码验证
    }).catch((error) => {
      console.error('发送验证码失败:', error);
    });
  

  避免手动缓存或篡改reCAPTCHA token，SDK会自动处理token的有效期和提交逻辑。

• 排除浏览器环境干扰
  清除浏览器缓存和Cookie，在隐私模式下测试，排除广告拦截器、VPN等插件对reCAPTCHA请求的拦截。部分浏览器插件会阻断reCAPTCHA的验证流程，导致token生成异常。

内容的提问来源于stack exchange，提问作者Prashant Kumar Mishra