跳到主要内容

匹配你的品牌

全局登录体验​

通过导航到 控制台 > 登录体验 > 品牌，自定义你的登录页面的外观和感觉。此部分允许你轻松调整关键的品牌元素。

品牌颜色

定义在整个登录体验中使用的主要颜色，包括主要按钮、链接和其他组件。用你的品牌颜色替换默认的 Logto 紫色。对于暗模式，可以指定一个单独的品牌颜色。

公司标志

标志将显示在登录主页、注册主页、加载页面和其他界面上。

  • 对于图像有一些限制：它们必须小于 500KB，并且为 SVG、PNG、JPG、JPEG 或 ICO 格式。
  • 如果你将标志字段留空，标志将不会显示在界面中。
  • 也可以上传暗模式版本的标志。

网站图标

网站图标是代表网站的小图标，显示在浏览器标签、书签和浏览器界面的其他区域。

  • 图像必须小于 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',
  },
});
备注:

我们正在逐步向所有 Logto SDK 推出 extraParams 功能。如果你在你的 SDK 中尚未看到它，请联系我们。

相关资源​

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