Vibe Coding + Firebase Authentication 打造順暢的註冊登入體驗
在 AI 輔助開發的「Vibe Coding」時代，雖然已經實現了從靈感到實踐的極致速度，但一個完整的應用程式，往往繞不開最基本也最關鍵的一環：「使用者帳號系統」，這篇教學將透過 Firebase Authentication，用最優雅、最快速的方式，在保持開發節奏的同時，替專案加上穩固的登入防護網。
快速導覽：
什麼是帳號登入？為什麼它不可缺？
登入機制不僅僅是一個輸入框，它更是「個人化體驗」的開端，所謂的帳號登入 ( Authentication ) 是確認「你是誰」的過程，這在現代應用中扮演了多重角色：
- 身份驗證：確定使用者的真實身份，是建立信任的第一步。
- 資料隔離：確保每個使用者的資料 ( 如筆記、設定 ) 都是私密的，不會與他人混淆。
- 權限控管：根據帳號身份給予不同的操作權限，防止敏感資料外洩。
- 個人化體驗：記憶使用者的習慣與進度，讓應用程式更貼近使用者需求。
多元化的帳號登入機制解析
目前常見的身分驗證方式各有優劣，雖然條條大路通羅馬，在用戶體驗 ( UX ) 上，仍然需要根據專案的 Vibe 進行挑選選擇合適的登入方式，下方列出主流登入機制：
- 電子郵件＆密碼：傳統經典的作法，門檻低且具備高度掌控權，但使用者需要額外記憶密碼。
- 第三方登入：如 Google、Apple 或 GitHub，一鍵登入，極大化降低使用者流失率。
- 一次性連結：無密碼體驗，透過郵件中的一次性連結登入，兼具安全與便利。
- 手機簡訊：適合行動裝置優先的應用，驗證過程直覺，但可能需要支付額外的簡訊發送費用。
建立 Firebase 專案
透過 Firebase Authentication 是要啟用帳號驗證的最快方式，使用時需要先前往 Firebase 控制台建立 Firebase 專案，如果是「第一次使用」，點擊「請設定 Firebase 專案按鈕」就可以開始建立專案。
前往：Firebase 控制台
如果「已經有自己的專案」，除了可以選擇自己的專案，也可以點擊「建立新的 Firebase 專案」建立新的專案。
輸入專案名稱，點擊「繼續」。
根據個人需求決定是否啟用 Gemini 輔助功能以及串連 Google Analytics 分析功能 ( 可以都不用勾選 )，完成後點擊「建立專案」。
專案建立後，就可以看到類似下圖的專案畫面。
啟用 Firebase Authentication Google 註冊登入
從專案左側選單中選擇「Authentication」。
如果是第一次使用，點擊「開始使用」。
切換到「登入方式」頁籤，選擇「Google」。
勾選「啟用」，下拉選單選擇自己帳號的信箱，完成後按下「儲存」。
完成後就會看到已經啟用 Google 登入的登入方式。
啟用 Firebase Authentication 電子郵件註冊登入
除了 Google 登入，通常還會使用 Email 登入，回到「登入方式」頁籤，點擊「新增供應商」。
選擇「電子郵件/密碼」。
在「電子郵件/密碼」的位置勾選「啟用」，完成後按下「儲存」。
完成後就會看到已經啟用「電子郵件/密碼」的登入方式。
由於「電子郵件/密碼」會需要使用「認證信」「密碼重設信」等系統自動寄送的信件，如果有需要修改相關內容，可以點擊切換到「範本」頁籤，編輯註冊信、重設密碼信等信件內容。
設定 Authentication 授權網域
登入機制確定之後，點擊「設定」後選擇「授權網域」，這個動作可以設定註冊機制只能用於「哪些特定網域」，預設「firebaseapp.com」和「web.app」結尾的網域是登入時驗證機制網域，無法刪除和修改，而「localhost」是本機開發環境 ( 正式上線後請刪除 )。
點擊「新增網域」，添加自己的網域名稱，就可以讓自己的網域使用 Authentication 驗證機制。
建立 Firebase 應用程式
當認證機制完成後，最後一步設定就是在 Firebase 專案中「建立應用程式」，目的在於讓網頁可以串接 Firebase Authentication。回到 Firebase 專案，點擊「專案總覽」，點擊「新增應用程式」。
選擇「網頁應用程式」( 中間的按鈕 )。
輸入應用程式名稱，點擊「註冊」。
註冊應用程式之後，就可以看到這個應用程式的使用資訊，點擊「前往控制台」回到專案畫面。
回到專案畫面後，點擊左上角「齒輪」按鈕，選擇「一般」。
在「一般」的畫面中往下拉，就可以看見剛剛建立的應用程式資訊，點擊應用程式裡的「設定」按鈕，就可以看見使用應用程式的設定程式碼。
萬事俱備！Vibe Coding 使用者註冊登入頁面
從剛剛上方的步驟中，已經完成了「Google 登入驗證」、「電子信箱註冊」、「OAuth 用戶端憑證」和「Firebase 應用程式」，接下來就要透過 Vibe Coding 的方式，將這些工具全部整合在一起，實現一個可以讓使用者註冊登入的頁面！在自己的 AI 中使用下方的提示詞產生網頁。
我建立了 Firebase 專案並使用 Firebase Authentication 產生「Google 登入驗證」、「電子信箱註冊」的驗證機制，請根據提示詞幫我產生一個註冊登入頁面。
- 先使用假的 Firebase 應用程式和 OAuth 金鑰
- 使用基本的 HTML 和 JS，不要套用任何框架。
- 畫面中一開始呈現登入畫面，但要有「註冊帳號」和「忘記密碼」的連結。
- 登入時可以使用「Google 登入」或「電子信箱登入」。
- 點擊「註冊帳號」後可以前往註冊畫面。
- 點擊「忘記密碼」後會發送重設密碼的信件。
- 註冊時可以使用「Google 註冊」或「電子信箱與密碼註冊」。
- 如果使用電子信箱需要認證信箱。
- 登入完成後顯示登入完成畫面。
產生網頁後，參考「下載 Vibe Coding 網頁程式碼」教學，下載並編輯網頁程式碼，將 Firebase 資訊的段落換成剛剛 Firebase 應用程式的程式碼。
完成後在本機環境啟用伺服器，或參考「使用 GitHub 部署你的網頁作品」把網頁部署到 Github ( 記得確認 Authentication 授權網域有加入 Github 網址 )，開啟網頁之後就可以看到完整的註冊登入畫面。
點擊「使用 Google 登入」，就會進行使用 Google 帳號登入的流程，如果沒有註冊過，就會彈出一些視窗要不斷確認驗證。
完成後就會出現註冊成功並登入的畫面。
如果是使用 Email 註冊也是類似的步驟，點擊「註冊帳號」，輸入電子信箱和密碼。
註冊後就會寄送認證信。
點擊認證信的連結就可以確認電子信箱。
再次使用電子信箱登入之後，出現「電子郵件已驗證」的提示，表示已經正確使用電子信箱和密碼註冊。
如果網際密碼，也可以填入電子信箱，然後點擊「忘記密碼」按鈕，就會寄送重設密碼的信件。
Firebase Authentication 查看使用者資訊
已經透過 Vibe Coding 實現註冊登入畫面，使用者也開始註冊之後，就可以前往 Firebase Authentication 查看使用者資訊與更多設定，進入 Firebase 專案，點擊 Authentication 選擇「使用者」頁籤，就可以看到已經註冊的使用者。
點擊使用者後方的「...」，可以重設密碼、停用或刪除使用者。
小結
透過 Firebase，只需要簡單幾個步驟，就能完成了一個具備專業的登入系統，只要可以掌握身分驗證後，將能進一步探索資料庫的各種權限規則，或雲端儲存等更進階的功能，繼續透過 Vibe Coding 保持這份開發的律動，創造更多可能。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～