重火力点:错误(认证/ argument-error ) .... .... ...... ....

Question

import React,{useState} from "react";
import { Link } from "react-router-dom";
import Checkbox2 from "../Checkbox2";
import "./MacBookAir3.css";

import { initializeApp } from "firebase/app";
import { getAuth, RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
// Initialize the app using your firebase config
const firebaseConfig = {
....
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
'size': 'invisible',
'callback': (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
onSignInSubmit();
}
}, auth);
const phoneNumber = getPhoneNumberFromUserInput();
const appVerifier = window.recaptchaVerifier;
signInWithPhoneNumber(auth, phoneNumber, appVerifier)
.then((confirmationResult) => {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
window.confirmationResult = confirmationResult;
// ...
}).catch((error) => {
// Error; SMS not sent
// ...
});

function MacBookAir3(props) {
const {
overlapGroup5,
zoopla,
verificationCodeRe,
enterYourEmailTo,
inputType,
inputPlaceholder,
gdprAndPrivacy,
tC,
sendVerificationButton,
checkbox21Props,
checkbox22Props,
} = props;
const [phoneNumber, setPhoneNumber] = useState("");
const [expandForm, setExpandForm] = useState(false);
const handleSubmit = (event) => {
// prevent the default behavior of the form submission
event.preventDefault();

// Get the value of the phone number input field
const phoneNumber = document.querySelector("input[name='phone-number']").value;

// Update the phoneNumber state with the value entered by the user
//getPhoneNumberFromUserInput(phoneNumber);

// check if both checkboxes are ticked
const checkboxInputs = document.querySelectorAll("input[type='checkbox']");
if (!checkboxInputs || checkboxInputs.length !== 2 || !checkboxInputs[0].checked ||        !checkboxInputs[1].checked) {
// one or both checkboxes are not ticked, show an alert
alert("Please conrirm that you have read the Terms & Condition and GDPR by ticking both the  boxes");
return;
}

// phone-number input is filled in and both checkboxes are ticked, navigate to the link
window.location.href = "http://localhost:1234/macbook-air-4";
};


return (
<div className="container-center-horizontal">
<form className="macbook-air-3 screen"  id="form5" name="form5" action="form5"      method="post">
<div className="overlap-group5-3" style={{ backgroundImage: `url(${overlapGroup5})` }}>
<div className="authentication"></div>
<div className="overlap-group-7">
<div className="zoopla inter-bold-black-32px">{zoopla}</div>
<p className="verification-code-re inter-normal-black-24px">{verificationCodeRe}</p>
<p className="enter-your-email-to inter-normal-black-16px">{enterYourEmailTo}</p>
</div>
<div className="overlap-group1-5">
<input
ref={(input) => { this.phoneNumberInput = input; }}
className="email-1 inter-bold-silver-16px"
name="phone-number"
placeholder={inputPlaceholder}
type={inputType}
required
/>
</div>
<Link to="/macbook-air-7">
<div className="group-16">
<div className="overlap-group2-4">
<div className="rectangle-32"></div>
<div className="gdpr-and-privacy inter-bold-black-16px">{gdprAndPrivacy}</div>
</div>
</div>
</Link>
<Link to="/macbook-air-8">
<div className="group-17">
<div className="overlap-group3-2">
<div className="rectangle-32-1"></div>
<div className="tc inter-bold-black-16px">{tC}</div>
</div>
</div>
</Link>
<Checkbox2 className={checkbox21Props.className} />
<Checkbox2 className={checkbox22Props.className} />
<a href="javascript:SubmitForm('form5')">
<div className="group-6-2">
<div className="overlap-group4-1">
<button type="button" onClick={handleSubmit} className="button-2"></button>
<div id="recaptcha-container"></div>
<div className="send-verification-code inter-bold-white-16px">. {sendVerificationButton}</div>
</div>
</div>

</a>
</div>
</form>
</div>
);
}
export default MacBookAir3;

这里是错误，我得到

Firebase: Error (auth/argument-error)。扩展了3个堆栈框架。createErrorInternalnode_modules @firebase/认证/src/核心/util/delay.ts: 57:3_assertnode_modules @firebase/认证/src/核心/util/emulator.ts: 26:11新RecaptchaVerifierhttp://localhost:1234/index.3d214d75.js:253229:9▲扩充了3个堆叠框架。2 eymt.react/jsx-dev-runtime/__parcel_source_root/组件/MacBookAir3/index.jsx: 25:2722日|23 | const auth = getAuth(app);24 |

25 | window。recaptchaVerifier = new recaptchaVerifier ('recaptcha-container'， {'size': 'invisible';27 | 'callback': (response) =>｛28 |//reCAPTCHA解决，允许signInWithPhoneNumber

dependencies

"firebase": "^9.13.0",
"react": "^18.2.0",

我希望通过获取用户电话号码并在firebase认证的帮助下发送otp来验证用户。如果你能帮我解决这个问题，我将不胜感激。

Answer 1

将您的recaptchaVerifier放入函数

const verifyRecaptcha = () => {
const app = initializeApp(firebaseConfig);
const auth = getAuth(app); 
let recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {}, auth)
console.log(recaptchaVerifier)
}