跳至主要內容

符合你的品牌

全方位登入體驗​

前往 控制台 > 登入體驗 > 品牌設定 自訂你的登入頁面外觀。此部分允許你輕鬆調整關鍵品牌元素。

品牌色彩

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

公司標誌

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

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

網站圖示 (Favicon)

網站圖示是一個小圖標，代表網站，顯示在瀏覽器標籤、書籤及其他瀏覽器介面區域。

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

深色模式

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

應用程式專屬品牌設定​

如果你的多應用程式業務需要應用程式層級的登入體驗，可以在應用程式詳細資訊頁面中配置。前往 控制台 > 應用程式。

開啟「應用程式層級登入體驗」後，你可以為每個應用程式設置特定的品牌和色彩。當從啟用了應用程式層級品牌的應用程式發起登入時，登入體驗將根據應用程式層級品牌設定進行自訂；否則，將默認為全方位登入體驗設定。

應用程式層級品牌設定提供了亮色和深色模式。深色模式設定僅在 全方位登入體驗 設定中啟用深色模式時生效。

組織專屬品牌設定​

若要在登入體驗中動態顯示客戶的組織標誌，可以在組織設定頁面上傳組織標誌。前往 控制台 > 組織。

然後，當觸發登入時，可以在 organization_id 參數中傳遞組織 ID，告訴 Logto 顯示哪個組織的標誌。例如，要顯示組織 ID 123456 的組織標誌：

  • 如果你使用 Logto SDK，可以在 signIn 方法的 extraParams 物件中傳遞 organization_id 參數。
  • 如果你使用 OIDC 客戶端，可以在請求 授權端點 時傳遞 organization_id 參數。

組織層級品牌設定提供了亮色和深色模式。深色模式設定僅在 全方位登入體驗 設定中啟用深色模式時生效。

以下是使用 Logto 瀏覽器 SDK 在 signIn 方法中傳遞 organization_id 參數的範例：

index.ts

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

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

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