Partager via

Customizing ADFS 3.0 Sign-in Page

  • Article

Introduction

In ADFS 3.0 (aka ADFS in Windows Server 2012 R2) customization of Sign-in page is quite different from the earlier versions of ADFS. This post gives an overview of Sign-in page customization in ADFS 3.0.

Customization Options

In ADFS 3.0 there is no dependency on IIS. Hence, there is no IIS available in the ADFS 3.0 Server. Because of this, you do not have any .aspx or .master page in the file system which you can go ahead and edit directly to apply the customizations you need.

In this version of ADFS 3.0, any customization should be done by using PowerShell commands and all the customizations are stored in the ADFS configuration database instead of file system. The advantage is that there is no need to update the files in individual ADFS instances in a farm kind of scenario. Execute the PowerShell commands once and all the ADFS instances in the farm are reflected with the customizations.

Figure: General Sign-in page ADFS 3.0

There are two options for customizing the sign-in page.

Customizing Logo, Footer Links, Sign-in description using PowerShell commands

  • PowerShell commands for customizing individual parts of the sign-in page are documented in Microsoft TechNet article - https://technet.microsoft.com/en-in/library/dn280950.aspx
  • Though these PowerShell commands give you quick way to customize Logos and descriptions, sometimes you might need to customize the entire theme of the sign-in page by applying new styles.
  • I had a similar requirement to completely change the look of sign-in page. As we don't have much control using this option of customization, I had used the second option - using Custom Web Themes to customize sign-in page.

Custom Web Themes

Using this option of customizing the sign-in page gives you much control since you now have control of the CSS and JavaScript files used in the sign-in page. The final sign-in page after applying custom web theme looks as below.

Figure: ADFS 3.0 Sign-in page after applying custom web theme

Custom web theme allows us to customize the CSS Style Sheet, Logos, and JavaScript file which are used in the construction of Sign-in page. Below is the procedure to build a custom web theme.

  1. Export the files used in Default web theme of ADFS. Default web theme comes by default out-of-box with ADFS.

            Export-AdfsWebTheme –Name default –DirectoryPath c:\custom-theme

  1. Create a new theme and name it as you like (Ex: custom-theme)

   New-AdfsWebTheme -Name "custom-theme" -SourceName default

  1. Now, edit the files exported in Step-1. You can edit style.css, onload.js and add images. The theme folder structure is as below: 

ThemeRoot

        |-css

            |-style.css

            |-style.rtl.css

        |-images

            |-logo.png

        |-script

            |-onload.js 

  1. After modifying the logo, you can apply it to the custom-theme using the PowerShell command below. 
 Set-AdfsWebTheme -TargetName "cusotm-theme" -Logo @{Locale="";path="C:\custom-theme\images\logo.png"}
  1. After modifying the style sheet (style.css and style.rtl.css) apply the same to the new theme.

 Set-AdfsWebTheme -TargetName "custom-theme" -StyleSheet @{Locale="";path="C:\custom-theme\css\style.css"} -RTLStyleSheetPath "C:\custom-theme\css\style.rtl.css"

  1. After modifying the JavaScript file (onload.js) apply the same to the new theme.

 Set-AdfsWebTheme -TargetName $ThemeName -AdditionalFileResource @{Uri="/adfs/portal/script/onload.js";path="C:\custom-theme\script\onload.js"}

  1. And finally activate the new custom theme in ADFS to start seeing the changes

 Set-AdfsWebConfig -ActiveThemeName "custom-theme"

  1. If you are not satisfied with the changes you have done, update the files again and apply them to the custom-theme as mentioned in the above steps.