在 Active Directory 联合身份验证服务中使用 Azure AD UX Web 主题Using an Azure AD UX Web Theme in Active Directory Federation Services

目前 AD FS 窗体登录不会镜像 Azure/O365 登录体验。The AD FS forms sign in currently does not mirror the Azure/O365 sign-in experience. 为了向最终用户提供更统一且无缝的体验,我们发布了以下可应用到 AD FS 服务器的级联样式表 web 主题。To provide a more uniform and seamless experience for end-users, we have released the follow cascading style sheet web theme which can be applied to your AD FS servers. 目前,Windows Server 2016 上的 AD FS 窗体登录如下所示:Currently, the forms sign-in for AD FS on Windows Server 2016 looks like following:

当前登录

利用新的样式表,用户体验将类似于 Azure 和 Office 365 登录体验。With the new style sheet, the user experience will look more like the Azure and Office 365 sign-in experiences.

下载 CSS 样式表Download the CSS style sheet

你可以从以下 Github位置下载 web 主题。You can download the web theme from the following Github location.

启用新的 web 主题Enabling the new web theme

若要启用新的 web 主题,请使用以下过程:To enable the new web theme use the following procedure:

若要启用新的 Azure AD UX web 主题 AD FSTo enable the new Azure AD UX web theme in AD FS

  1. 以管理员身份启动 PowerShellStart PowerShell as an Administrator
  2. 使用 PowerShell 创建新的 web 主题:New-AdfsWebTheme –Name custom –StyleSheet @{path="c:\NewTheme.css"}Create a new web theme using PowerShell: New-AdfsWebTheme –Name custom –StyleSheet @{path="c:\NewTheme.css"}
  3. 使用 powershell 将新主题设置为活动主题: Set-AdfsWebConfig -ActiveThemeName custom  powershellSet the new theme as the active theme using PowerShell: Set-AdfsWebConfig -ActiveThemeName custom PowerShell
  4. 转到 https:// /adfs/ls/idpinitiatedsignon.htm 登录来测试登录 Test the sign-in by going to https:///adfs/ls/idpinitiatedsignon.htm Sign-on

!纪录你需要确保 idpinitiatedsignon.aspx 已启用。![NOTE] You need to ensure that idpinitiatedsignon has been enabled. 默认情况下不启用该日志。It is not enabled by default. 若要启用 idpinitiatedsignon.aspx,请使用以下 PowerShell 命令:Set-AdfsProperties –EnableIdpInitiatedSignonPage $TrueTo enable idpinitiatedsignon use the following PowerShell command: Set-AdfsProperties –EnableIdpInitiatedSignonPage $True

映像建议Image Recommendations

启用居中的 UI 使你可以使用相同的背景和徽标图像 Azure Active Directory 公司品牌。Enabling the centered UI enables you to use the same images for background and logo that you might already have for Azure Active Directory company branding. 通常,相同的大小、比率和格式建议也适用。Generally, the same recommendations for size, ratio, and format do apply.

描述Description 约束Constraints 建议Recommendations
徽标显示在登录面板的顶部。The logo is displayed on top of the login panel. 透明 JPG 或 PNGTransparent JPG or PNG
最大高度:36 pxMax height: 36 px
最大宽度:245 pxMax width: 245 px
在此处使用组织的徽标。Use your organization's logo here.
使用透明图像。Use a transparent image. 不要假设背景为白色。Don't assume that the background will be white.
请勿在映像中的徽标周围添加填充,否则徽标看起来会很小。Do not add padding around your logo in the image or your logo will look disproportionately small.

背景Background

描述Description 约束Constraints 建议Recommendations
此选项显示在登录页的背景中,定位在可视空间的中心,并可通过缩放和裁剪来适应浏览器窗口。This option appears in the background of the sign-in page, is anchored to the center of the viewable space, and scales and crops to fill the browser window.
在诸如手机这类窄屏上,将不会显示此图像。On narrow screens such as mobile phones, this image is not shown.
当页面加载时,将对此图像应用一个不透明度为 0.55 的黑色蒙板。A black mask with 0.55 opacity is applied over this image when the page is loaded.
JPG 或 PNGJPG or PNG
图像尺寸:1920x1080 pxImage dimensions: 1920x1080 px
文件大小:< 300 KBFile size: < 300 KB

在没有鲜明主题的位置处使用图像。Use images where there isn't a strong subject focus. 不透明的登录窗体出现在此图像的中心之上,可以覆盖图像的任何部分,具体取决于浏览器窗口的大小。The opaque sign-in form appears over the center of this image and can cover any part of the image, depending on the size of the browser window.
请使该文件保持较小,以确保快速加载。Keep the file size small to ensure quick load times.

后续步骤Next Steps