Flutter Web端Firebase手机号认证遇INVALID_APP_CREDENTIAL错误求助

以下是针对你遇到的INVALID_APP_CREDENTIAL错误的具体排查方向和解决方法：

1. 检查reCAPTCHA密钥配置 #

• 确认创建的是**reCAPTCHA v2（"I'm not a robot"复选框类型）**密钥，Firebase Web端手机号验证不支持reCAPTCHA v3或其他类型。
• 在reCAPTCHA管理控制台，确保当前Web应用的所有域名（包括本地开发的localhost、生产域名）已添加到密钥的域名列表，注意不要带http:///https://前缀，直接填写纯域名（如localhost、yourdomain.com），带端口的本地地址（如localhost:3000）需单独添加。

2. 验证Firebase Web初始化配置 #

• 检查web/index.html中的Firebase初始化代码，确保firebaseConfig的apiKey、authDomain、projectId等参数与Firebase控制台Web项目设置中的完全一致。
• 确认在index.html中正确引入了兼容版本的Firebase JS SDK脚本，firebase_auth:4.20.0对应Firebase JS SDK 9.x系列，示例：

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

  版本不匹配可能导致底层验证逻辑冲突。

3. 核对授权域名设置 #

• 在Firebase控制台Authentication > 设置 > 授权域名中，确保添加了所有需要的域名：本地开发的localhost及对应端口、生产环境的主域名和子域名（如www.yourdomain.com和yourdomain.com需分别添加）。
• 检查域名是否存在拼写错误，避免多余的斜杠、空格或大小写问题。

4. 清除缓存并排除浏览器干扰 #

• 清除浏览器的缓存和本地存储，重新运行Web应用，旧的配置缓存可能导致验证失败。
• 使用浏览器隐身模式测试，排除广告拦截器、隐私插件等对reCAPTCHA加载的干扰。

5. 检查代码实现细节 #

• 确认verifyPhoneNumber的调用参数正确，尤其是手机号格式（需包含国际区号，如+8613xxxxxxxxx），示例：

  await FirebaseAuth.instance.verifyPhoneNumber(
    phoneNumber: '+8613800138000',
    verificationCompleted: (PhoneAuthCredential credential) {},
    verificationFailed: (FirebaseAuthException e) {
      print('验证失败: ${e.message}');
    },
    codeSent: (String verificationId, int? resendToken) {},
    codeAutoRetrievalTimeout: (String verificationId) {},
  );
  

• 不要自定义或隐藏reCAPTCHA的弹窗元素，避免破坏验证流程。

6. 排查项目权限与API启用状态 #

• 在Firebase控制台Authentication > 登录方法中，确认Phone登录方法已启用，且没有设置地区限制等额外规则。
• 登录Google Cloud控制台，找到对应Firebase项目，搜索并确认Identity Toolkit API已启用，该API是Firebase Auth手机号验证的底层依赖。

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