Web端FirebaseUI手机号登录功能异常问题求助

核心问题分析 #

你的代码存在几个关键冲突和错误，导致手机号登录功能无法正常工作：

• Firebase SDK版本混用：同时引入了Compat兼容版（9.13.0的firebase-app-compat、firebase-auth-compat）和模块化版本（9.21.0的firebase-app.js、firebase-analytics.js），两种模式的SDK会互相干扰，导致Auth实例无法正确初始化。
• FirebaseUI与Firebase SDK版本不兼容：使用的FirebaseUI v6.0.2仅适配Firebase SDK v8及以下版本，而你引入的Firebase SDK是v9版本，版本不匹配会引发底层API调用错误。
• 未定义的函数与变量：handleUIError函数未实现，signInFailure回调调用时会抛出错误；末尾的console.log(error)中error变量未定义，会导致控制台报错。
• Popup模式适配问题：手机号登录搭配signInFlow: 'popup'时，隐形reCAPTCHA的验证流程可能因浏览器弹窗权限或跨域问题失效，建议优先使用redirect模式。

修复后的完整代码 #

<!-- 统一使用Firebase Compat版本，匹配FirebaseUI v6.0.2的兼容要求 -->
<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>

<!-- FirebaseUI v6.0.2 对应Firebase SDK v8版本 -->
<script src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css" />

<script type="text/javascript">
  // Firebase配置
  const firebaseConfig = {
    apiKey: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    authDomain: "MYDOMAIN",
    projectId: "MYPROJECTID",
    storageBucket: "MYSTORAGEBUCKET",
    messagingSenderId: "1234567890",
    appId: "11223344556677889900",
    measurementId: "G-ASDFGH"
  };

  // 初始化Firebase（使用Compat版本的API）
  firebase.initializeApp(firebaseConfig);

  // 实现错误处理函数
  function handleUIError(error) {
    console.error("登录错误:", error);
    alert("登录失败，请稍后重试");
    return false;
  }

  // FirebaseUI配置
  var uiConfig = {
    callbacks: {
      signInSuccessWithAuthResult: function(authResult, redirectUrl) {
        var user = authResult.user;
        console.log("登录成功:", user);
        return true;
      },
      signInFailure: function(error) {
        return handleUIError(error);
      },
      uiShown: function() {
        const loader = document.getElementById('loader');
        if (loader) loader.style.display = 'none';
      }
    },
    credentialHelper: firebaseui.auth.CredentialHelper.NONE,
    queryParameterForWidgetMode: 'mode',
    queryParameterForSignInSuccessUrl: 'signInSuccessUrl',
    // 手机号登录建议使用redirect模式，避免弹窗权限问题
    signInFlow: 'redirect',
    signInSuccessUrl: 'MYDOMAIN.COM',
    signInOptions: [
      {
        provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
        recaptchaParameters: {
          type: 'image',
          size: 'invisible',
          badge: 'bottomleft'
        }
      }
    ],
    immediateFederatedRedirect: false,
    tosUrl: 'MYDOMAIN.COM',
    privacyPolicyUrl: function() {
      window.location.assign('MYDOMAIN.COM');
    }
  };

  // 初始化FirebaseUI并启动登录组件
  var ui = new firebaseui.auth.AuthUI(firebase.auth());
  ui.start('#firebaseui-auth-container', uiConfig);
</script>

额外检查项 #

• Firebase控制台配置：确保在Firebase控制台的「Authentication」>「登录方法」中启用了手机号登录；检查「授权域」是否添加了你的网站域名；确认reCAPTCHA v2已在控制台正确配置。
• 浏览器控制台排查：打开浏览器开发者工具（F12），查看「控制台」标签页的错误信息，定位具体的权限、网络或API调用问题。

内容的提问来源于stack exchange，提问作者Horendra Kandari