前言

在第六篇中，我們完成了 Authgear 的設定，拿到了 Client ID 和 Endpoint 等關鍵資訊。這一篇，我們將實際把這些設定接回我們用 Bolt.new 生成的網站上，讓網站登入功能真正運作起來！

---

第一步：從 Bolt 匯出網站程式碼

• 如果你還沒下載 Bolt.new 生成的網站碼，可以按照以下步驟操作：

1. 打開你先前用 Bolt 建立的網站專案頁面
2. 點選右邊專案名稱旁邊的 ⋮ 圖示，點開後選擇 Export > Download，將整包程式碼下載
3. 解壓縮到你電腦中熟悉的資料夾中，例如：~/Documents/band-calendar-website

---

第二步：打開 Cursor AI 並載入專案

1. 我們會使用 AI 編程工具 Cursor 來協助我們快速讀懂程式架構並插入 Authgear 的登入邏輯。
2. 打開 https://www.cursor.sh/ 並安裝應用（如果還沒裝）
3. 開啟 Cursor，選擇 Open Folder
4. 導入剛才下載好的 Bolt 專案資料夾
5. Cursor 會自動分析你的網站結構，並顯示檔案樹狀清單

---

第三步：將 Authgear SDK 加入你的網站

1. 先讓 Cursor 幫我們加入 Authgear 的前端套件：

   • 在 Cursor 中，使用AI助理，對入口檔案（如 App.js 或 index.html）輸入指令：

     請在專案中匯入 Authgear Web JavaScript SDK，使用 npm 安裝或直接使用 CDN，並初始化 SDK，將 endpoint 設為 "<你的 endpoint>"，clientID 設為 "<你的 clientID>"。
     

2. Cursor 會自動：

   • 編輯 index.html 或 package.json 加入 @authgear/web 套件或 CDN

   • 在入口檔案加入初始化程式碼，如：

     authgear.configure({
       endpoint: "<你的 endpoint>",
       clientID: "<你的 clientID>",
       sessionType: "refresh_token"
     });

   • 這一段符合官方文檔中「Step 4: Install Authgear SDK」與「Step 5: Initialize Authgear SDK」
     參考：
     

     https://docs.authgear.com/get-started/single-page-app/website?utm_source=chatgpt.com。

---

第四步：測試登入流程

1. 啟動開發伺服器看看效果：

   npm install
   npm run dev

2. 接著打開瀏覽器輸入 http://localhost:5173，你會看到：

• 頁面右上角有「Login」、「Sign up」按鈕
• 按下 Login，會跳轉到 Authgear 的登入頁面
• 成功登入後，回到你設定的 Redirect URI 頁面（例如 /dashboard）
• 登入成功後可以取得使用者資訊，例如 Email、ID

如果登入沒跳轉成功，請回去第六篇確認 Redirect URI 是否一致！

---

整合成功！你完成了真正的登入功能！

到這裡，我們已經完成：

• 從 Bolt 匯出網站程式碼
• 在 Cursor 載入並理解專案結構
• 加入 Authgear 登入 SDK
• 建立登入與登出邏輯
• 測試使用者導向與登入狀態

這已經是一個「具備登入系統的 AI 網站」了！恭喜你走到了這一步

---

下一篇預告：使用者登入後可以做什麼？

在第八篇，我們將擴充功能，例如：

• 登入後導向個人儀表板（Dashboard）
• 顯示過去參與的活動紀錄
• 新增使用者資料更新、登出按鈕、權限檢查等功能

讓整個網站不只是能登入，更能真正「有使用者系統」！