' TypeError:无法读取未定义的属性(读取‘appVerificationDisabledForTesting’)'
2023-08-03
3720
我试图在 react+vite 中通过电话号码使用 firebase 实现 OTP 身份验证。我收到此错误: ' TypeError: 无法读取未定义的属性(读取“appVerificationDisabledForTesting”)'
这是我在代码中实现的方式
// firebaseConfig.jsx file
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth(firebaseApp)
export { firebaseApp, auth };
// signup.jsx component page
import { auth } from '../../../../firebaseConfig/firebaseConfig';
import { RecaptchaVerifier, signInWithPhoneNumber } from 'firebase/auth';
const [formValues, SetValues] = useState({
name: '',
email: '',
phone: '',
password: '',
confirmPassword: ''
})
const [confirmationResult, setConfirmationResult] = useState(null)
const handleSendOtp = async () => {
try {
const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
size: 'invisible',
callback: () => {
console.log('recaptcha resolved..')
}
}, auth)
signInWithPhoneNumber(formValues.phone, recaptchaVerifier).then((result) => {
setConfirmationResult(result);
alert("code sent")
setshow(true);
})
.catch((err) => {
alert(err);
window.location.reload()
});
} catch (error) {
flag = false
console.log('error sending otp ' + error)
}
}
我给 recaptcha-container div 如下:
return(
<>
<div id='recaptcha-container'></div>
*//and here,im conditionally rendering the component based on the state 'confirmationResult'
*
{confirmationResult===null?(<component1.....lines>):(<component2.....lines>)}
</>
)
有人能帮我找到问题吗?
我检查了我的导入和导出语句是否有任何问题,初始化了 firebase 应用程序,我参考了几个文档,但我找不到问题是什么。'recaptchaVerifier' 有什么问题吗?或者为 'recaptcha-container' 设置 div。
2个回答
auth 是第一个参数,而不是最后一个。
因此,不是这个
const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
size: 'invisible',
callback: () => {
console.log('recaptcha resolved..')
}
}, auth)
应该是
const recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
size: 'invisible',
callback: () => {
console.log('recaptcha resolved..')
}
});
因此,参数顺序是 auth、容器、参数。无论出于何种原因,文档都使用您在发布此帖子时使用的顺序。
SABANTO
2023-12-18
我不确定这是否有帮助,但我在 Flutter 上遇到了类似的问题,这有所帮助,将其添加到 index.html,尽管有一些警告。
<head>
<script>window.flutterfire_web_sdk_version = '9.22.1';</script>
</head>
Prince Kelvin
2023-08-18