我正在尝试对我的反应应用程序进行Google身份验证。但不像我预期的那样运作良好。当用户单击Header上的登录按钮时,我想显示弹出窗口。需要帮助。
import firebase from 'firebase'
const config = {
apiKey: "-",
authDomain: "-",
projectId: "-",
}
firebase.initializeApp(config);
export default firebase;
export const auth = firebase.auth(); //the firebase auth namespace
export const googleAuth = firebase.auth.GoogleAuthProvider();
googleAuth.addScope('email');
googleAuth.addScope('profile');
这是我的firebase配置。
import React from 'react';
import { Link } from 'react-router-dom';
import { auth, googleAuth } from '../firebase/conf.js'
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
user: null
};
this.handleLogin = this.handleLogin.bind(this);
this.handleLogout = this.handleLogout.bind(this);
}
handleLogin() {
auth.signInWithPopup(googleAuth)
.then((result) => {
console.log(result);
const user = result.user;
this.setState({
user
});
});
}
handleLogout() {
auth.signOut()
.then(() => {
this.setState({
user: null
});
});
}
render() {
const loginButton = (
<li>
<i onClick={this.handleLogin} className="material-icons">vpn_key</i>
</li>
);
const logoutButton = (
<li>
<a>
<i className="material-icons">lock_open</i>
</a>
</li>
);
return (
<nav>
<div className="nav-wrapper blue darken-1">
<Link to ="/" className="brand-logo center">{APP_NAME}</Link>
<ul>
<li><a><i className="material-icons">search</i></a></li>
</ul>
<div className="right">
<ul>
{ this.state.user ? logoutButton : loginButton }
</ul>
</div>
</div>
</nav>
);
}
}
export default Header;
和我的Header组件。
当我使用此代码运行我的应用程序时,它只显示TypeError: this.addScope is not a function
错误。这是详细信息。
auth.js:136 Uncaught TypeError: this.addScope is not a function
at Function.Bg (auth.js:136)
at Function.a [as GoogleAuthProvider] (auth.js:292)
at Object../src/firebase/conf.js (conf.js:17)
at __webpack_require__ (bootstrap 68280f0003671cc3e57c:669)
at fn (bootstrap 68280f0003671cc3e57c:87)
at Object../src/components/Header.js (Authentication.js:118)
at __webpack_require__ (bootstrap 68280f0003671cc3e57c:669)
at fn (bootstrap 68280f0003671cc3e57c:87)
at Object../src/components/index.js (index.js:1)
at __webpack_require__ (bootstrap 68280f0003671cc3e57c:669)
at fn (bootstrap 68280f0003671cc3e57c:87)
at Object../src/containers/Home.js (App.js:13)
at __webpack_require__ (bootstrap 68280f0003671cc3e57c:669)
at fn (bootstrap 68280f0003671cc3e57c:87)
at Object../src/containers/index.js (index.js:1)
at __webpack_require__ (bootstrap 68280f0003671cc3e57c:669)
at fn (bootstrap 68280f0003671cc3e57c:87)
at Object../src/index.js (conf.js:20)
at __webpack_require__ (bootstrap 68280f0003671cc3e57c:669)
at fn (bootstrap 68280f0003671cc3e57c:87)
at Object.0 (styles.css?1cd7:26)
at __webpack_require__ (bootstrap 68280f0003671cc3e57c:669)
at bootstrap 68280f0003671cc3e57c:715
at bundle.js:719
我该如何解决这个问题?真的需要你的帮助。
永远感谢!
答案 0 :(得分:2)
如GoogleAuthProvider
示例所示,您需要使用新实例初始化auth提供程序。我认为您应该添加范围,然后导出AuthProvider。
实施例
import firebase from 'firebase'
const config = {
apiKey: "-",
authDomain: "-",
projectId: "-",
}
firebase.initializeApp(config);
export default firebase;
export const auth = firebase.auth(); //the firebase auth namespace
const googleAuth = new firebase.auth.GoogleAuthProvider();
googleAuth.addScope('email');
googleAuth.addScope('profile');
export googleAuth;