繁體中文（台灣）
使用 Claude Code 和 Logto 快速打造自訂登入流程
學習如何利用 Claude Code 搭配 Logto 認證來建構全端應用：從登入設置到自訂登入面板與社交帳號登入，一步到位。
Guamian
Product & Design
Product & Design
學習如何利用 Claude Code 搭配 Logto 認證來建構全端應用：從登入設置到自訂登入面板與社交帳號登入，一步到位。
Claude Code 是由 Anthropic 開發、以 AI 為核心的程式助理，專為協助開發者更高效地撰寫、除錯與理解程式碼而設計。和一般聊天機器人不同，它聚焦於開發流程，並能深度整合於各種開發環境。開發者可利用它來產生程式片段、解釋複雜函式、修正錯誤，或加速原型設計，全程無需切換工具、不會分心。
它採用 Anthropic 推出的 Claude 模型作為基礎，在訓練過程中特別重視安全性、可靠性與實用性。這表示 Claude Code 不僅追求速度，更專注於產出可信且可維護的實案程式碼。
市面上已有許多程式輔助 AI，但 Claude Code 在幾個關鍵方面擁有獨特優勢：
簡單說，其他工具多半主打「自動補全」，但 Claude Code 目標是兼顧自動產生與理解的程式夥伴。
Claude Code 適用範圍很廣：
本質上，只要你經常撰寫、閱讀或管理程式碼，Claude Code 都能讓開發流程更快、更明確、更可靠。
今天帶你一步步學會如何用 Claude Code 讓你的應用程式加上自訂登入功能，不論你是專業開發者還是寫程式新手都適用。
這個範例中，我透過 Claude Code 實作一個文件管理工具。
首先，前往 Logto 雲端後台 建立一個單頁應用程式。你會看到各種設定選項和端點，後續整合會用到。
剩下的就交給 Claude Code 處理：它會自動安裝最新的 Logto React SDK、設定認證元件，並整合一切。
根據指示，你需要準備兩組重要資訊：
我將 Logto 端點和 App ID 複製到專案中，並設定重導 URI 和註銷後重導 URI。
你可以直接將這兩個資訊給 Claude Code，它就會幫你把所有設定都處理好。
現在來測試一下：點擊登入，你會被導向 Logto 託管的登入頁面。
如果你有設 post sign-out URL，登出後就會導回那個頁面。
Logto 提供可設定的現成登入流程，你能在後台自訂化。開啟 Sign-in Experience > Sign-in & Sign-up，選擇你想啟用的登入方式（如：電子郵件、使用者名稱、電話號碼或社群帳號）。
設好之後，觸發登入流程即會將用戶帶到帶有你自訂選項的 Logto 託管登入頁，整個認證由 Logto 處理，登入後再返回你的應用。
現在想更進一步，製作高度自訂的登入體驗——不再跳轉頁面，而是直接在產品介面上放個浮動登入面板。這樣用戶在同一個畫面完成認證，又能底層結合 Logto 的認證流程。
直接用自然語言提示即可：
Claude Code 會自動產生：
使用你的測試帳號驗證登入有正確串接到 Logto CIAM 平台。
以上只是一個基礎範例。Logto 正在研發可直接在 IDE 運行的 MCP server，讓你不用離開開發環境就能操作 Logto 後台與管理 API。
未來你將可以：
結合本地化工具、AI 與 Logto 架構，認證將不再是痛苦的整合流程，而是你日常開發的自然一環。