使用 Claude Code 和 Logto 快速打造自訂登入流程

什麼是 Claude Code？#

Claude Code 是由 Anthropic 開發、以 AI 為核心的程式助理，專為協助開發者更高效地撰寫、除錯與理解程式碼而設計。和一般聊天機器人不同，它聚焦於開發流程，並能深度整合於各種開發環境。開發者可利用它來產生程式片段、解釋複雜函式、修正錯誤，或加速原型設計，全程無需切換工具、不會分心。

它採用 Anthropic 推出的 Claude 模型作為基礎，在訓練過程中特別重視安全性、可靠性與實用性。這表示 Claude Code 不僅追求速度，更專注於產出可信且可維護的實案程式碼。

Claude Code 與其他工具有什麼不同？#

市面上已有許多程式輔助 AI，但 Claude Code 在幾個關鍵方面擁有獨特優勢：

• 脈絡理解深度： Claude 模型擅長處理極長的輸入，讓 Claude Code 能處理大範圍的程式碼庫或冗長檔案，脈絡不會中斷。
• 說明能力強： 不僅僅產生程式碼，更會解釋為什麼這麼做。這對新進開發者或學習新框架特別有幫助。
• 安全與可靠性導向： Anthropic 強調 AI 安全與對齊、降低幻覺，使 Claude Code 的建議比單純追求產能的工具更值得信賴。
• 彈性使用： Claude Code 可在 IDE 互動、終端機運行，或參與文件流程，靈活滿足不同開發者的操作習慣。

簡單說，其他工具多半主打「自動補全」，但 Claude Code 目標是兼顧自動產生與理解的程式夥伴。

Claude Code 適合哪些人？#

Claude Code 適用範圍很廣：

• 專業開發者：需要更快除錯、更清楚的解釋與工作流程生產力提升者。
• 工程團隊：需面對大型且複雜程式碼庫，需要能處理大量檔案和依賴的輔助工具。
• 學生與學習者：需要簡明易懂的語法、函式與程式概念說明，不用查閱艱深文件。
• 產品開發者與新創團隊：希望快步迭代並快速交付，且兼顧程式碼品質。

本質上，只要你經常撰寫、閱讀或管理程式碼，Claude Code 都能讓開發流程更快、更明確、更可靠。

教學：用 Logto 與 Claude Code 打造自訂登入體驗#

今天帶你一步步學會如何用 Claude Code 讓你的應用程式加上自訂登入功能，不論你是專業開發者還是寫程式新手都適用。

在 Logto 後台建立應用程式#

這個範例中，我透過 Claude Code 實作一個文件管理工具。

首先，前往 Logto 雲端後台 建立一個單頁應用程式。你會看到各種設定選項和端點，後續整合會用到。

用 Claude Code 設定 Logto 整合#

剩下的就交給 Claude Code 處理：它會自動安裝最新的 Logto React SDK、設定認證元件，並整合一切。

根據指示，你需要準備兩組重要資訊：

• Logto 端點
• 應用程式 ID

我將 Logto 端點和 App ID 複製到專案中，並設定重導 URI 和註銷後重導 URI。

你可以直接將這兩個資訊給 Claude Code，它就會幫你把所有設定都處理好。

現在來測試一下：點擊登入，你會被導向 Logto 託管的登入頁面。

如果你有設 post sign-out URL，登出後就會導回那個頁面。

自訂 Logto 預設登入體驗#

Logto 提供可設定的現成登入流程，你能在後台自訂化。開啟 Sign-in Experience > Sign-in & Sign-up，選擇你想啟用的登入方式（如：電子郵件、使用者名稱、電話號碼或社群帳號）。

設好之後，觸發登入流程即會將用戶帶到帶有你自訂選項的 Logto 託管登入頁，整個認證由 Logto 處理，登入後再返回你的應用。

在你的產品介面上建立浮動登入面板#

現在想更進一步，製作高度自訂的登入體驗——不再跳轉頁面，而是直接在產品介面上放個浮動登入面板。這樣用戶在同一個畫面完成認證，又能底層結合 Logto 的認證流程。

直接用自然語言提示即可：

Claude Code 會自動產生：

• 漂亮的浮動登入面板元件
• 恰當的 Tailwind CSS 樣式
• Logto first-screen 參數 設定
• 響應式設計支援

使用你的測試帳號驗證登入有正確串接到 Logto CIAM 平台。

Logto 即將推出 AI 加值的認證整合新功能#

以上只是一個基礎範例。Logto 正在研發可直接在 IDE 運行的 MCP server，讓你不用離開開發環境就能操作 Logto 後台與管理 API。

未來你將可以：

• 建立或管理用戶
• 查閱與篩選日誌
• 設定登入/註冊流程
• 定義 API 資源、權限與角色
• 管理應用與存取權限
• ...等更多功能

結合本地化工具、AI 與 Logto 架構，認證將不再是痛苦的整合流程，而是你日常開發的自然一環。