Branding and Customizing the ADFS Sign-in Pages

Branding and promoting Company name and logos are common business practices. You would like to see your own brand whilst signing into to Microsoft Office 365. ADFS provides opportunity for businesses to customize sign in page and promote own brand. Here are the simple steps and procedure to brand ADFS sign in page.

Remote into ADFS Server and implement below steps to customize ADFS Portal.

Change company name

Import-Module ADFS

Set-AdfsGlobalWebContent –CompanyName “Domain Corp”

Change company logo

Create a logo with 260×35 pixels @ 96 dpi with a file size of no greater than 10 KB and save the file into a path e.g. C:\Domain\logo.png. Then execute the PowerShell.

Set-AdfsWebTheme -TargetName default -Logo @{path=”c:\Domain\logo.png”}

Change Illustration

Create an illustration photo to be displayed on the left hand side of the sign in page. Photoshop illustration.png file to be 1420×1080 pixels @ 96 DPI with a file size of no greater than 200 KB.

Set-AdfsWebTheme -TargetName default -Illustration @{path=”c:\Domain\illustration.png”}

Add sign-in page description

Set-AdfsGlobalWebContent -SignInPageDescriptionText “<p>Sign-in to Domain Corp requires you comply with corporate information uses policy. Click <A href=’http://www.Domain.com/policies/’>here</A&gt; for more information.</p>”

Add Help Desk Link

Set-AdfsGlobalWebContent -HelpDeskLink https://www.Domain.com/help/ -HelpDeskLinkText Help

Add Home Link

Set-AdfsGlobalWebContent -HomeLink https://www.Domain.com/home/ -HomeLinkText Home

Add Privacy Link

Set-AdfsGlobalWebContent -PrivacyLink https://www.Domain.com/privacy/ -PrivacyLinkText Privacy

Customize the Update Password page description

Set-AdfsGlobalWebContent -UpdatePasswordPageDescriptionText “This is the Domain Corp Update Password page.”

Customise error page

Set-AdfsGlobalWebContent -ErrorPageGenericErrorMessage “This is a generic error message.  Contact Domain Corp IT Support on 123466 for assistance.”

Build Custom theme

Export current theme using below Cmdlets.

Export-AdfsWebTheme -Name default -DirectoryPath c:\Domain\Theme\Custom

Replace existing theme with Custom Theme.

New-AdfsWebTheme -Name Custom -SourceName default

Open the script file you downloaded from “C:\Domain\Theme\Custom\script\onload.js” in Notepad

Add this line at the bottom of the script to change the placeholder text in the username input box

document.forms[‘loginForm’].UserName.placeholder = ‘username@domain.com’;

Add these blue lines at the bottom of the script to add a text above the login form, this is an example from Microsoft that you can find further down

// Sample code to update the username format test “someone@example.com”.

var userNameInput = document.getElementById(Login.userNameInput);
if (userNameInput) {
// userNameInput element is present, modify its properties.
userNameInput.setAttribute(‘placeholder’, ‘Corp UserName OR EmailAddress’);
}

// Sample code to change “Sign in with organizational account” string.

// Check whether the loginMessage element is present on this page.
var loginMessage = document.getElementById(‘loginMessage’);
if (loginMessage)
{
// loginMessage element is present, modify its properties.
loginMessage.innerHTML = ‘Sign in with your company email address OR Corp UserName and password’;
}

var AppendUPN = function () {
var userName = document.getElementById(Login.userNameInput);

if ((/^\d+$/.test(userName.value)) && userName.value.length == 6)
{
userName.value = ‘Corp\\’ + userName.value;
}
return true;
}

document.getElementById(‘submitButton’).onclick = new Function(“AppendUPN();return Login.submitLoginRequest();”);
document.getElementById(‘loginForm’).onkeypress = function(event){ if(event && event.keyCode == 13) {AppendUPN();Login.submitLoginRequest()}};

When you are done and save changes. Upload the changes to the newly created theme

Set-AdfsWebTheme -TargetName Custom -AdditionalFileResource @{Uri=’/adfs/portal/script/onload.js’; path=”c:\Domain\Theme\Custom\script\onload.js”}

For ADFS 2016 or ADFS 2019

Set-AdfsWebTheme -TargetName custom -OnLoadScriptPath “c:\ADFStheme\script\onload.js”

Now apply the changes with this command

Set-AdfsWebConfig -ActiveThemeName Custom

Use these commands to verify your settings

Get-AdfsWebConfig

Get-AdfsGlobalWebContent