---
# System prepended metadata

title: Firebase 使用指南
tags: [前端工程]

---

## Firebase 使用指南

Firebase 是 Google 提供的一套後端服務，適合開發應用程式，特別是移動和網頁應用。以下介紹如何使用 Firebase，涵蓋專案設置、身份驗證和數據庫操作等內容。

#### 1. 設定 Firebase 專案
- **建立專案**：
  1. 登入 [Firebase 控制台](https://firebase.google.com/)。
  2. 點擊「新增專案」，並按照指示命名和設置專案。
  
- **添加 Firebase SDK**：  
  在 HTML 中引入 Firebase SDK：
  ```html
  <script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-database.js"></script>
  ```

- **初始化 Firebase**：
  在 JavaScript 中初始化 Firebase：
  ```javascript
  const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
  };
  firebase.initializeApp(firebaseConfig);
  ```

#### 2. 使用 Firebase 身份驗證
- **註冊用戶**：
  使用電子郵件和密碼註冊用戶：
  ```javascript
  firebase.auth().createUserWithEmailAndPassword(email, password)
      .then((userCredential) => {
          const user = userCredential.user;
      })
      .catch((error) => {
          console.error(error.message);
      });
  ```

- **登入用戶**：
  使用電子郵件和密碼登入：
  ```javascript
  firebase.auth().signInWithEmailAndPassword(email, password)
      .then((userCredential) => {
          const user = userCredential.user;
      })
      .catch((error) => {
          console.error(error.message);
      });
  ```

- **監聽登入狀態變化**：
  ```javascript
  firebase.auth().onAuthStateChanged((user) => {
      if (user) {
          // 用戶已登入
      } else {
          // 用戶未登入
      }
  });
  ```

#### 3. 使用 Firebase 實時數據庫
- **寫入數據**：
  使用 `set`、`update` 和 `push` 方法寫入數據：
  ```javascript
  const database = firebase.database();

  // 設定資料
  database.ref('users/').set({
      username: "exampleUser",
      email: "user@example.com"
  });

  // 更新資料
  database.ref('users/exampleUser').update({
      age: 30
  });

  // 添加資料
  database.ref('users/').push({
      username: "newUser"
  });
  ```

- **讀取數據**：
  ```javascript
  database.ref('users/').once('value')
    .then((snapshot) => {
        const data = snapshot.val();
        console.log(data);
    });
  ```

- **即時監聽數據變化**：
  ```javascript
  database.ref('users/').on('value', (snapshot) => {
      const data = snapshot.val();
      console.log(data);
  });
  ```
## Firebase 電子郵件登入設定步驟

### 1. 開啟 Firebase 控制台
- 登入 [Firebase 控制台](https://console.firebase.google.com/)。
- 創建一個新的專案或選擇現有的專案。

### 2. 啟用電子郵件登入
1. 在左側選單中，點擊「**Authentication**」。
2. 點擊「**登入方式**」標籤。
3. 找到「**電子郵件/密碼**」選項，點擊鉛筆圖示進入編輯模式。
4. 啟用電子郵件/密碼登入功能，然後點擊「**儲存**」。

### 3. 實作註冊與登入功能
在你的應用程式中，使用 Firebase 的 JavaScript SDK 來實作電子郵件登入功能。

#### 註冊用戶
```javascript
firebase.auth().createUserWithEmailAndPassword(email, password)
    .then((userCredential) => {
        // 註冊成功
        const user = userCredential.user;
        console.log("註冊成功:", user);
    })
    .catch((error) => {
        console.error("註冊失敗:", error.message);
    });
```

#### 登入用戶
```javascript
firebase.auth().signInWithEmailAndPassword(email, password)
    .then((userCredential) => {
        // 登入成功
        const user = userCredential.user;
        console.log("登入成功:", user);
    })
    .catch((error) => {
        console.error("登入失敗:", error.message);
    });
```

### 4. 驗證用戶狀態
使用以下代碼來監聽用戶的登入狀態：
```javascript
firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        // 用戶已登入
        console.log("當前用戶:", user);
    } else {
        // 用戶未登入
        console.log("無用戶登入");
    }
});
```

### 5. 處理密碼重設與驗證郵件
發送重設密碼郵件：
```javascript
firebase.auth().sendPasswordResetEmail(email)
    .then(() => {
        console.log("已發送重設密碼郵件");
    })
    .catch((error) => {
        console.error("發送失敗:", error.message);
    });
```