iT邦幫忙

2026 iThome 鐵人賽

DAY 14
0
自我挑戰組

和AI學習gcp - 建立對話代理系列 第 14

Day 14 Firebase Auth與身份驗證整合

  • 分享至 

  • xImage
  •  

為什麼要 Firebase Auth?

之前我們設定的Auth, 是gcp上使用資源的身份檢核, 而firebase auth, 則是檢查來自client side的身份是否合法

情境 使用何種 Auth
Cloud Run A 呼叫 Cloud Run B IAM Auth(Service Account Token)
終端使用者從瀏覽器打 BFF Firebase Auth(User ID Token)

Firebase Auth 是 GCP 的 managed 終端使用者身分驗證服務。使用者登入後會拿到一個 Firebase ID Token(JWT),BFF 在 server 端驗證此 JWT 的合法性。

Firebase 本質上是 Google 專為移動與網頁開發者設計的 平台 (BaaS - Backend as a Service)

  • 與 GCP 的關係:你可以把 Firebase 想像成 GCP 的「前端友善版介面」。
    • 當你建立一個 Firebase 專案時,底層其實就是一個 GCP Project
    • 它們共用同一個帳單、同一個資源池(例如 GCS, Cloud Functions)。
  • Firebase Auth 的定位:它是 GCP Identity Platform 的簡化包裝版,專門處理使用者的「註冊、登入、工作階段管理」。

使用firebase的好處

A. 零成本實現 Google 登入 (OAuth 2.0)

  • 傳統做法:你需要自己去 Google Cloud Console 申請 Client ID、寫導向頁面、處理驗證後的 Callback、換取 Access Token。
  • Firebase 做法:在後台點一下「啟用 Google 登入」,前端呼叫 signInWithPopup 即可。

B. 自動化 Token 管理(這對 Cloud Run 最重要)

  • 當用戶登入成功後,Firebase 會自動生成一個 JWT (JSON Web Token)
  • 這個 Token 會自動重新整理 (Auto-refresh),用戶不需要頻繁重新登入。
  • 你的前端(React)只需要把這個 Token 傳給 Cloud Run (BFF),後端就能安全地識別用戶身分。

C. $0 成本起步

  • 免費額度:Google 登入、Email 登入等主要功能,在 50,000 MAU (每月活躍用戶) 以下幾乎都是 $0

D. 跨平台身分統一

  • 雖然你目前是做網頁版,但如果你未來想擴充到 Flutter (Mobile) 或是桌面版,同一個 Firebase 專案可以識別同一個用戶。這對「銀行知識庫」這種可能需要跨裝置存取的應用非常重要。

E. 內建安全過濾(防禦機制)

  • 它內建了防止暴力破解、異常登入偵測等功能。你不需要自己寫「登入失敗 5 次鎖定帳號」的邏輯,Google 都幫你做好了。

本日需要的實作

  1. 完成firebase console設定, 開啟google sign-in 記下firebaseConfig與proj資訊

  2. 建立client app

  3. BFF 驗證流程 - 驗證登入者屬於白名單

  4. terraform調整 - bff image, cloud run支援firebase client flow模式

  5. 設定firebase console

在這邊需要去到firebase console: https://console.firebase.google.com/

做設定 因為firebase提供一些gcp沒有的快速自動化 比較方便

建立新專案, 命名採用和gcp相同proj, 方便管理

https://ithelp.ithome.com.tw/upload/images/20260814/20154359YGYu83e6YD.png

建立過程可以關閉google analytic功能 用不到

注意專案名稱輸入後 會產生有後綴的firebase project id, 這在之後測試和設定cloud run會用到

建立後點選 安全性 > authentication 開始使用

https://ithelp.ithome.com.tw/upload/images/20260814/201543591a9gEXHBFW.png

供應商選google

https://ithelp.ithome.com.tw/upload/images/20260814/20154359w99OJiFn02.png

右上角勾選啟用, 名稱自由填個好辨識的 支援郵件選自己 並儲存

https://ithelp.ithome.com.tw/upload/images/20260814/20154359nvP0Ij5e9s.png

接著選擇左側 設定 > 一般

https://ithelp.ithome.com.tw/upload/images/20260814/20154359xeysNN6Ekl.png

頁面滑到下方 應用程式選擇網頁

https://ithelp.ithome.com.tw/upload/images/20260814/20154359tbxBElyd3s.png

專案名稱自由填, 不需要託管(我們會託管在gcp)

https://ithelp.ithome.com.tw/upload/images/20260814/20154359wuIrzldFvd.png

註冊後會顯示一段config用來啟動firebase服務, 待會client app會用到先複製存到記事本之後會用到

https://ithelp.ithome.com.tw/upload/images/20260814/201543590HUtN1Liel.png

前往控制台

去到authentication 的setting頁籤

確認authorized domains有localhost(用於本地測試)

之後client app部署到cloud run後 會再加上cloud run url(才能允許來自client的domain)

https://ithelp.ithome.com.tw/upload/images/20260814/20154359ToyWpwcbSL.png

在此補充 firebase 的apikey 不是密鑰而是公開識別碼, 主要是靠security rules, authorized domains提供安全性

  1. 建立client app

我們會在 /client 中新增index.html 建立一個簡易的網頁來觸發google登入 顯示取得token內容

把剛才複製的config貼入index中

  1. 建立BFF驗證邏輯

會在 /bff 中實作 /health /query 來檢查服務健康 以及驗證token (請參照bff中實作)

  1. 開兩個terminal分別在本地啟動bff與client

訪問localhost網址

應該就可以跑google login, 和打bff的query api

https://ithelp.ithome.com.tw/upload/images/20260814/20154359huneQT8XLD.png

完成local測試後

就可以打包 同步上gcp了

跑新增的 make build-push-bff 完成bff打包

再跑 make up 同步上GCP

注意 今天只有把bff的image推上cloud run, client還沒部署 所以firebase的authentication > domains還不用更新client部署後的url


上一篇
Day13: Artifact Registry 遷移
系列文
和AI學習gcp - 建立對話代理14
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言