前言

在前幾篇文章中，我們已經用 AI 工具（如 v0 或 bolt）打造出一個網站的基本外觀與功能架構。雖然目前這個網站還是前端為主、用假資料（mock data）模擬內容，但看起來已經「像個網站」了。

現在，是時候思考一個真正能讓使用者登入與互動的方法了。而這時，你會需要一個像 Authgear 這樣的工具。

---

網站要有「登入功能」會遇到什麼麻煩？

如果你是初學者，可能會有這種想法：

反正 AI 可以幫我生成一個「登入」按鈕，我照著用就好啦！

但實際上，要「讓使用者註冊、登入並安全地使用網站」，比想像中複雜很多，你會遇到這些難題：

• 使用者密碼要不要加密？要存在哪？
• 有人輸錯密碼怎麼處理？
• 要怎麼避免機器人註冊帳號？
• 如何管理使用者登入狀態？
• 使用者資料能不能安全儲存？可不可以被竄改？
• 怎麼防止 XSS、CSRF、Token 過期等安全問題？

你可能會開始 Google「怎麼做登入系統」，然後很快發現：

自己做登入功能超麻煩，而且有很高的安全風險。

---

解決方案：用 Authgear 幫你搞定這一切

這就是 Authgear 登場的時候！

Authgear 是一套專業的「身份驗證系統」（Authentication-as-a-Service），專門幫助開發者快速、安全地整合登入與使用者管理功能。它可以幫你搞定以下事情：

• 註冊 / 登入（含社群登入）
• 驗證信箱 / 手機號碼 / Passkey
• 使用者資料的讀取與修改、管理登入狀態（Token、Session）
• 多因子驗證（MFA）、OAuth2、OpenID Connect 等等進階功能
• 支援多個 SDK（Web JS、React、iOS、Android、React Native、Flutter 等等）
• 客製化 UI（可自訂品牌與設計）

而且最重要的是：你不需要自己寫一套系統，也不用擔心資安問題，Authgear 幫你處理好一切細節。

---

AI 幫得上忙嗎？目前還不行

雖然 AI 工具可以幫你生成登入畫面的程式碼，但它無法處理登入背後的邏輯與安全問題。

我們觀察到幾種常見的 AI 錯誤用法：

• 登入按鈕點了沒反應（沒有串接後端）
• 密碼欄位沒有加密或驗證
• 沒有管理登入狀態，使用者一刷新頁面就被登出
• 登入畫面長得對，但功能全是假的

所以，想要網站真的能夠「安全地讓使用者登入」，你需要像 Authgear 這樣的身份驗證平台來幫忙處理核心邏輯。

---

下一篇預告：實際操作 Authgear，建立第一個應用程式

下一篇，我們將正式註冊 Authgear 帳號、建立應用、設定導向網址與網域，並為接下來的登入功能做準備。
這會是你網站真正能「登入」、「識別使用者」的第一步！