匹配你的品牌
全局登录体验
通过进入 控制台 > 登录体验 > 品牌设置,自定义你的登录页面的外观和风格。本部分允许你轻松调整关键品牌元素。
品牌色
定义登录体验中使用的主色,包括主按钮、链接和其他组件。将默认的 Logto 紫色替换为你的品牌色。对于深色模式,可以单独指定品牌色。
公司 Logo
Logo 将显示在登录首页、注册首页、加载页以及我们扩展的其他界面。
- 图片有一些限制:必须小于 500KB,且为 SVG、PNG、JPG、JPEG 或 ICO 格式。
- 如果你将 logo 字段留空,界面中将不会显示 logo。
- 也可以上传深色模式下的 logo 版本。
Favicon
Favicon 是代表网站的小图标,会显示在浏览器标签页、书签和浏览器界面的其他区域。
- 图片必须小于 500KB,且为 SVG、PNG、JPG、JPEG 或 ICO 格式。建议上传正方形图片以确保良好的展示效果。
- 也可以上传深色模式下的 favicon 版本。
- 此外,不同流程(登录 / 注册 / 忘记密码等)的浏览器标题现在会自动使用,无需自定义标题。
深色模式
启用深色模式后,登录页面会根据用户的系统偏好自动调整外观。
应用级品牌设置
如果你的多应用业务需要应用级的登录体验,可以在应用详情页进行配置。前往 控制台 > 应用。
开启“应用级登录体验”后,你可以为每个应用单独设置品牌 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 中还没有看到该功能,请联系我们。
相关资源
如何为每个应用或组织自定义登录体验?