跳至主要內容

契合你的品牌

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

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

品牌色

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

公司標誌

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

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

網站小圖示 (Favicon)

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

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

深色模式 (Dark mode)

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

應用程式專屬品牌設定 (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 尚未支援，請聯絡我們。

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