firebase登录验证
有时我们出于多种原因想要实施身份验证,而又不想仅为身份验证创建API,或者我们不是后端开发人员。 这就是Firebase提供易于使用的身份验证后端服务的原因。 它支持使用密码,电话号码,流行的社交网络(例如Google,Facebook和Twitter等)进行身份验证。
要求
首先,我们必须有一个Google帐户( Gmail帐户 )。 如果您没有帐户,请在开始之前创建帐户。
Firebase配置
我们必须去他们的网站 ,如果我们没有登录,请登录,然后单击Get Started
。
然后,我们点击Add project
。
我们必须为我们的项目起个名字。 在本教程中,我将其命名为react-authentication。
单击continue
。
对于这个项目,我将禁用Google Analytics(分析)。 它没有任何影响,因此您可以根据需要启用它。
最后,我们单击Create project
。
当我们看到此图像时,表明我们已准备好出发。
单击Continue
。
Firebase不仅适用于Web应用程序,还适用于移动设备和统一游戏。 但是在这种情况下,我们将创建一个React Web应用程序。
单击标记的图标。
现在,我们必须为我们的应用程序起一个昵称。 不管我们使用哪个昵称,毕竟,我们是唯一会看到它的人。 我建议您给与该项目相关的昵称。
单击Register app
。
几秒钟后,Firebase将为我们提供一个代码,然后将其放入项目中。
现在,我们必须转到authentication
区域。
点击Set up sign-in method
。
我们可以看到我们有很多身份验证类型,但是在本教程中,我们仅介绍Email/Password
方法。
在单击Email/Password
方法之前,我们可以在下面看到我们拥有授权的域。 默认情况下有3个,但是您可以添加更多域。
现在,我们将仅启用第一个选项。 第二种选择就像它说的那样。 当我们尝试登录时,谷歌将向我们发送指向我们电子邮件的链接以进行登录。
就是这样。 我们完成了Firebase配置。
React App配置
首先,我们必须安装将帮助我们的依赖项:
npm i --save firebase reactfire@next
为了使所有内容井井有条,我们将在src
文件夹中创建一个名为firebaseConfig.js
的文件。 在firebaseConfig.js文件内部,我们将其添加为json代码并导出。
// src/firebaseConfig.js
const firebaseConfig = {
apiKey : "AIzaSyBSo7NZouVtr-G36eLbFGjXv_IN7cBBn30" ,
authDomain : "react-authentication-2c83f.firebaseapp.com" ,
databaseURL : "https://react-authentication-2c83f.firebaseio.com" ,
projectId : "react-authentication-2c83f" ,
storageBucket : "react-authentication-2c83f.appspot.com" ,
messagingSenderId : "194995380667" ,
appId : "1:194995380667:web:5e5dd9db459ab8a21da49e"
}
export default firebaseConfig;
现在,要运行Firebase,我们必须用FirebaseAppProvider包装整个应用程序,并且此提供程序需要接收我们之前创建的firebase配置。
import React, { Suspense } from 'react' ;
import ReactDOM from 'react-dom' ;
import { FirebaseAppProvider } from 'reactfire' ;
import firebaseConfig from './firebaseConfig' ;
import App from './App' ;
import './index.css' ;
ReactDOM.render(
< FirebaseAppProvider firebaseConfig = {firebaseConfig} >
<Suspense fallback={<h3>Loading...</h3>}>
<React.StrictMode>
<App />
</React.StrictMode>
</Suspense>
</FirebaseAppProvider> ,
document.getElementById('root')
);
如果您不知道React中的悬浮成分是什么,可以在此处进行检查。
要查看一切是否正常,我们可以导入useFirebaseApp
并执行console.log()
来查看Web控制台中发生的情况。 我们必须添加userFirebaseApp
我们App.js
文件
import React from 'react' ;
import './App.css' ;
import { useFirebaseApp } from 'reactfire' ;
function App () {
const firebase = useFirebaseApp();
console .log(firebase);
return (
// Some code
);
}
export default App;
我们可以删除之前创建的console.log(),以便继续本教程。
认证方式
注册
首先,让我们创建一个Sign Up
组件。
import React, { useState } from 'react' ;
import './Signup.css' ;
const Signup = () => {
// User State
const [user, setUser] = useState({
nickname : '' ,
email : '' ,
password : '' ,
error : '' ,
});
// onChange function
const handleChange = e => {
setUser({
...user,
[e.target.name]: e.target.value,
error : '' ,
})
};
// Submit function (Create account)
const handleSubmit = e => {
e.preventDefault();
// Sign up code here.
}
return (
<>
<h1>Sign up</h1>
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Nickname" name="nickname" onChange={handleChange}/><br />
<input type="text" placeholder="Email" name="email" onChange={handleChange}/><br />
<input type="password" placeholder="Password" name="password" onChange={handleChange}/><br />
<button type="submit">Sign Up</button>
</form>
{user.error && <h4>{user.error}</h4>}
</>
)
};
export default Signup;
让我们解释一下:
- 首先,我们使用React Hooks创建用户状态。 如果您不熟悉Reac挂钩,可以在此处查看文档。
- 我们具有这个
handleChange
函数,当用户在输入中进行更改时,该函数会更新状态。 还重置错误消息以将其隐藏。 -
handleSubmit
函数是我们将信息发送到Firebase的地方。 -
nickname
输入是可选的,我们将在下一步中了解原因。
这就是结果。 我添加了较小的样式,以便您的表单看起来不同。
现在,我们将完成handleSubmit
函数。
import React, { useState } from 'react' ;
import { useFirebaseApp } from 'reactfire' ;
import 'firebase/auth'
import './Signup.css' ;
const Signup = () => {
// Previous code...
// Import firebase
const firebase = useFirebaseApp();
// Submit function (Create account)
const handleSubmit = async (e) => {
e.preventDefault();
// Sign up code here.
await firebase.auth().createUserWithEmailAndPassword(user.email, user.password)
.then( result => {
// Update the nickname
result.user.updateProfile({
displayName : user.nickname,
})
}).catch( error => {
// Update the error
console .log(error);
setUser({
...user,
error : error.message,
})
})
}
return (
// Previous code...
)
};
export default Signup;
- 首先,我们必须导入
useFirebaseApp
和useFirebaseApp
firebase/auth
,以便我们可以开始创建用户。 - 分配
useFirebaseApp
到firebase
常量。 - handleSubmit函数必须是异步/等待函数。
-
firebase.auth().createUserWithEmailAndPassword()
只会接收电子邮件和密码,就像它在名称中所说的那样。 这就是为什么nickname
是可选的。 - 如果添加了昵称选项,则必须更新配置文件,这就是为什么我们使用
user.updateProfile()
。 这将接收到一个带有2个可选参数的对象:displayName
用于更新用户名)和photoURL
用于添加图片头像)。 在本教程中,我们仅使用displayName
。 - 最后,在
catch
部分,我们只是更新错误消息。
有了这段代码,我们可以说已经完成了,是的,我们得到了想要的东西,但是我们可以对其进行改进。
现在,当我们注册时,我们不知道电子邮件是否有效,Firebase也会自动登录我们,也许我们不想要该handleSubmit
,所以让我们编辑handleSubmit
函数。
const handleSubmit = async (e) => { e.preventDefault(); // Sign up code here. await firebase.auth().createUserWithEmailAndPassword(user.email, user.password) .then( result => { // Update the nickname result.user.updateProfile({ displayName : user.nickname, }); // URL of my website. const myURL = { url : 'http://localhost:3000/' } // Send Email Verification and redirect to my website. result.user.sendEmailVerification(myURL) .then( () => { setUser({ ...user, verifyEmail : `Welcome ${user.nickname} . To continue please verify your email.` , }) }) .catch( error => { setUser({ ...user, error : error.message, }) }) // Sign Out the user. firebase.auth().signOut(); }).catch( error => { // Update the error setUser({ ...user, error : error.message, }) }) }
我们添加了3个新功能。
-
myURL
是一个包含我网站网址的对象。 -
result.user.sendEmailVerification()
发送电子邮件验证,并且我们通过myURL
对象添加了一个链接以将我们重定向到我们的网站。 -
firebase.auth().signOut()
已将我们注销,因此我们不会自动登录并等待电子邮件确认。
登录
登录很容易。 其实与之前的代码相似。
import React, { useState } from 'react' ; import { useFirebaseApp } from 'reactfire' ; import 'firebase/auth' import './Signup.css' ; const Login = () => { // User State const [user, setUser] = useState({ email : '' , password : '' , error : '' , }); // onChange function const handleChange = e => { setUser({ ...user, [e.target.name]: e.target.value, error : '' , }) }; // Import firebase const firebase = useFirebaseApp(); // Submit function (Log in user) const handleSubmit = e => { e.preventDefault(); // Log in code here. firebase.auth().signInWithEmailAndPassword(user.email, user.password) .then( result => { if (!result.user.emailVerified) { setUser({ ...user, error : 'Please verify your email before to continue' , }) firebase.auth().signOut(); } }) .catch( error => { // Update the error setUser({ ...user, error : error.message, }) }) } return ( <> <h1>Log In</h1> <form onSubmit={handleSubmit}> <input type="text" placeholder="Email" name="email" onChange={handleChange}/><br /> <input type="password" placeholder="Password" name="password" onChange={handleChange}/><br /> <button type="submit">Log in</button> </form> {user.error && <h4>{user.error}</h4>} </> ) }; export default Login;
最相关的更改是:
- 我们只有2个输入:电子邮件和密码。
- 代替使用
createUserWithEmailAndPassword()
,我们使用signInWithEmailAndPassword()
。 - 我们必须验证电子邮件是否已确认。
登出
注销只是一个仅在用户连接时才显示的按钮。
import React from 'react' ; import { useFirebaseApp } from 'reactfire' ; import 'firebase/auth' const Logout = () => { // Import firebase const firebase = useFirebaseApp(); // Log out function const handleClick = () => { firebase.auth().signOut(); } return ( <> <button type="button" onClick={handleClick}>Log Out</button> </> ) }; export default Logout;
我们使用
firebase.auth().signOut()
。 我们用来防止自动登录的相同功能。实际上,我们已经完成了。
如果我们想知道,如果用户连接与否,我们可以使用
useUser
功能从reactfire
。import React from 'react' ; import Signup from './Signup' ; import Login from './Login' ; import Logout from './Logout' ; import { useUser } from 'reactfire' ; import './App.css' ; function App () { const user = useUser(); return ( < div className = "App" > { user && <Logout /> } { !user && <> <Signup /> <Login /> </> } </ div > ); } export default App;
我将其放在App文件中以根据用户是否连接来渲染组件。
您可以在此处查看整个回购。
-
翻译自: https://hackernoon.com/authentication-in-react-with-firebase-qc3x3vjl
firebase登录验证