- WPF App and Web API using Azure AD and MSAL
- Daemon App that calls Web API – Azure AD using MSAL
- Angular App and Azure AD Protected web API using MSAL
- Protect .NET Core Angular App with Azure AD B2C
- Protect .NET Core API Using Azure AD B2C and MSAL
- Azure AD B2C and MSAL with .NET Core WPF App
- Five Gotchas while using MSAL with Azure AD
- Azure AD B2C and Custom Web UI for .NET Core WPF App
Why this post ?
I received quite some comments mails about the MSAL series and how it is helping people. Some of the readers asked this question – can I use the Azure AD MSAL for authentication and still use my custom login page ? There is also stackoverflow question asking the same thing.
I have already covered in one of the posts in the series that the login pages are by default provided by Azure AD service. Those login pages can be customized and the brand information, colors, background images can be changed to make the look and feel similar to your web application. All those configurations are very easy and can be done very quickly.
If this is not sufficient, then you can go for having a custom login page. But obviously, in this case, the efforts required would be higher than just customizing the default pages. If you still want to go for it, then this post would cover the step by step information on how to set it up.
Please note that you should always have a look at the customization options provided by the the Company branding feature. Most of the customizations can be done using that feature as explained in my previous blog post. If this feature is not helping you to achieve the intended outcome, then only you should try the next steps.
For this demo, you will need Azure Subscription. If you don’t have an Azure subscription, create a free account before you begin.
Also, you can refer the article – Protect .NET Core Angular App with Azure AD B2C – to setup the Azure AD B2C and a web application which is protected by that AD instance.
The idea is to have a custom HTML page instead of Azure AD’s login page, so that the consumer should be able to modify look and feel, theme etc. so that the page looks very similar to consumer’s site.
Please note that it does not cover showing login page as popup on the site.
So, let’s get started !
Custom HTML Rules
In this section, we are going to see how to create a custom HTML for the sign-in page. But before directly jumping into steps of creating the HTML, let’s first understand the rules to be taken care of.
- The HTML can be either static HTML or it can also be a dynamic page created using .NET, PHP, etc.
- The page can include CSS and JS, but it cannot include insecure elements like iframes, frames, or forms..
- The only requirement from Azure AD is there should be an empty
- You can host your new page on any public service, that supports HTTPS and CORS.
- Using page layout version 1.2.0 and above, you can add the
- Safari, Mozilla, Chrome and Edge are the main supported browsers. For details about versions refer the documentation.
- It is recommended to start from the source code of Azure AD B2C pages, host them, get them working, and then build on top of this to ensure everything works. Refer the exception.html for the source code of default pages.
High Level Steps
Below are high level steps for our intended setup:
- Develop: Download and customized the default file
- Prepare Host: We will use storage account for hosting the static HTML page. Once you understand the conceptual implementation, it should be easy to extend the concept and host the page anywhere publicly available CORS enabled HTTPS endpoint.
- Publish the custom HTML file from step 1 to publicly available CORS enabled HTTPS endpoint.
- CORS: Set cross-origin resource sharing (CORS) for your web app.
- Update User Flow: Point your policy to your custom policy content URI.
I will skip explaining the below code. It is a HTML / CSS / JS combo with default div with id set to api. Just copy this to start setting up the custom page.
If you open the HTML file in browser, it should be rendered as shown in below snapshot:
Prepare Host – Storage Account & Container
We will use simplest method – storage accounts and blob containers to host the web page. Please refer this previous blog post for step by step guide on how to create a storage account and a container.
Below snapshot shows important inputs on first screen of wizard. Rest of the inputs can be left to their default values.
Once storage account is created, create a blob container with name root. Below snapshot highlights the inputs required for this container creation. Please make sure you select public access level as shown in the snapshot.
Now, upload the file to the root container that we have created in previous step.
For this, you will have to open the container by clicking on it and then on the new panel, select Upload button from the Overview panel as shown below.
Clicking on upload will open a new right side panel, where you can select the file and keep rest of the inputs to their default values. Then click on Upload button on right hand side panel.
Now, let’s navigate to the storage account that you have created in previous step. Then select CORS option from the left side navigation and then enter below inputs:
- Allowed Origins,
https://tenant-name.b2clogin.com. Please replace
tenant-namewith the name of your Azure AD. Ensure that there is no trailing slash at the end of input URL.
- Allowed Methods, select two options from dropdown
- Allowed Headers, enter ‘*‘
- Exposed Headers, enter ‘*‘
- Max Age, provide the value 200.
Once these inputs are provided, click on Save button to save the settings.
For testing purpose, let’s add another entry.
Repeat the same steps to add another entry in the CORS settings table. This time use
https://www.test-cors.org as the Allowed Origins url and rest of the inputs should be same as in previous row.
The site http://www.test-cors.org allows you to send the XHR request to local or remote URL.
Navigate to https://www.test-cors.org and enter the remote URL of your HTML page. The URL of HTML page would be something like
storage-account-name should be replaced by the actual name of the storage account. Then hit the Send Request button.
This should return XHR Status: 200 in the response. If it is not 200 OK response, then you might have missed a step in CORS configuration so validate your settings before proceeding further.
Update User Flow
If you do not know about user flows, I would suggest to please go through this post to get the basic concepts.
So, switch to the Azure AD B2C directory now and search for Azure AD B2C in the search box and select the entry. Then select User Flows under Policies. Select the user flow which is applicable for the site and then select Page layouts menu option from the next page.
In the user flow page layouts, select Unified sign up or sign in page entry and then provide below inputs:
- Use custom page content should be toggled and set it to Yes.
- Custom Page URI should be set to the
storage-account-nameshould be replaced by the actual name of the storage account.
Let other inputs as they are. Then click on Save button.
To verify the changes, you can either run the user flow from edit page layout screen OR you can try to access the protected application via browser. If you are not logged in to it, the Azure AD would show our custom html on the login page.
The login page would look something similar to the below snapshot.
Yay, we have successfully configured custom HTML for the Azure AD B2C login page. The sign in section is still not fully styled, but I hope you have got the conceptual idea.
As recommended in the documentation, you can start with the HTML and CSS of the default pages and then build up on that template to achieve the intended result.
I hope you liked this new article from the Azure AD series. Let me know your thoughts.