如何在 React 中使用 Firebase 实现电子邮件注册和登录？

在构建全栈应用程序时，我们有时希望在不编写太多代码的情况下快速构建身份验证部分，那么Firebase就可以帮助我们，它提供了多种身份验证方法，如电子邮件密码、谷歌、Facebook 等。

以下是介绍如何在 React.js 中通过电子邮件 ID 和密码对用户进行身份验证的步骤。

入门：

第一步：进入firebase官网，设置Firebase项目，如下图。

设置 Firebase 项目

第 2 步：现在在身份验证部分启用电子邮件密码登录。

启用电子邮件/密码验证

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app firebase_login

第 2 步：通过运行以下命令安装所有必需的软件包：

npm i react-router-dom firebase

项目结构：

Firebase 代码：

文件名：firebase.js

创建一个firebase.js文件，我们将在其中初始化我们的 firebase 应用并将我们的 firebase 配置凭据粘贴到 firebaseConfig。

Javascript

import firebaseConfig from '../config';
import firebase from 'firebase/app';
  
const firebaseConfig = { 
    apiKey: "*******", 
    authDomain: "*******",  
    projectId: "*******", 
    storageBucket: "*******", 
    messagingSenderId: "*******",  
    appId: "*******",
    measurementId: "*******" 
};
  
firebase.initializeApp(firebaseConfig); 
export const auth = firebase.auth();

文件名：Auth.js

创建一个auth.js文件，我们将在其中为 firebase 创建注册和登录方法。

Javascript

import firebase from 'firebase/app';
import "firebase/auth"
import {auth} from './firebase'
  
export const register = async({email, password})=>{
    const resp = await firebase.auth()
      .createUserWithEmailAndPassword(email, password);
    return resp.user;
}
  
export const login = async({email, password})=>{
    const res = await firebase.auth()
      .signInWithEmailAndPassword(email, password);
    return res.user;
}

登录/注册组件：

文件名：Register.js

为注册组件创建一个Register.js文件，我们将在其中处理注册。

Javascript

import React, {useState} from 'react'
import {register} from './auth'
  
const Register = () => {
    const [form,setForm] = useState({
        email:'',
        password:''
    })
    const handleSubmit = async(e)=>{
        e.preventDefault();
        await register(form);
  
    }
    const InputFields = {
        padding:'0.5rem',
        margin:'0.8rem',
        borderRadius: '4px'
    }
    const ButtonStyle = {
        borderRadius: '4px',
        padding:'0.7rem',
        margin:'0.5rem'
    }
    return (
        

            
Register
            

            Email
             
            setForm({...form, email: e.target.value})} />
            

            Password
             
            setForm({...form, password: e.target.value})}/>
            

            
                Submit
            
            
        
  
    )
}
  
export default Register

文件名：Login.js

为我们将处理登录的登录组件创建一个Login.js文件。

Javascript

import React, {useState} from 'react'
import {login} from './auth'
  
const Login = () => {
    const [form,setForm] = useState({
        email:'',
        password:''
    })
    const handleSubmit = async(e)=>{
        e.preventDefault();
        await login(form);
  
    }
    const InputFields = {
        padding:'0.5rem',
        margin:'0.8rem',
        borderRadius: '4px'
    }
    const ButtonStyle = {
        borderRadius: '4px',
        padding:'0.7rem',
        margin:'0.5rem'
    }
    return (
        

            
Login
            

            Email
             
            setForm({...form, email: e.target.value})} />
            

            Password
             
            setForm({...form, password: e.target.value})}/>
            

            
                   Submit
            
            
        
  
    )
}
  
export default Login

在 App.js 中处理路由：-

文件名：App.js

Javascript

import {useState} from 'react';
import './App.css';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Login from './login';
import Register from './register';
  
function App() {
  
  return (
    
    

      
      
     
     
  );
}
  
export default App;

运行应用程序的步骤：

从项目的根目录使用以下命令运行应用程序。

npm start

输出：

• 我们现在可以在浏览器中访问http://localhost:3000/register路由，通过注册表单注册用户。

• 我们可以通过检查 firebase 的身份验证部分来验证用户是否已成功注册。

• 用户也可以在浏览器中通过http://localhost:3000/login路由登录。

现在我们的登录和注册组件已经完成，可以使用 firebase 轻松处理身份验证。