Introduction:
This is a continuation of my last article about Azure AD B2C integration with the ASP.NET Core application. In this article, we are going to see how to use the custom Layout in the User workflow with Azure AD B2C. In my last article, we have seen the default layout of the user workflow pages, basically with sign-in and sign-up pages. But there might be some requirements where the organization needs to display their banners or they might want to stick with their custom design to maintain the uniformity or the theme of the website. To attain this requirement, we can use the custom Layout feature in Azure AD B2C.
Custom Layout in User Flow:
We can customize the default page content provided by Azure AD B2C. Let’s create an HTML page. This HTML page can have CSS and JavaScript. Each page (Login, Register, and so on) is based on the user flow we created.
I have created Sign up and sign-in, Profile editing, and Password reset for Azure AD B2C, which we integrated with our last article.
The HTML page created for Sign in and sign-up flow.
<!DOCTYPE html>
<html>
<head>
<title>My Product Brand Name</title>
</head>
<body>
<div id="api" class='content'></div>
</body>
<style>
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background-image: url('https://mysawebappmi.blob.core.windows.net/b2container/IMG_5401.JPG');
opacity: 0.5;
}
.content {
position: relative;
z-index: 2;
}
</style>
</html>
<div id="api" class='content'></div>This div element with id=”api” is the only required element for our HTML page. All the controls are loaded within this div element. I have added this class attribute to use the CSS class to set the background image for the form.
Note: I haven’t touched any other design changes in the form with this HTML page. I just added a background image. You can also define the CSS for the HTML form on this page that will reflect on the Sign-in and Sign-up page. We shouldn’t use insecure elements like iframes.
Create Azure Storage Account:
This source of HTML page can be anything, in my case I’m using azure storage account to store the HTML page. You can use dynamic page like .NET, PHP or Node.js. But Azure AD B2C custom layout doesn’t support View Engine.
Follow this article, to create an Azure storage account.
I have uploaded the HTML page and background image into a newly created blob container.
Now copy the URL of the Sample.html page, and make sure the access level should be at least blob (anonymous read access for blob only)
Setup Custom Page Layout for user flow:
Go to your Azure AD B2C resource in the Azure portal, and select user flow from the policies blade.
Select Sign-up and Sing-in flow, and select Page Layouts under Customize Blade.
Under the unified sign-up or sign-in page, set Use Custom page content to Yes and paste the html page URL into the Custom page URI field.
Save the changes.
Run the application:
Go to .NET application, created in my last article, and run the application. Now you can see the custom login screen.
Note: I have set only the background image for this form. You can still create a CSS class to apply a style for those controls in the HTML form.
Summary:
We explored how to customize the sign-in and sign-up page layout for Azure AD B2C in this article. It is one of my favorite features in Azure AD B2C that allows the organization to design and show their branding and to maintain their application style (theme) so that users will not get a feeling that they were taken to somewhere for the authentication.
