In the post ASP.NET Core with Azure B2C Auth we did a walkthrough of setting up the basics of Azure B2C and creating a new application that used our new B2C setup for auth. This post is going to be using that same setup to show how to replace the Microsoft provided pages for sign up/sign in with your own custom pages.
Custom Page Hosting
Our custom page needs to be hosted somewhere public with CORS enabled. If the test application was hosted somewhere public we could just us it, but since it is running on localhost that isn’t currently an option. We are going to use Azure Blob storage for hosting in this example.
Create A Storage Account
From the Azure Portal select Storage accounts.
Click the Add button.
Next, on the Create storage account page, I used a new resource group and tried storage accounts names until I found an unused one. For the rest of the fields, I took the defaults and then clicked Review + create.
On the review + create page it takes a few seconds for the account to be validated. After validation click the Create button.
After the storage deployment is complete click the Go to resource button.
Setup Blob storage
The above will land you on the Overview page for the new storage account. Select CORS from the menu.
Since this is just a test I’m allowing everything under the Blob service, for a real deploy I would recommend only allowing the values you expect requests from. After setting your values click the Save button.
Back on the storage menu on the right side of the screen select Blobs.
Click the + Container button to create a new blob storage container.
In the new container, page enter a name and select your public access level. I’m going with the most permissive access level, for a production system you will need to evaluate the appropriate access level for your use case. Click OK when done.
When done you will be returned to your list of containers. Click on the container that was just created to view the details.
Create a custom page
Now that we have our blob storage we need to create the HTML page that we want to to use instead of the default. The following is the code for the page I’m going to use. It is going to be super ugly as I’m not going to use any styling.
<!DOCTYPE html>
<html>
<head>
<title>Custom Page!</title>
</head>
<body>
<h1>Custom Page!</h1>
<div id="api"></div>
</body>
</html>
You can make this page look however you want, but it will always need the div with the ID of API as this is where Azure will inject the elements that actually handle the signup/sign in. Save your page.
Upload custom page to blob storage
Back in Azure click the Upload button and then select your file and click the Upload button.
After upload, you will be returned to the list of items in your current container. Click the item you just created. In the details copy the URL as we are going to need it to give B2C the location of our custom page.
B2C use custom page
In your portal head back to your Azure AD B2C page and select User flows.
Select the flow you want to use the custom page for. In our case, we are going to be using the flow for Sign up and sign in.
In the Customize section select Page layouts.
In the bottom of the page select Yes for Use custom page content and past the link to your blob from above into the Custome page URI field and click Save.
Try it out
With all of the above setup you can now go back to the application using B2C and hit your sign in link and you will see your custom page. Here is what the one in the sample looks like.
Obviously, this example is really ugly and isn’t something you would do to your users, but it gives you the basic idea of how to use a custom page.
Wrapping Up
Hopefully the above will help you get started with customizing you B2C related pages to give your users a more consistent look and feel. The above only uploaded an HTML page to blob storage, but you could also upload a CSS file or any other assets you need. Also, don’t forget if your site is publicly accessible the assets can be stored with the rest of your application in that is appropriate, just remember to configure CORS to allow requests from Azure.
If you want more information on this topic check out the official docs from Microsoft on the subject.
Also published on Medium.
Thank you for good article. After following the steps for signinup custom policy the above page, “Custom Page!”, is displayed. After clicking sign up now! the next page doesn’t take this layout. Please comment.