繁體中文（香港）
  • ai
  • claude
  • auth

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

學習點樣用 Claude Code 實現 Logto 認證嘅全端應用程式：由登入設定到自訂登入面板同社交登入都一應俱全。

Guamian
Guamian
Product & Design

Stop wasting weeks on user auth
Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.
Get started
Product screenshot

乜嘢係 Claude Code？

Claude Code 係由 Anthropic 開發、搭載 AI 嘅編程助手，專為協助開發者更有效率咁寫碼、除錯同理解代碼。佢唔同一般嘅 chatbot，因為佢重點針對編程工作流程，仲可以深度整合入開發環境入面。開發者可以用佢自動生成代碼片段、解釋複雜函式、修正錯誤，或者加快原型開發，都唔需要切換工作工具或分心。

Claude Code 嘅基礎來自 Anthropic 嘅 Claude 模型，訓練時強調安全、可靠同有用性。換句話講，Claude Code 唔止追求速度，仲會產生可信賴、易於維護嘅程式碼，真係適合實際項目。

Claude Code 同其他工具有咩唔同？

市場上早已有唔少 AI 編碼助手，但 Claude Code 有幾個特別之處：

  • 上下文深度： Claude 模型最出名係能夠處理超長輸入，代表 Claude Code 處理大型代碼庫或好長嘅檔案時都唔會斷線。
  • 解釋能力強： 唔單止自動生 code，仲會話你知點解用呢個做法。對於新同事 on board 或學新框架好有用。
  • 注重安全同穩定： Anthropic 強調 AI 對齊同減少幻覺，所以 Claude Code 嘅建議通常比單純追求生產力嘅工具可靠。
  • 使用方式靈活： Claude Code 可以喺 IDE 作互動、用 terminal、又或文檔流程，啱唔同開發者習慣。

簡單講，其他工具著重補全代碼，Claude Code 希望成為理解同生成兼備嘅拍檔。

Claude Code 適合邊個用？

Claude Code 為多種用戶而設：

  • 專業開發者：要快啲 debug、更乾淨解說提升生產力。
  • 工程團隊：經常處理大型、複雜代碼庫，需要助手能 handle 大檔案與依賴。
  • 學生同學習者：需要清晰解釋語法、函數、編程概念，唔洗捱堆厚嘅文檔。
  • 產品創業者同初創：想快啲疊代出貨同時保持高質素。

簡單黎講，只要你日常寫 code、睇 code 或管理 code，Claude Code 都可以令你開發過程更快、更清晰、更可靠。

教學：用 Logto 同 Claude Code 加自訂登入體驗

今日我會帶大家一步一步用 Claude Code 為你嘅 app 加自訂登入體驗，無論你係專業開發者定純粹 coding 玩下都啱用。

喺 Logto 控制台註冊 App

今次例子，我用 Claude Code 寫咗個檔案管理 app。

第一步，我去咗 Logto Cloud 控制台 開咗個單頁面應用程式。你會見到有唔同設定選項同 endpoint，等陣整合時我哋就會用得著。

claude_code_1.png

用 Claude Code 設定 Logto 整合

Claude Code 幫我自動做晒後續：佢會安裝最新 Logto React SDK、設定認證組件同串連所有部份。

claude_code_2.png

根據指示，我要準備兩個關鍵資料：

  • Logto endpoint
  • App ID

我將 Logto endpoint 同 App ID 複製去專案入面，然後設定好 Redirect URI 同 Post sign-out redirect URI。

claude_code_3.png

你可以直接將呢兩項傳畀 Claude Code，剩低設定就幫你自動搞掂。

依家可以測試下：撳 Sign in，你就會被帶去 Logto 嘅託管登入頁面。

claude_code_4.png claude_code_5.png claude_code_6.png

如果你設咗 post sign-out URL，登出之後會自動帶返指定頁面。

自訂 Logto 現成登入體驗

Logto 提供一套可調整嘅預設登入流程，你可以喺 Console 度自訂。開頭記得去 Sign-in Experience > Sign-in & Sign-up，揀返你想俾用戶用咩方式登入（例如 email、用戶名、電話號碼或社交帳號）。

一經設定，觸發登入流程就會帶用戶去 Logto 託管嘅登入頁，同時根據你揀咗嘅選項。成個認證流程由 Logto 負責，登入後會自動帶返你個 app。

做個浮動登入 panel 嵌喺產品界面上

我想再進一步，打造成個自訂 floating 登入 panel，而唔係 redirect 去第二頁。我會將登入面板直接擺喺產品 UI 右下角，用戶睇住產品畫面之餘已經可以登錄，而底層都係 Logto 認證流程。

你只要用自然語言 prompt：

claude_code_7.png claude_code_8.png

Claude Code 會自動生產：

  • 漂亮嘅浮動登入 panel 組件
  • 啱用嘅 Tailwind CSS 樣式
  • Logto first-screen 參數 設定
  • 支援響應式設計

用你嘅測試用戶試下，確保登入記錄到 Logto CIAM 平台。

claude_code_9.png

Logto 即將支援 AI 內建認證整合

以上都係基本用法。Logto 而家正開發 MCP server，可以直接喺你 IDE 入面運行，等你唔洗離開開發環境都可以同 Logto Console 及管理 API 互動。

有咗呢套 setup，你可以：

  • 建立同管理用戶
  • 睇同篩選 LOG
  • 配置登入註冊流程
  • 定義 API 資源、權限同角色
  • 管理應用程式同存取設定
  • 以及更多

本地工具加埋 AI 同 Logto 基建，身份認證唔再係麻煩嘅集成步驟，而係納入你日常開發工作流程嘅一部份。

免費試用 Logto Cloud