使用外部租户中的品牌主题自定义应用程序的登录体验(预览版)

适用于绿色圆圈,带有白色复选标记符号,指示以下内容适用于外部租户。 外部租户(了解详细信息

重要

应用程序的品牌主题目前以预览版提供。 此信息与可能在发布前进行实质性修改的预发行版产品相关。 Microsoft 不对此处提供的信息作任何明示或默示的担保。

可以为租户中的应用程序创建唯一的身份验证体验。 每个应用程序都可以有自己的主题,可以使用背景图像或颜色、favicon、布局、页眉和页脚进行自定义。 此自定义将替代对默认品牌所做的任何配置。 如果未对元素进行任何更改,将显示默认元素。

本文介绍如何为租户中的不同应用程序创建多个品牌主题。

先决条件

  • 至少具有 组织品牌管理员 角色。
  • 对于要向其应用主题的应用程序,至少具有 应用程序管理员 角色。
  • 在你的租户中已注册的应用程序。 如果尚未注册应用程序,请参阅 “注册应用程序”。
  • 查看要添加的每个图片的文件大小要求。 如果需要,请使用照片编辑器创建正确大小和格式的图像:图像大小为 245x36px 且最大文件大小为 10KB 的 PNG、JPG 或 JPEG。

品牌主题属性

创建品牌主题时,可以自定义一些属性。

登录页的屏幕截图,其中突出显示了每个默认品牌元素。

资产 Description
Favicon 显示在浏览器选项卡左侧的小图标。
Header 登录页顶部的空格,位于页眉日志后面。
标题徽标 登录页左上角显示的徽标。
背景图像 登录框后面的整个空间。
页面背景色 登录框后面的整个空间。
横幅徽标 登录框顶部显示的徽标
登录页标题 横幅徽标下方显示的较大文本。
登录页说明 描述登录页的文本。
用户名提示和文本内容 用户输入其信息之前显示的文本。
登录显示消息框 可在用户名字段下方添加文本。
页脚链接:隐私和 Cookie 可以在右下角添加用于隐私信息的链接。
页脚:使用条款 页面右下角的文本,可在其中添加使用条款信息。
脚注 页面底部的空间,用于隐私和使用条款信息。
Template 页面和登录框的布局。

品牌主题的工作原理

品牌主题基于中性品牌和默认品牌打造。

  • 品牌主题 - 默认品牌自定义,可在其中拥有多个主题。
  • 默认品牌(公司品牌) - 租户中性品牌自定义。
  • 中性品牌 - 租户的初始品牌打造。

以下是关于品牌主题工作原理的一些重要事项。

  • 品牌主题可以应用于特定的应用程序,而在租户范围内将应用默认品牌设计。
  • 默认品牌用作回退,以处理品牌主题中未定义的属性。
  • 中性品牌用于默认品牌中未定义的任何属性。

限制和约束

下面是品牌主题的一些限制和约束。

  • 每个租户最多可以创建 5 个品牌主题。
  • 实时预览功能预览样式和布局更改,仅显示“登录”页。 实时预览不包含任何自定义文本替代。
  • 不能将名称 默认主题 用于品牌主题名称。 此名称保留。
  • 自定义文本更改目前仅限于登录页。
  • 如果未更新横幅徽标属性,将显示Microsoft徽标,而不是租户名称(中性品牌)。

创建新主题

  1. 组织品牌管理员应用程序管理员身份登录到 Microsoft Entra 管理中心

  2. 浏览到 Entra ID>自定义品牌

  3. “公司品牌 ”页上,选择“ 品牌”主题 ,然后选择“ 主题 ”选项卡。

    “公司品牌”页和“主题”选项卡的屏幕截图。

  4. 选择创建新主题

  5. 在“ 基本信息 ”选项卡上,输入主题 的名称

    “创建主题”页和“基本信息”选项卡的屏幕截图,用于将主题应用于应用程序。

  6. 若要选择将使用此主题的应用程序,请在 “应用主题”下选择“ 添加应用程序”。 (或者以后可以 添加应用程序

  7. 布局 选项卡上,选择登录页上网页元素的位置。

    • 布局模板 – 选择登录面板在页面上是居中对齐还是右对齐。
    • 页眉 – 若要在页面页眉中显示图像,请选中该复选框并浏览要显示的图像。 要求:图像大小为 245x36px 且最大文件大小为 10KB 的透明 PNG、JPG 或 JPEG。
    • 页脚 – 若要显示包含指向已发布隐私和 Cookie 和/或使用条款语句的链接的页面页脚,请选中相应的复选框,输入链接文本,并添加内容的 URL。

    “创建主题”页和“布局”选项卡的屏幕截图,用于指定登录体验。

  8. 选择 “预览 ”按钮以查看对布局的更改。

    用于预览布局的“预览”按钮的屏幕截图。

  9. “样式设置 ”选项卡上,修改任何背景元素。

    • 背景色 – 每当无法加载图像时替换背景图像的颜色,例如由于连接延迟。
    • 背景图像 – 登录页上显示的大型图像。 如果上传图像,它会缩放和裁剪以填充浏览器窗口。
    • Favicon – Web 浏览器选项卡中显示的图标。
    • 横幅徽标 – 在登录页和用户访问面板中显示。
    • 方形徽标(浅色主题) - 表示租户中的用户帐户。
    • 方形徽标(深色主题) – 如果浅色主题方形徽标在深色背景上显示得很差,则可以在使用深色背景时上传要在其位置使用的徽标。
    • 自定义 CSS – 上传自己的 CSS 文件,将默认Microsoft样式替换为自己的样式:颜色、字体、文本大小、元素的位置,以及不同设备和屏幕大小的显示。 有关详细信息,请参阅 CSS 模板参考指南

    “创建主题”页和“样式设置”选项卡设置的屏幕截图。

  10. 选择 “预览 ”按钮以查看样式更改。

    自定义登录体验的屏幕截图。

  11. 在“ 自定义文本 ”选项卡上,对于 “登录 ”页,选择 “默认 ”链接。

    “创建主题”页和“自定义文本”选项卡设置的屏幕截图。

  12. 自定义所选页面的文本,然后选择“ 添加”。

    为主题设置的自定义文本可能会影响本地化的 UX,因为它们不会本地化。 为了确保所有文本的完整本地化,请为每个主题语言设置自定义文本。

    登录页的“编辑自定义文本”页的屏幕截图。

  13. 在“ 审阅 ”选项卡上,查看设置。

  14. 选择“ 创建 ”以创建主题。

将主题应用于应用程序

在本部分中,将主题应用于租户中的应用程序。

  1. 在“ 品牌主题 ”页上,选择“ 主题 ”选项卡。

  2. 选择创建的主题以打开概述。

  3. “基本信息”下,选择铅笔编辑图标。

    编辑主题页的“概述”选项卡的屏幕截图。

  4. 在“ 应用主题”下,选择 “编辑” 以编辑应用程序列表。

    用于编辑应用程序列表的“编辑基本信息”页的屏幕截图。

  5. 请搜索或浏览至您的应用。 选中复选框,然后选择 “选择”。

    “添加应用程序”页的屏幕截图,用于选择应用程序。

编辑主题

在本部分中,您将编辑一个主题。

  1. 在“ 品牌主题 ”页上,选择“ 主题 ”选项卡。

  2. 选择创建的主题以打开概述。

  3. 选择要编辑的部件的铅笔编辑图标。

向主题添加语言

在本部分中,将语言添加到主题。

  1. 在“ 品牌主题 ”页上,选择“ 主题 ”选项卡。

  2. 选择创建的主题以打开概述。

  3. 在“ 语言 ”选项卡上,选择“ 添加语言 ”以自定义主题的语言。

    自定义语言的步骤类似于自定义品牌主题。

    用于添加语言的“语言”选项卡的屏幕截图。

  4. 在“ 基本信息 ”选项卡上,选择一种语言。

    “添加语言”页和“基本信息”选项卡的屏幕截图,用于选择语言。

    支持以下语言:

    • 阿拉伯语(沙特阿拉伯)
    • 巴斯克语(巴斯克)
    • 保加利亚语(保加利亚)
    • 加泰罗尼亚语 (加泰罗尼亚语)
    • 中文(中国)
    • 中文(香港特别行政区)
    • 克罗地亚语(克罗地亚)
    • 捷克语(捷克)
    • 丹麦语(丹麦)
    • 荷兰语(荷兰)
    • 英语(美国)
    • 爱沙尼亚语(爱沙尼亚)
    • 芬兰语(芬兰)
    • 法语(法国)
    • 加利西亚语(加利西亚语)
    • 德语(德国)
    • 希腊语(希腊)
    • 希伯来语(以色列)
    • 匈牙利语(匈牙利)
    • 意大利语(意大利)
    • 日语(日本)
    • 哈萨克语(哈萨克斯坦)
    • 韩语(韩国)
    • 拉脱维亚语(拉脱维亚)
    • 立陶宛语(立陶宛)
    • 挪威博克mål
    • 波兰语(波兰)
    • 葡萄牙语(巴西)
    • 葡萄牙语(葡萄牙)
    • 罗马尼亚语(罗马尼亚)
    • 俄语(俄罗斯)
    • 塞尔维亚语(拉丁语,塞尔维亚共和国)
    • 斯洛伐克语(斯洛伐克)
    • 斯洛文尼亚语(斯洛文尼亚)
    • 西班牙语(西班牙)
    • 瑞典语(瑞典)
    • 泰语(泰国)
    • 土耳其语 (Türkiye)
    • 乌克兰语(乌克兰)
  5. 自定义 布局样式自定义文本 选项卡上的元素。

  6. 在“ 审阅 ”选项卡上,选择“ 添加” 以添加语言。