Azure AD B2C Custom Policy – Configuring the UI Template  

Introduction:

By default, Microsoft has three UI template for the User flow.  

Azure AD B2C UI templates  

1. Azure Blue  

2. Slate Gray  

3. Classic  

With the Azure AD B2C Starter pack you will get an Azure Blue as a default UI template.

This is a continuation of my last article. I highly recommend checking it before jumping into the UI template changes with custom policies.

To Change the UI Template 

To change the UI template from Azure Blue to Classic, copy the ContentDefinitions node from the TrustFrameworkBase file, locate the BuildingBlocks node in TrustFrameworkExtensions file and paste it. 

Change the loadUri from  

Azure Blue 

<LoadUri>~/tenant/templates/AzureBlue/exception.cshtml</LoadUri>  

to Classic

<LoadUri>~/tenant/default/exception.cshtml</LoadUri>  

Complete Code

 <ContentDefinitions>
		  <!-- This content definition is to render an error page that displays unhandled errors. -->
		  <ContentDefinition Id="api.error">
			  <LoadUri>~/tenant/default/exception.cshtml</LoadUri>
			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.1</DataUri>
			  <Metadata>
				  <Item Key="DisplayName">Error page</Item>
			  </Metadata>
		  </ContentDefinition>
		  <ContentDefinition Id="api.idpselections">
			  <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>
			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.1</DataUri>
			  <Metadata>
				  <Item Key="DisplayName">Idp selection page</Item>
				  <Item Key="language.intro">Sign in</Item>
			  </Metadata>
		  </ContentDefinition>
		  <ContentDefinition Id="api.idpselections.signup">
			  <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>
			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.1</DataUri>
			  <Metadata>
				  <Item Key="DisplayName">Idp selection page</Item>
				  <Item Key="language.intro">Sign up</Item>
			  </Metadata>
		  </ContentDefinition>
		  <ContentDefinition Id="api.signuporsignin">
			  <LoadUri>~/tenant/default/unified.cshtml</LoadUri>
			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.5</DataUri>
			  <Metadata>
				  <Item Key="DisplayName">Signin and Signup</Item>
				  <Item Key="setting.showSignupLink">false</Item>
			  </Metadata>
		  </ContentDefinition>
		  <ContentDefinition Id="api.phonefactor">
			  <LoadUri>~/tenant/default/multifactor-1.0.0.cshtml</LoadUri>
			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.5</DataUri>
			  <Metadata>
				  <Item Key="DisplayName">Multi-factor authentication page</Item>
			  </Metadata>
		  </ContentDefinition>
		  <ContentDefinition Id="api.selfasserted">
			  <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.7</DataUri>
			  <Metadata>
				  <Item Key="DisplayName">Collect information from user page</Item>
			  </Metadata>
		  </ContentDefinition>
		  <ContentDefinition Id="api.selfasserted.profileupdate">
			  <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.7</DataUri>
			  <Metadata>
				  <Item Key="DisplayName">Collect information from user page</Item>
			  </Metadata>
		  </ContentDefinition>
		  <ContentDefinition Id="api.localaccountsignup">
			  <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.7</DataUri>
			  <Metadata>
				  <Item Key="DisplayName">Local account sign up page</Item>
			  </Metadata>	
		  </ContentDefinition>
		  <ContentDefinition Id="api.localaccountpasswordreset">
			  <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.7</DataUri>
			  <Metadata>
				  <Item Key="DisplayName">Local account change password page</Item>
			  </Metadata>
		  </ContentDefinition>
		  <ContentDefinition Id="api.localaccountsignin">
			  <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.7</DataUri>
			  <Metadata>
				  <Item Key="DisplayName">Collect information from user page</Item>
			  </Metadata>
		  </ContentDefinition>	
	  </ContentDefinitions>

You just want to replace ‘templates/AzureBlue’ with ‘default’. For Slate Gray replace ‘AzureBlue’ with ‘MSA’ Follow same for all ContentDefinition.

Slate Gray 

<LoadUri>~/tenant/templates/MSA/exception.cshtml</LoadUri> 

Save the changes and upload the TrustFrameworkExtensions file to Azure B2C tenant and test the flow.  

Summary

We have seen how to customize the UI template of the user flow with a custom policy, we will see more about the custom policies in my future article.

Source Code – Download