如何在 React 中使用 Firebase 进行身份验证和数据库

# Web 开发 # React

Firebase 是一个功能强大的平台，可提供实时数据库、身份验证和托管等后端服务。在本文中，我们将指导您将 Firebase 身份验证和 Firebase Firestore（实时 NoSQL 数据库）集成到 React 应用中。通过此集成，您可以轻松处理用户身份验证并存储/检索数据。

**先决条件**

**在开始之前，请确保您已：**

在 Firebase 控制台中设置的 Firebase 帐号和项目。

您的系统上安装了 Node.js 和 npm。

对 React 有基本的了解。

**第 1 步：设置 Firebase 项目**

**1. 转到 Firebase 控制台**：Firebase 控制台。

**2. 创建新项目**：点击“添加项目”并按照说明进行操作。

**3. 启用 Firebase 身份验证：**

在 Firebase 控制台中，选择您的项目。

导航到左侧边栏中的“身份验证”，然后单击“开始”。

启用您需要的登录方法（例如，电子邮件/密码、Google、Facebook）。

**4. 设置 Firestore：**

在 Firebase 控制台中，转到左侧边栏中的“Firestore 数据库”。

单击“创建数据库”并按照说明在测试模式或生产模式下设置 Firestore。

**5. 获取 Firebase 配置：**

从 Firebase 控制台转到项目设置（单击齿轮图标）。

在“您的应用”下，选择“Web”并复制包含 apiKey、authDomain、projectId 等的 Firebase 配置对象。

**第 2 步：在你的 React 应用中安装 Firebase SDK**

在您的 React 项目中，您需要使用 npm 安装 Firebase：

npm install firebase

**步骤 3：在你的 React 项目中设置 Firebase**

创建一个 firebase.js 文件来配置 Firebase 服务（身份验证和 Firestore）：

// src/firebase.js

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

// Add your Firebase config here
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};

// Initialize Firebase
const firebaseApp = firebase.initializeApp(firebaseConfig);

// Get Firestore database and Authentication instances
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();

export { db, auth };

此配置允许您访问 Firebase 的 Firestore 数据库和身份验证服务。

**步骤 4：在 React 中设置身份验证**

我们现在将使用 Firebase 身份验证设置一个简单的注册和登录表单。

**1. 创建注册组件**

// src/components/SignUp.js

import React, { useState } from 'react';
import { auth } from '../firebase';

const SignUp = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    try {
      await auth.createUserWithEmailAndPassword(email, password);
      setEmail('');
      setPassword('');
    } catch (error) {
      setError(error.message);
    }
  };

  return (
    
      Sign Up
      
         setEmail(e.target.value)}
          required
        />
         setPassword(e.target.value)}
          required
        />
        
      
      {error && {error}}
    
  );
};

export default SignUp;

**2. 创建登录组件**

// src/components/Login.js

import React, { useState } from 'react';
import { auth } from '../firebase';

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await auth.signInWithEmailAndPassword(email, password);
      setEmail('');
      setPassword('');
    } catch (error) {
      setError(error.message);
    }
  };

  return (
    
      Login
      
         setEmail(e.target.value)}
          required
        />
         setPassword(e.target.value)}
          required
        />
        
      
      {error && {error}}
    
  );
};

export default Login;

**步骤 5：在 React 中设置 Firestore 数据库**

现在身份验证已正常运行，让我们关注如何使用 Firestore 存储和检索数据。

**1. 将数据添加到 Firestore**

创建一个组件以将数据添加到 Firestore 数据库。

// src/components/AddData.js

import React, { useState } from 'react';
import { db } from '../firebase';

const AddData = () => {
  const [data, setData] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await db.collection('data').add({
        content: data,
        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
      });
      setData('');
    } catch (error) {
      console.error("Error adding document: ", error);
    }
  };

  return (
    
      Add Data
      
         setData(e.target.value)}
        />
        
      
    
  );
};

export default AddData;

**2. 从 Firestore 检索数据**

要显示存储在 Firestore 中的数据：

// src/components/DisplayData.js

import React, { useEffect, useState } from 'react';
import { db } from '../firebase';

const DisplayData = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const unsubscribe = db.collection('data')
      .orderBy('timestamp', 'desc')
      .onSnapshot(snapshot => {
        setData(snapshot.docs.map(doc => doc.data()));
      });
    return unsubscribe;
  }, []);

  return (
    
      Data
      {data.map((item, index) => (
        {item.content}
      ))}
    
  );
};

export default DisplayData;

**第 6 步：整合所有内容**

现在，你可以在 App.js 中组合这些组件来创建一个处理身份验证并存储/检索数据的简单 React 应用程序：

// src/App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import SignUp from './components/SignUp';
import Login from './components/Login';
import AddData from './components/AddData';
import DisplayData from './components/DisplayData';

function App() {
  return (
    
      
        
        
        
        
      
    
  );
}

export default App;

**结论**

Firebase 可让您非常轻松地将身份验证和数据库集成到您的 React 应用程序中。通过使用 Firebase 身份验证，您可以用最少的设置处理用户注册、登录和会话管理。Firebase Firestore 可让您实时存储和同步数据，而无需后端服务器。

现在您已经在 React 中为 Firebase 进行了基础设置，您可以继续探索高级 Firebase 功能（如云功能、文件存储等），以增强您的应用程序。

CLIS.CC

如何在 React 中使用 Firebase 进行身份验证和数据库

Sign Up

Login

Add Data

Data