Firebase：尝试在 Firebase Web 中使用电话号码登录时出现错误（身份验证/不允许操作）

Question

下面是 firebase 中的简单反应电话号码身份验证。但它似乎抛出一个错误，并且只适用于我将其放入 firebase 设置中进行测试的数字。我尝试了不同的设备，但所有设备似乎都给出了相同的错误

我收到的错误：

FirebaseError: Firebase: Error (auth/operation-not-allowed).
    at createErrorInternal (assert.ts:136:1)
    at _fail (assert.ts:65:1)
    at _performFetchWithErrorHandling (index.ts:177:1)
    at async _verifyPhoneNumber (phone.ts:239:1)
    at async signInWithPhoneNumber (phone.ts:106:1)

我的代码（App.js）：

function onCaptchVerify() {
    

    if (!window.recaptchaVerifier) {
      window.recaptchaVerifier = new RecaptchaVerifier(
        "recaptcha-container",
        {
          size: "visible",
          callback: (response) => {
            onSignup();
          },
          "expired-callback": () => {},
        },
        auth
      );
    }
  }

  function onSignup() {
    setLoading(true);
    onCaptchVerify();

    const appVerifier = window.recaptchaVerifier;

    const formatPh = "+" + ph;

    signInWithPhoneNumber(auth, formatPh, appVerifier)
      .then((confirmationResult) => {
        window.confirmationResult = confirmationResult;
        setLoading(false);
        setShowOTP(true);
        toast.success("OTP sended successfully!");
      })
      .catch((error) => {
        console.log(error);
        setLoading(false);
      });
  }

  function onOTPVerify() {
    setLoading(true);
    window.confirmationResult
      .confirm(otp)
      .then(async (res) => {
        console.log(res);
        setUser(res.user);
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  }

我的代码（setup.js）：

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

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);


export {auth};

JSX 中没有，只有调用函数的按钮

我尝试了公共域和本地主机。域和本地主机都在授权域中 我尝试过多个项目和帐户

Answer 1

我自己想出来了

Firebase 不允许来自

localhost

的电话身份验证

1. 您需要使用公共域托管该网站。 （免费选项 - Netlify）

2. Firebase

   =>

   Authentication

   =>

   Settings

   =>

   Authorized Domains

3. 单击添加域
4. 如果域是

   https://example.com

   ，则添加 2 个域（

   www.example.com

   和

   example.com

   ）
5. 从托管网站重试，它应该可以工作

/////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////// ////////////////////

更新的工作代码：

发送一次性密码：

const [phoneNumber, setPhoneNumber] = useState("");
const [verificationCode, setVerificationCode] = useState("");
const [verificationId, setVerificationId] = useState("");
const recaptchaRef = useRef(null);

const handleSendOtp = () => {

        if (recaptchaRef.current) {
            recaptchaRef.current.innerHTML = "<div id='recaptcha-verifier'></div>"
        }

        const verifier = new RecaptchaVerifier(auth, "recaptcha-verifier", {
            size: "invisible"
        });

        signInWithPhoneNumber(auth, phoneNumber, verifier)
        .then(confirmationResult => {
            setVerificationId(confirmationResult.verificationId);
        })
        .catch(error => {
            console.error("Error Sending OTP", error);
        });
    }

验证一次性密码：

    const handleVerifyOTP = () => {
        const credentials = PhoneAuthProvider.credential(verificationId, verificationCode);
        signInWithCredential(auth ,credentials)
        .then(userCredential => {
            console.log("User logged in", userCredential);
            console.log("Your phone number: ", userCredential.user.phoneNumber);
        })
        .catch(error => {
            console.error("huh", error);
        })
    }

验证一次性密码：

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

const firebaseConfig = {
  //web config
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export default app;

已安装的软件包：

@firebase/app : 0.10.5
@firebase/auth : 1.7.4
firebase : 10.12.2