跳至主要內容

自帶 UI

除了預設的 UI 自訂選項外，Logto 允許你自帶 UI 完全取代內建的登入體驗介面。此功能讓你可以上傳包含自訂 UI 資產（HTML、CSS、JavaScript、圖片等）的 zip 檔案，並將其託管在 Logto Cloud 伺服器上，作為租戶使用者的 登入體驗。

備註:

此功能要求你的自訂 UI 必須與單頁應用程式 (SPA) 相容，並建議始終使用生產環境版本以獲得最佳效能。

在 Logto Console 中探索自訂 UI 功能​

從官方專案開始​

最快速的方式是克隆 Logto experience 專案，這是內建的 Logto 登入體驗 UI，涵蓋所有功能和 Logto 的最佳實踐。你可以根據需求進行自訂。

檢出程式碼後，只需運行以下命令來建置專案：

pnpm install && pnpm build
備註:

整個 Logto 專案是一個 pnpm monorepo，如果你想單獨運行 experience 套件（不使用 pnpm），請將 package.json 中的 workspace: dependencies 替換為具體的版本號（如 ^1.0.0）。

建置完成後，你會在 dist 目錄中找到所有編譯後的資產。接著，將 dist 目錄壓縮成 ZIP 檔案，這個檔案將用於稍後上傳到 Logto Cloud。

自訂 UI 資產要求​

在上傳自訂 UI 資產之前，請確保它們符合以下要求：

  • 上傳的資產應打包為單一 zip 檔案。
  • zip 檔案應在根目錄中包含一個 index.html 檔案。
  • zip 檔案大小不應超過 20MB。
  • zip 檔案中不應包含超過 10MB 的檔案。
  • zip 檔案中總檔案數量不應超過 200 個。

上傳自訂 UI 資產​

備註:

在生產環境中使用此功能時請謹慎，因為它會立即影響使用者的登入體驗。

  1. 前往 Console > Sign-in experience > Branding > Bring your UI。
  2. 點擊選擇或拖放你在前一步驟中創建的 zip 檔案，系統將自動開始上傳過程。
  3. 上傳完成後，儲存變更，你的自訂 UI 將立即生效。
  4. 使用自訂登入 UI 時，「登入預覽」視窗將被禁用。然而，你仍然可以點擊「即時預覽」按鈕，在新開的瀏覽器標籤中測試你的自訂登入頁面。

開發你的自訂 UI​

與 Experience API 互動​

你的自訂 UI 需要與 Experience API 互動，以執行各種操作，如登入、註冊、重設密碼、綁定社交帳戶、啟用 MFA 等。為了更好地理解使用者流程和實施細節，我們建議查看我們的 Experience API 設計 RFC，其中提供了全面的技術規範和範例。

你還需要透過 sign-in Experience API endpoint 存取其他登入體驗配置，如品牌顏色、公司標誌、favicon、密碼政策、本地化語言短語，甚至自訂 CSS。

範例專案​

我們提供了一系列範例專案，幫助你快速理解和開始實施自訂 UI。請查看 Logto Experience project GitHub 儲存庫以獲取詳細資訊。

此外，我們將繼續提供更多簡化和基於場景的範例專案，以涵蓋最常見的使用案例。請關注我們的未來更新！

本地開發和除錯​

為了本地開發和除錯，我們提供了 Logto Tunnel CLI 工具來：

  • 將 Experience API 請求從本地機器代理到 Logto Cloud 端點。
  • 在本地測試你的自訂 UI 實現。

這允許使用者在上傳到 Logto Cloud 之前，本地測試和除錯自訂 UI。

請參閱 本地除錯和測試你的自訂 UI 以獲取更多詳細資訊。

使用 CLI 上傳自訂 UI 資產​

除了透過 Console 上傳外，你還可以使用 Logto CLI 上傳自訂 UI 資產。這對於自動化部署工作流程特別有用。

請參閱 使用 CLI 上傳自訂 UI 資產 以獲取更多詳細資訊。

恢復到 Logto 內建的登入體驗​

如果你希望恢復到 Logto 的內建登入體驗，只需點擊「Bring your UI」卡片上的刪除按鈕。儲存變更後，登入體驗 UI 將恢復為 Logto 的預設設定。

RFCS: Experience API

 Experience samples 將自訂登入 UI 帶入 Logto Cloud