<aside> 🐢

可能會被收費，需要特別注意

firebase(1/5)-開始使Firebase firebase(2/5)-Cloud Firestore

firebase(3/5)-讀取寫入Firestore

</aside>

Introducing Firebase Authentication

以前寫得的文章，有些懶得重寫會在這裡面>>

[第三方授權登入]Firebase Authentication

官網教學文件

開始使用 Cloud Firestore  |  Firebase

1.專案目錄檔案架構說明

使用的時候會需要在firebase console介面設定，以及實作在專案中。

以下會針對官方文件範例和chartGPT生成的程式再實作一次，這一篇的程式碼可參考以下commit

https://github.com/ingridkao/firebaseTest2025/commit/c945534b7d20fa44b96438af07da1f2fee50dc13

https://github.com/ingridkao/firebaseTest2025/commit/1893b88912364fcd212d5901fbe824ebdd3d477e

藍色文字: 以下範例程式碼會使用到的檔案

src/
  **lib/**
    firebase.js          // Firebase 初始化
  **composables/**
    useAuth.js           // 登入、監聽使用者
    useChat.js           // 訊息監聽、送訊息、分頁
  **stores/**
    authStore.js         // 使用者資料
  **components/**
    Chat.vue             // 訊息列表 + 輸入框
  **views/**
    ChatView.vue
    LoginView.vue
  **router/**
    index.js
main.js

2.什麼是Authentication?

Authentication（身份驗證）是指系統用來確認「你是誰」的過程。

💡 與 Authorization 的差別，例如：

進入公司大樓（Authentication：保全確認你的員工證），但進某些房間還需要特殊許可（Authorization：確認你有權限進入）。

Firebase 提供的 Authentication 是一套完整的「使用者身份驗證服務」，

讓你在網站或 App 中快速、安全地加入登入功能，而不需要自己從零開發驗證系統（包含密碼儲存、加密、OAuth 流程等）。

image.png

Firebase Authentication 登入流程

可以把這段登入流程用以下方式說明：

  1. 走到櫃台（登入請求）
  2. 出示證件（帳號密碼、Google 帳號、手機 OTP…）
  3. 櫃台核對資料庫（Firebase 驗證伺服器）
  4. 驗證通過後，櫃台會給你一張 通行證（ID Token）
  5. 就能憑這張通行證去大樓各處（Firestore、Storage…），但能去哪裡，還要看門口的警衛（Security Rules）有沒有放行

通行證ID Token是什麼?

ID Token 內容會包含以下資訊（存放在 Payload 裡）：