简体中文
  • 登录体验
  • 组织
  • 应用
  • 自定义

如何为每个应用或组织自定义登录体验？

如何为多应用和多租户业务设置自定义登录体验。

Guamian
Guamian
Product & Design

为你的应用设置登录流程是很常见的，但有时你会遇到一些复杂的情况，

  1. 你运营一个多应用业务。
  2. 你有一个支持不同工作区的多租户应用。

最简单的方法是为所有应用和组织保持统一的登录体验。例如，HubSpot 提供多种产品，但它们的登录体验在所有产品中是一致的。这有助于突出母品牌，比如 HubSpot，而不是单个产品如 Marketing Hub。

Hubspot 产品组合

Hubspot 通用登录页面

应用级登录

一些企业采用多产品战略，但更愿意保持一个统一的用户池。例如，知名的 SaaS 公司 Atlassian 提供多个软件产品，如 Jira 和 Confluence。这是他们的登录屏幕。

Jira 注册页面

登录 URL 包含参数 ?bundle=jira-software，用于表明这是 Jira 产品的登录界面。

Confluence 注册页面

登录 URL 包含参数 ?bundle=confluence，用于指定这是 Confluence 产品的登录界面。

应用之间在登录 UI 上的差异：

  1. 它们使用不同的标志来指示特定产品。
  2. 它们的外观不同，如字体和按钮样式各异。

然而，关键的身份验证方法在所有应用中保持一致。这确保了用户拥有一个统一的个人资料，包括他们的标识符（电子邮件、社交账号）和认证因素（例如，密码），以便更有效的身份管理。

组织级登录

Notion 登录

另一个例子是 Notion，一个允许不同客户托管独立工作区的多租户应用。例如，如果你输入

如果 "Silverhand" 是工作区名称，Notion 会显示组织特定的登录 UI。唯一的区别是标志，其他部分保持不变。

我们如何为每个应用或组织自定义登录体验？

首先，你需要一个身份和认证解决方案作为基础来构建。以 Logto 为例来展示解决方案。Logto 提供了多种选项来实现这一点：

直接在 Logto Cloud 上设置

如果你只是想自定义 Logo 和按钮颜色，这是快速且简单的解决方案。

在应用级别进行配置

应用级品牌

通过开启 "应用级登录体验"，你可以为每个应用设置特定的品牌和颜色。当登录从启用了应用级品牌的应用启动时，登录体验将根据应用级品牌设置进行自定义；否则，将默认为全局登录体验设置。

应用级品牌提供了浅色和深色模式设置。深色模式设置仅在全局登录体验设置中启用深色模式时生效。

在组织级别进行配置

组织级品牌

然后，在触发登录时，你可以在 organization_id 参数中传递组织 ID，以告知 Logto 显示哪个组织标志。例如，要显示组织 ID 123456 的组织标志：

  • 如果你使用 Logto SDK，可以在 signIn 方法的 extraParams 对象中传递 organization_id 参数。
  • 如果你使用 OIDC 客户端，可以在请求 授权端点时传递 organization_id 参数。

以下是在使用 Logto 浏览器 SDK 的 signIn 方法中传递 organization_id 参数的示例：

如果你需要更详细的自定义，请自行提供 UI

如果仅自定义标志和颜色不够——例如，你想隐藏特定的社交登录选项或完全改变外观和感觉——你可以将自己的 UI 上传到 Logto Cloud。

要根据应用或组织显示不同的 UI，请使用搜索参数中的 organization_id 和 app_id。然后，编写脚本根据这些参数控制 UI。更多细节，请参阅 "Bring Your Own UI" 教程。