解决Firebase手机号登录时auth/admin-restricted-operation错误

问题描述 #

我的Firebase项目中，邮箱密码登录功能正常，但使用手机号登录时，输入号码点击“发送验证码”按钮会出现错误提示：Firebase: Error (auth/admin-restricted-operation)。我已经尝试了各种方法仍未解决，请问该如何处理？

相关代码 #

登录组件代码（LoginForm.jsx） #

const LoginForm = () => {

  const navigate = useNavigate()
  const { signIn, requestOTP } = UserAuth()

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)
  // ... your existing code here ...

  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [phoneNumber, setPhoneNumber] = useState('');
  const [verificationCode, setVerificationCode] = useState('');
  const [confirmationResult, setConfirmationResult] = useState(null);

  // ... your existing code here ...

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      setLoading(true);
      const user = await signIn(email, password);
      console.log(user)
      setIsAuthenticated(true);
      setLoading(false);
      // navigate('/search');

    } catch (error) {
      toast.error("Wrong email or password..", {
        theme: "colored",
        hideProgressBar: true
      })
    }
    setLoading(false);
  }

  const handlePhoneAuthSubmit = async (e) => {
    e.preventDefault();
    try {
      setLoading(true);

      if (phoneNumber.length >= 10) {
        const confirmResult = await requestOTP(phoneNumber)
        console.log(confirmResult)
        window.confirmationResult = confirmResult
        setConfirmationResult(true)
      }
      else
        console.log('Please enter number greater than 12')

    } catch (error) {
      console.log(error)
      toast.error(error.message, {
        theme: "colored",
        hideProgressBar: true
      })
    }
    setLoading(false);
  }

  const verifyOTP = (e) => {
    e.preventDefault();
    const confirmResult = window.confirmationResult
    confirmResult.confirm(verificationCode).then((result) => {
      // User signed in successfully.
      const user = result.user;
      if (user) {
        navigate('/search');
      }
    }).catch((error) => {
      toast.error(error.message, {
        theme: "colored",
        hideProgressBar: true
      })
    });
  }

Firebase初始化代码（firebase-config.js） #

import { initializeApp } from 'firebase/app';
import { getAuth } from "firebase/auth";

const app = initializeApp ({
apiKey: xxx,
authDomain: xxx,
projectId: xxx,
storageBucket: xxx,
messagingSenderId: xxx,
appId: xxx,
measurementId: xxx
});


export const auth = getAuth(app)

export default app

错误原因及解决步骤 #

这个错误说明手机号登录操作被管理员限制，按以下步骤逐一排查：

• 启用手机号登录方式：打开Firebase控制台，进入项目的「Authentication」→「登录方法」，找到「手机号」选项，确认已启用并保存设置。
• 配置应用验证（Web端必做）：在手机号登录的设置页，完成reCAPTCHA v3的配置；测试阶段可添加测试电话号码，避免触发防滥用限制。
• 修正手机号格式：确保传入requestOTP的号码符合E.164标准（如+8613800138000），仅检查长度不够，必须带国家码。
• 检查requestOTP实现：确认该函数正确调用signInWithPhoneNumber，并传入有效的auth实例和reCAPTCHA验证器，示例实现如下：

  import { signInWithPhoneNumber } from "firebase/auth";
  import { auth } from './firebase-config';
  
  export const requestOTP = async (phoneNumber) => {
    const appVerifier = window.recaptchaVerifier; // 需提前初始化reCAPTCHA
    return await signInWithPhoneNumber(auth, phoneNumber, appVerifier);
  }
  

• 验证API密钥权限：在Firebase控制台「项目设置」→「API密钥」中，确认Web API密钥未被限制调用Authentication相关服务。

内容的提问来源于stack exchange，提问作者Valon Cazimi