Vibe Coding 串接账号验证机制

在 AI 辅助开发的“Vibe Coding”时代，虽然已经实现了从灵感到实践的极致速度，但一个完整的应用程序，往往绕不开最基本也最关键的一环：“用户账号系统”，这篇教学将透过 Firebase Authentication，用最优雅、最快速的方式，在保持开发节奏的同时，替专案加上稳固的登录防护网。

更多参考：Vibe Coding 全方位开发导读

快速导览：

• 什么是账号登录？为什么它不可缺？
• 多元化的账号登录机制解析
• 建立 Firebase 专案
• 启用 Firebase Authentication Google 注册登录
• 启用 Firebase Authentication 电子邮件注册登录
• 设定 Authentication 授权网域
• 建立 Firebase 应用程序
• 万事俱备！Vibe Coding 用户注册登录页面
• Firebase Authentication 查看用户信息

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

什么是账号登录？为什么它不可缺？

登录机制不仅仅是一个输入框，它更是“个人化体验”的开端，所谓的账号登录 ( Authentication ) 是确认“你是谁”的过程，这在现代应用中扮演了多重角色：

• 身份验证：确定用户的真实身份，是建立信任的第一步。
• 数据隔离：确保每个用户的数据 ( 如笔记、设定 ) 都是私密的，不会与他人混淆。
• 权限控管：根据账号身份给予不同的操作权限，防止敏感数据外泄。
• 个人化体验：记忆用户的习惯与进度，让应用程序更贴近用户需求。

多元化的账号登录机制解析

目前常见的身份验证方式各有优劣，虽然条条大路通罗马，在用户体验 ( UX ) 上，仍然需要根据专案选择合适的登录方式，下方列出主流登录机制：

• 电子邮件＆密码：传统经典的作法，门槛低且具备高度掌控权，但用户需要额外记忆密码。
• 第三方登录：如 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 保持这份开发的律动，创造更多可能。

延伸阅读

Vibe Coding 的重点都不在于“写程序”，而是为了配合程序的各种“准备工作”，下方列出 Vibe Coding 相关的教学，透过一系列的教学，就更能掌握正确且顺畅的开发流程:

• 认识 Vibe Coding：程序不再是拼逻辑，而是拼“感觉”
• Vibe Coding 新手入门：从蓝图规划到 AI 开发的思维转型
• Vibe Coding 重要的准备工作：架构流程图
• Vibe Coding 网页必备知识：开发者的“沟通工具箱”
• Vibe Coding Python 必备知识：AI 与 Colab 打开程序直觉
• Vibe Coding 固定网页样式：解决样式不一致的恼人问题
• Vibe Coding 图片处理心法：从云端空间到 Base64 的完美配置
• Vibe Coding 玩家必备的 SVG 进阶操作指南
• Vibe Coding 字体指南：用文字风格定义网页灵魂
• 下载 Vibe Coding 网页程序码，掌握程序码的主导权
• Vibe Coding 实战：利用 Google Apps Script 打造免费网页部署基地
• Vibe Coding 实战：使用 GitHub 部署你的网页作品
• AI 时代的轻量级后端：当 Vibe Coding 遇上 Google Sheets
• 从灵感到即时同步：Vibe Coding 遇上 Firebase Realtime Database
• 数字灵魂的存放处：Vibe Coding 串接 Firebase Firestore
• 拒绝数据裸奔！Vibe Coding 必备 Firebase App Check 安全防护指南
• Vibe Coding + Firebase Authentication 打造顺畅的注册登录体验
• Vibe Coding 将 Google Drive 变身最强文件后端
• 灵感即程序：用 Gemini API 打开你的 Vibe Coding 新时代
• Vibe Coding 极速打造 LINE Bot 智能机器人
• Vibe Coding 实战：免写程序！把 Google 试算表变成超精美点餐系统
• Vibe Coding 实战：用 Google Drive 轻松打造“文件＆作业上传系统”
• Vibe Coding 实战：用 Google 试算表轻松搞定“线上点名系统”
• Vibe Coding 实战：打造自己的英文单字卡！

意见反馈