iT邦幫忙

2025 iThome 鐵人賽

DAY 8
0
Modern Web

FlowNest系列 第 8

Day08_Firebase 後端設定(完成登入方式)

  • 分享至 

  • xImage
  •  

今天把Firebase接進現在的專案

1、建立Firebase專案

這裡登入google帳號後,建立新的專案,執行以下動作

  • 設定連結到Web App
    https://ithelp.ithome.com.tw/upload/images/20250919/20168406aqFXCiiOQy.png
  • 拿到firebaseConfig
    https://ithelp.ithome.com.tw/upload/images/20250919/20168406uyrLBMPnwF.png

2、在地端連結到firebase

在專案根目錄輸入指令
裝 CLI

npm i -g firebase-tools

登入 Google 帳號

firebase login

初始化

firebase init

初始化的指令輸入之後會跳出一些選項,我這樣選:
Firestore 位置:asia-east1
Auth Emulator 埠:9099(預設)
Emulator UI:Enable(埠 4000)
下載 Emulators:Yes

3、在專根目錄新增.env.local檔案

把在firebaseConfig拿到的金鑰搬進去,.env.local設定如下

VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...
VITE_FIREBASE_MEASUREMENT_ID=...

4、回到Firebase,啟用登入方式

我啟用了Google、電子郵件/密碼兩種方式
https://ithelp.ithome.com.tw/upload/images/20250919/201684064nlZwTTf4d.png

晚上吃火鍋

很久沒吃聚(王品的)了,記得上次吃是在新竹,應該有5年以上,詳細時間忘了,希望台北的也好吃,然後不要吃到太飽QQ
附上昨天晚上拍的貓咪照,他叫塔塔,是一隻很黏人的貓
https://ithelp.ithome.com.tw/upload/images/20250919/20168406hPtR1zAHdJ.jpg


上一篇
Day07_音樂修正&上線
下一篇
Day09_Firebase後端設定02(完成登入頁面)
系列文
FlowNest17
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言