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

為你的應用程式設置登入流程是相當常見的，但有時你會遇到一些比較複雜的情況，

1. 你經營一個多應用程式的企業。
2. 你有一個多租戶應用程式，支持不同的工作空間。

最簡單的方法是為所有應用程式和組織維持一個統一的登入體驗。例如，HubSpot 提供各種產品，但它們的登入體驗在所有產品中是一致的。這有助於強調母品牌，如 HubSpot，而不是個別產品如 Marketing Hub。

應用程式級別登入#

一些企業遵循多產品策略，但傾向於保持單一使用者池。例如，知名的 SaaS 公司 Atlassian，提供多個軟體產品如 Jira 和 Confluence。以下是他們的登入畫面。

登入 URL 包含參數 ?bundle=jira-software，以表明這是針對 Jira 產品的登入介面。

登入 URL 包含參數 ?bundle=confluence，以指定這是針對 Confluence 產品的登入介面。

應用程式之間的登入 UI 差異：

1. 它們使用不同的標誌來指示特定產品。
2. 它們有不同的外觀，如不同的字體和按鈕樣式。

然而，所有應用程式的關鍵驗證方法保持一致。這確保使用者有一個統一的檔案，包括他們的識別符（電子郵件，社交帳號）和驗證因素（例如密碼），以便更有效地管理身份。

組織級別登入#

另一個例子是 Notion，一個多租戶應用程式，允許不同的客戶主辦分開的工作空間。例如，當你輸入

如果“Silverhand”是工作空間的名稱，Notion 會顯示組織特定的登入 UI。唯一的差異是標誌，其他一切保持不變。

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

首先，你需要一個身份和驗證解決方案作為基礎進行構建。讓我們以 Logto 為例來展示解決方案。Logto 提供了各種選項來實現這一點：

直接在 Logto Cloud 上設置#

如果你只想自訂標誌和按鈕顏色，這是快速且最簡單的解決方案。

在應用程式級別配置#

通過開啟“應用程式級別的登入體驗”，你可以為每個應用程式設定特定的品牌和顏色。當一個應用程式啟動了應用程式級別的品牌時，登入體驗將根據應用程式級別的品牌設定進行自訂；否則，它將默認為統一的登入體驗設置。

應用程式級別的品牌設定提供輕模式和暗模式設置。當啟用了統一的登入體驗設置中的暗模式時，暗模式設置將生效。

在組織級別配置#

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

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

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

如果你需要更詳細的自訂，請使用自己的 UI#

如果自訂標誌和顏色還不夠——例如，如果你想隱藏特定的社交登入選項或完全更改外觀和感覺——你可以將自己的 UI 上傳到 Logto Cloud。

要根據應用程式或組織顯示不同的 UIs，請從搜尋參數中使用 organization_id 和 app_id。然後，寫一個腳本來根據這些參數控制 UI。如需更多詳細信息，請參考“帶上自己的 UI”教程。