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和useFirebaseAppfirebase/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登录验证
8607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
