跳至主要內容

符合你的品牌風格

全域登入體驗 (Omni sign-in experience)​

前往 主控台 > 登入體驗 > 品牌設定，即可自訂登入頁面的外觀與風格。這個區域讓你輕鬆調整關鍵品牌元素。

品牌色彩​

定義登入體驗中主要使用的顏色，包括主按鈕、連結及其他元件。你可以將預設的 Logto 紫色替換為你的品牌色。針對深色模式，也可指定不同的品牌色。

標誌會顯示在登入首頁、註冊首頁、載入頁及其他我們擴展的介面上。

  • 圖片有一些限制：必須小於 500KB，且格式為 SVG、PNG、JPG、JPEG 或 ICO。
  • 若標誌欄位留空，介面上將不顯示標誌。
  • 也可以上傳深色模式專用的標誌。

Favicon​

Favicon 是代表網站的小圖示，會顯示在瀏覽器分頁、書籤及其他瀏覽器介面區域。

  • 圖片必須小於 500KB，且格式為 SVG、PNG、JPG、JPEG 或 ICO。建議上傳正方形圖片以確保良好呈現效果。
  • 也可上傳深色模式專用的 favicon。
  • 此外，不同流程（登入 / 註冊 / 忘記密碼等）現在會顯示對應的瀏覽器標題，而非自訂標題。

深色模式​

啟用深色模式後，登入頁面會根據使用者系統偏好自動調整外觀。

隱藏 Logto 品牌​

預設情況下，現成的登入體驗頁面會在底部顯示「Powered by Logto」。啟用「隱藏 Logto 品牌」選項，即可移除 Logto 標記，打造專屬於你品牌、乾淨且專業的登入體驗。

應用程式專屬品牌設定 (App-specific branding)​

如果你的多應用程式業務需要應用層級的登入體驗，可在應用程式詳細頁進行設定。前往 主控台 > 應用程式。

開啟「應用層級登入體驗」後，你可以為每個應用程式分別設定品牌標誌、favicon、色彩，甚至 自訂 CSS。當從啟用應用層級品牌的應用程式發起登入時，登入體驗會依據應用層級品牌設定進行自訂；否則將回退至預設的全域登入體驗設定。

應用層級品牌設定同時支援明亮與深色模式。深色模式設定僅在 全域登入體驗 啟用深色模式時生效。

組織專屬品牌設定 (Organization-specific branding)​

若需在登入體驗中動態顯示客戶組織標誌，可於組織設定頁上傳組織標誌。前往 主控台 > 組織。

開啟「組織層級登入體驗」後，與應用層級品牌設定類似，你也可以為每個組織分別設定品牌標誌、favicon、色彩及 自訂 CSS。

接著，在觸發登入時，你可以於 organization_id 參數中傳入組織 ID，告訴 Logto 要顯示哪個組織的標誌。例如，若要顯示組織 ID 為 123456 的組織標誌：

  • 若你使用 Logto SDK，可在 signIn 方法的 extraParams 物件中傳入 organization_id 參數。
  • 若你使用 OIDC client，可在請求 授權端點 (authorization endpoint) 時傳入 organization_id 參數。

組織層級品牌設定同時支援明亮與深色模式。深色模式設定僅在 全域登入體驗 啟用深色模式時生效。

備註:

若同時啟用應用層級品牌與組織層級品牌，將以組織層級品牌優先。完整優先順序為： 組織層級品牌 → 應用層級品牌 → 全域登入體驗

以下為使用 Logto browser SDK 在 signIn 方法中傳入 organization_id 參數的範例：

index.ts

logtoClient.signIn({
  // ...其他參數
  redirectUri: 'https://your-redirect-uri',
  extraParams: {
    organization_id: '123456',
  },
});
備註:

我們正逐步將 extraParams 功能推廣至所有 Logto SDK。如果你尚未在 SDK 中看到此功能，請聯絡我們。

如何為每個應用程式或組織自訂登入體驗？