Flutter Web端Firebase手机号登录获取OTP时验证失败求助

以下是针对这个错误的具体排查和修复步骤：

• 检查Firebase Web初始化配置
  确认web/index.html中的Firebase脚本完整且版本匹配，必须包含firebase-auth模块：

  <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>
  

  同时核对初始化代码里的apiKey、authDomain等参数，确保和Firebase控制台Web应用的配置完全一致。

• 补全Recaptcha验证配置
  该错误大多因Web端Recaptcha配置缺失导致，调用verifyPhoneNumber时必须传入RecaptchaVerifier实例：

  final recaptchaVerifier = RecaptchaVerifier(
    container: 'recaptcha-container',
    size: RecaptchaVerifierSize.compact,
    theme: RecaptchaVerifierTheme.light,
  );
  
  await FirebaseAuth.instance.verifyPhoneNumber(
    phoneNumber: '+你的手机号',
    verificationCompleted: (credential) async {
      await FirebaseAuth.instance.signInWithCredential(credential);
    },
    verificationFailed: (e) => print(e.message),
    codeSent: (verificationId, resendToken) {
      // 处理验证码发送后的逻辑
    },
    codeAutoRetrievalTimeout: (verificationId) {},
    recaptchaVerifier: recaptchaVerifier, // 必须传入此参数
  );
  

  还要在web/index.html的body中添加空的Recaptcha容器：

  <div id="recaptcha-container"></div>
  

• 统一版本兼容性
  确保pubspec.yaml中firebase_auth的版本与Web端引入的Firebase JS版本匹配，比如firebase_auth: ^4.10.0对应JS 9.x系列，避免版本不兼容导致的未定义属性问题。

• 清除缓存重启项目
  执行flutter clean清理项目，再用flutter run -d chrome重新启动，同时清除浏览器缓存和Cookie，避免旧配置残留。

• 检查Firebase控制台设置
  进入Firebase控制台的「Auth > 登录方法」，确认手机号登录已启用，且无异常的IP或地区限制规则。

内容的提问来源于stack exchange，提问作者Ravi Ranjan