我正在尝试创建一个使用“onSubmit”按钮来触发 handleSignUp()
的 React 应用程序。但是,每次我调用 handleSignUp()
时都会出现此错误
TypeError: _base__WEBPACK_IMPORTED_MODULE_2__.default.auth.RecaptchaVerifier is not a constructor
firebase 初始化 -base.js
import * as firebase from "firebase/app";
import "firebase/auth";
const app = firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_KEY,
authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID
});
export default app;
注册.js
import React, { Component } from "react";
import { withRouter } from "react-router";
import app from "./base";
class SignUp extends Component {
componentDidMount() {
window.recaptchaVerifier = new app.auth.RecaptchaVerifier(this.recaptcha, {
size: "normal",
callback: function(response) {
console.log("reCAPTCHA solved, allow signInWithPhoneNumber.");
},
"expired-callback": function() {
console.log("Response expired. Ask user to solve reCAPTCHA again.");
}
});
window.recaptchaVerifier.render().then(function(widgetId) {
window.recaptchaWidgetId = widgetId;
});
}
handleSignUp = async () => {
var phoneNumber = "+16505554567";
var appVerifier = new app.auth.RecaptchaVerifier("recaptcha-container");
try {
await app
.auth()
.signInWithPhoneNumber(phoneNumber, appVerifier)
.then(function(confirmationResult) {
window.confirmationResult = confirmationResult;
});
} catch (error) {
alert(error);
}
};
render() {
return (
<div ref={ref => (this.recaptcha = ref)}>
<h1>Sign up</h1>
<form onSubmit={this.handleSignUp}>
<button type="submit">Sign Up</button>
</form>
</div>
);
}
}
export default withRouter(SignUp);
并运行
var appVerifier = new app.auth.RecaptchaVerifier("recaptcha-container");
自动刷新网页
最佳答案
我在这上面花了 3 个小时,终于找到了问题所在。
当您初始化 Firebase 应用程序时
app.initializeApp(config);
然后您可以使用以下方法调用方法: app.auth() app.auth().createUserWithEmailAndPassword(email, password);
要创建 RecaptchaVerifier 实例,您必须使用: app.auth window.recaptchaVerifier = new app.auth.RecaptchaVerifier('captcha-container', {
'size': 'invisible'
});
关于javascript - React - Firebase - RecaptchaVerifier 不是构造函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58519055/