AI 網頁生成 - 第六篇：建立 Authgear 帳戶並創建應用程式
前言
在前一篇我們說明了，AI 雖然能幫我們畫出「看起來可以登入」的畫面，但背後真正的登入邏輯、安全驗證、使用者管理，還是得靠專業的工具來實作。 這一篇我們就要正式開始整合 Authgear，幫我們的網站建立一個真正可用的登入系統！
第一步：前往 Authgear 官網並註冊帳號
- 打開瀏覽器，前往 https://www.authgear.com/
- 如果你是第一次使用，請點選右上角的「Sign Up」，填入基本資訊後註冊帳號。
- 登入後，你會看到一個乾淨簡潔的控制台畫面。接下來我們就要在這裡建立一個新的應用程式（Application）。
第二步：建立一個新的 Project
- 在帳號沒有新的 Project 的狀況下，系統會帶領你直接創建一個 Project
- Name：填入你網站的名稱，例如
band-calenda - Domain：可以先使用預設，或填入自己的子網域（之後可修改）
- 修改完成後，點選左下的 Next 進行下一步
第三步：選擇登入方式
- 下一步我們要選擇登入的方式，預設是 Email + Password，我們直接用預設的方式，點 Next
第四步：設定登入介面
- 最後一個步驟，可以簡單選擇登入介面的顏色或上傳簡易的 LOGO
- 當然在內部的選項內還可以有更多修改的選項，這邊我們點選 Done 完成初期設定
第五步：建立應用並設定 Redirect URI
- 點選左側選單的 Applications
- 點選「New Application」，開始建立一個新的設定檔 dd
- Application Type 請選擇 Single Page Application（SPA）
- 輸入應用名稱（例如：
band-calenda），點選 Save - 接著畫面會出現教學文件，有興趣可以閱讀，我們這邊直接點選 Next
- 在 Basic Info 頁面：
- Authorized Redirect URIs：設定使用者登入成功後要導向的網址
http://localhost:3000/auth-redirect - Post Logout Redirect URIs：設定使用者登出重新導向的網址
http://localhost:3000/auth-redirect - Client ID & Endpoint：請記下畫面中顯示的這兩個資訊，我們在第七篇會串接用到。
- 最後按下左下角的 Save 完成初期設定
第六步：切換登入介面語言 & 設計登入畫面（可選）
- 如果你希望使用者登入畫面顯示為中文，請依以下步驟操作：
- 點選左側選單的 Languages
- 在下面的 Supported languages 勾選 Chinese (Traditional)
- 在 Primary language 的下拉式選單中，選擇 Chinese (Traditional)
- 按下 Save 後，點選左側的 Branding > Design
- 首先看到語言已經變成中文了，你也可以加入多語支援，讓使用者自行選擇語言。
- 其次，我們可以看到右邊有非常多的選項可以修改，比如背景、LOGO、按鈕顏色等
- 全部修改好後，點選右上的 Save，就完成了登入介面設定。
總結
到這裡，我們已經完成了整個 Authgear 後台的初始設定，包括：
- 註冊帳號並建立 Project
- 新增應用，設定導向網址
- 調整語系與登入介面樣式
- 取得整合所需的資訊（Client ID 與 Endpoint）
這些步驟雖然看起來很多，但都是一次性設定，做完就等於替你未來所有登入功能打好地基。
下一篇預告
開始整合 Authgear，讓登入功能真的能用！
第七篇我們要開始進入最重要的一步：把 Authgear 串接回我們的 AI 生成網站前端。
我們將透過 AI 編程工具（例如 Cursor、Claude Code、Windsurf 等），協助你：
- 串接 Authgear 登入 API
- 建立註冊／登入流程
- 實作「使用者登入後」的行為邏輯
- 讓網站的「Sign up / Login」按鈕，不再只是擺好看的，而是真的能使用者登入、登出，並進入不同頁面！
分享這篇文章：
