javascript - 在 Reactjs 中使用 firebase 电话身份验证时出现“firebaseApp.auth.RecaptchaVerifier 不是构造函数”错误
问题描述
我正在从已完成所有 firebase 设置的文件中导入“firebaseApp”,并且我已经实现了电子邮件、谷歌和 Facebook 身份验证,但是当我实现电话号码身份验证时,ReCaptcha 不是构造函数,我正在使用 ReactJs 功能组件。是否有任何方法可以在没有 ReCaptcha 的情况下实现电话号码身份验证,或者如果没有,我该如何解决该错误。
火力基地的设置
import firebase from 'firebase/app';
import 'firebase/auth'
import 'firebase/firestore';
// Web app's Firebase configuration
var firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
export const firebaseApp = firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();
export const db = firebase.firestore();
export const google_provider = new firebase.auth.GoogleAuthProvider();
export const facebook_provider = new firebase.auth.FacebookAuthProvider();
这是我将数字作为用户输入并发送 OTP 进行验证的地方,但示例代码号是硬编码的。
import { firebaseApp, auth } from '../../../firebase/firebasesetup'
function Form() {
const setuprecaptcha = () => {
window.recaptchaVerifier = new firebaseApp.auth.RecaptchaVerifier('recaptcha-container',
{
'size': 'invisible',
'callback': function (response) {
console.log("captcha resolved");
// sendsms();
}
});
}
const sendsms = () => {
setuprecaptcha();
var phoneNumber = '+918220310506';
var appVerifier = window.recaptchaVerifier;
auth.signInWithPhoneNumber(phoneNumber, appVerifier)
.then(function (confirmationResult) {
window.confirmationResult = confirmationResult;
}).catch(function (error) {
alert("not sent")
});
}
return (
<input type="text" placeholder="Mobile" value={mob}
onChange={e => setMob(e.target.value)} />
<div id="recaptcha-container"></div>
<button onClick={sendsms} id='sign-in-button'>Send otp</button>
)
}
export default Form
解决方案
好的,所以我正在回答我自己的问题。这种看起来很奇怪,但如果你们中的任何人都面临与我相同的问题。
我需要在 firebase_setup 文件中解决两件事,并在 React 功能组件中添加主要功能。(共 3 次更新)
firebase_setup 文件
首先
import firebase from 'firebase';
而不是import firebase from 'firebase/app';
第二
firebase.initializeApp(firebaseConfig); export const firebaseApp = firebase
反应功能组件
import { firebaseApp} from './firebase_setup';
const sendsms = () => {
//If you want to make the recaptcha invisible
var recaptcha = new firebaseApp.auth.RecaptchaVerifier('recaptcha-container', {
'size': 'invisible'
});
//If you want to make the recaptcha visible
var recaptcha = new firebaseApp.auth.RecaptchaVerifier('recaptcha-container');
//Your phone number with the country code
var number = '+**********';
//actual code begins here
auth.signInWithPhoneNumber(number, recaptcha).then(function (e) {
var code = prompt("enter the code sent to your mobile number");
if (code === null) return;
e.confirm(code).then(function (result) {
alert(result.user + ' verified ')
}).catch(function (error) {
alert('Could not verify,Please try again');
});
}).catch(function (error) {
alert('Please try again.We were unable to reach your phone.Select the correct code and the phone number');
});
}
推荐阅读
- php - PHP DateTime 差异倒计时
- drjava - 为什么我只有一个公共类和类文件时说我的公共类没有定义
- javascript - 检测 iOS 自动完成建议按键?
- django - 姜戈。如何防止其他用户编辑和删除我的列表?
- css - 在手机/平板电脑上保持定位(响应式)
- c# - 最佳实践:实体框架:如果使用存储库和 UoW 模式,在哪里进行连接
- c# - 如何在 C# 应用程序中将日志发送到 Cloud Watch
- html - .container 在 CSS、Electron 或 Chromium 中是否有特殊含义?
- python - 我一直遇到解码错误,我不知道如何修复它
- java - 如何为自定义弹簧批处理阅读器编写junits