跳到主要内容

匹配你的品牌

全渠道登录体验​

通过进入 控制台 > 登录与账户 > 品牌，自定义你的登录页面的外观和风格。该部分允许你轻松调整关键品牌元素。

品牌色​

定义在登录体验和开箱即用的账户中心中使用的主色，包括主按钮、链接和其他组件。将默认的 Logto 紫色替换为你的品牌色。对于深色模式，可以单独指定品牌色。

Logo 将显示在登录首页、注册首页、加载页面以及我们扩展的其他界面中。

  • 图片有一些限制：必须小于 500KB，且格式为 SVG、PNG、JPG、JPEG 或 ICO。
  • 如果你将 logo 字段留空，界面中将不会显示 logo。
  • 也可以上传深色模式版本的 logo。

网站图标（Favicon）​

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

  • 图片必须小于 500KB，且格式为 SVG、PNG、JPG、JPEG 或 ICO。建议上传正方形图片以确保良好的展示效果。
  • 也可以上传深色模式版本的 favicon。
  • 此外，不同流程（登录 / 注册 / 忘记密码等）的浏览器标题现在会自动使用，无需自定义标题。

深色模式​

启用深色模式后，登录页面的外观会根据用户的系统偏好自动调整。

隐藏 Logto 品牌​

默认情况下，开箱即用的登录体验页面和账户中心会在底部显示“Powered by Logto”。启用“隐藏 Logto 品牌”选项后，可以移除 Logto 标识，打造专属于你品牌的简洁、专业的登录体验。

应用程序特定品牌​

如果你的多应用业务需要应用级别的登录体验，可以在应用详情页进行配置。前往 控制台 > 应用程序。

开启“应用级别登录体验”后，你可以为每个应用设置专属的品牌 logo、favicon、颜色，甚至 自定义 CSS。当从启用了应用级别品牌的应用发起登录时，登录体验将根据应用级别品牌设置进行定制；否则，将回退到默认的全渠道登录体验设置。

应用级别品牌支持浅色和深色模式设置。深色模式设置仅在 全渠道登录体验 设置中启用深色模式时生效。

组织特定品牌​

如果你希望在登录体验中动态展示客户组织的 logo，可以在组织设置页面上传组织 logo。前往 控制台 > 组织 (Organizations)。

开启“组织级别登录体验”后，和应用级别品牌一样，你也可以为每个组织设置专属的品牌 logo、favicon、颜色和 自定义 CSS。

然后，在触发登录时，你可以通过 organization_id 参数传递组织 ID，告诉 Logto 显示哪个组织的 logo。例如，要显示组织 ID 为 123456 的组织 logo：

  • 如果你使用 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 中还未看到该功能，请联系我们。

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