Custom HTML and CSS Overview in Azure AD B2C

Azure AD B2C runs code in your customer’s browser by using Cross-Origin Resource Sharing (CORS). At runtime, content is loaded from a URL you specify in your user flow or custom policy. Each page in the user experience loads its content from the URL you specify for that page. After content is loaded from your URL, it’s merged with an HTML fragment inserted by Azure AD B2C, and then the page is displayed to your customer.

Custom HTML page

Create an HTML page with your own branding to serve your custom page content. This page can be a static *.html page, or a dynamic page like .NET, Node.js, or PHP.

Your custom page content can contain any HTML elements, including CSS and JavaScript, but can’t include insecure elements like iframes. The only required element is a div element with id set to api, such as this one <div id="api"></div> within your HTML page.

<!DOCTYPE html>

<html>

<head>

    <title>My Product Brand Name</title>

</head>

<body>

    <div id="api"></div>

</body>

</html>

Hosting the page content

When using your own HTML and CSS files to customize the UI, host your UI content on any publicly available HTTPS endpoint that supports CORS. For example, Azure Blob storage, Azure App Services, web servers, CDNs, AWS S3, or file-sharing systems.

Prerequisites

1. Create your HTML content

Copy the following HTML snippet. It’s well-formed HTML5 with an empty element called <div id=”api”></div> located within the <body> tags. This element indicates where Azure AD B2C content is to be inserted.

<!DOCTYPE html>

<html>

<head>

    <title>My Product Brand Name</title>

</head>

<body>

    <div id="api"></div>

</body>

</html>

Paste the copied snippet into a text editor
Use CSS to style the UI elements that Azure AD B2C inserts into your page. The following example shows a simple CSS file that also includes settings for the sign-up injected HTML elements:

h1 {

  color: blue;

  text-align: center;

}

.intro h2 {

  text-align: center;

}

.entry {

  width: 400px ;

  margin-left: auto ;

  margin-right: auto ;

}

.divider h2 {

  text-align: center;

}

.create {

  width: 400px ;

  margin-left: auto ;

  margin-right: auto ;

}

Save the file as customize-ui.html.

2. Create an Azure Blob storage account in Azure AD B2C

In this article, we use Azure Blob storage to host our content. You can choose to host your content on a web server, but you must enable CORS on your web server

To host your HTML content in Blob storage, use the following steps:

Sign in to the Azure portal
Make sure you’re using the directory that contains your Azure AD tenant, and which has a subscription:
- Select the Directories + subscriptions icon in the portal toolbar.
- On the Portal settings | Directories + subscriptions page, find your Azure AD directory in the Directory name list and then select Switch.
In the Azure portal, search for and select Storage accounts.
Select + Create.
Select a Subscription for your storage account.
Create a Resource group or select an existing one.
Enter a unique Storage account name for your storage account.
Select the geographical Region for your storage account.
Performance can remain Standard.
Redundancy can remain Geo-redundant storage (GRS)
Select Review + create and wait a few seconds for Azure AD to run validation.
Select Create to create the storage account. After the deployment is completed, the storage account page opens automatically or you need to select Go to the resource.

2.1 Create a container

To create a public container in Blob storage, perform the following steps:

Under Data storage in the left-hand menu, select Containers.
Select + Container.
For Name, enter root. The name can be a name of your choosing, for example, Contoso, but we use root in this example for simplicity.
For the Public access level, select Blob.
Select Create to create the container.
Select root to open the new container.

2.2 Upload your custom page content files

Select Upload.
Select the folder icon next to Select a file.
Navigate to and select customize-ui.html, which you created earlier in the Page UI customization section.
If you want to upload to a subfolder, expand Advanced and enter a folder name in Upload to folder.
Select Upload.
Select the customize-ui.html blob that you uploaded.
To the right of the URL text box, select the Copy to clipboard icon to copy the URL to your clipboard.
In a web browser, navigate to the URL you copied to verify the blob you uploaded is accessible. If it’s inaccessible, for example, if you encounter ResourceNotFound an error, make sure the container access type is set to blob.

3. Configure CORS

Configure Blob storage for Cross-Origin Resource Sharing by performing the following steps:

Navigate to your storage account.
In the left-hand menu, under Settings, select Resource Sharing (CORS).
For Allowed origins, enter https://your-tenant-name.b2clogin.com. Replace your-tenant-name with the name of your Azure AD B2C tenant. For example, https://fabrikam.b2clogin.com. Use all lowercase letters when entering your tenant name.
For Allowed Methods, select both GET and OPTIONS.
For Allowed Headers, enter an asterisk (*).
For Exposed Headers, enter an asterisk (*).
For Max age, enter 200.
At the top of the page, select Save.

3.1 Test CORS

Validate that you’re ready by performing the following steps:

Repeat the configure CORS step. For Allowed origins, enter https://www.test-cors.org
Navigate to www.test-cors.org
For the Remote URL box, paste the URL of your HTML file. For example, https://your-account.blob.core.windows.net/root/azure-ad-b2c/unified.html
Select Send Request. The result should be XHR status: 200. If you receive an error, make sure that your CORS settings are correct. You might also need to clear your browser cache or open an in-private browsing session by pressing Ctrl+Shift+P.

4. Modify the extensions file

To configure UI customization, copy the ContentDefinition and its child elements from the base file to the extensions file:

Open the base file of your policy.
For example, SocialAndLocalAccounts/TrustFrameworkBase.xml. This base file is one of the policy files included in the custom policy starter pack, which you should have obtained in the prerequisite, Get started with custom policies.
Search for and copy the entire contents of the ContentDefinitions element.
Open the extension file. For example, TrustFrameworkExtensions.xml. Search for the BuildingBlocks element. If the element doesn’t exist, add it.
Paste the entire contents of the ContentDefinitions element that you copied as a child of the BuildingBlocks element.
Search for the ContentDefinition element that contains Id="api.signuporsignin" in the XML that you copied.
Change the value of LoadUri to the URL of the HTML file that you uploaded to storage. For example, https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html.

Your custom policy should look like the following code snippet:

<BuildingBlocks>

  <ContentDefinitions>

    <ContentDefinition Id="api.signuporsignin">

      <LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</LoadUri>

      <RecoveryUri>~/common/default_page_error.html</RecoveryUri>

      <DataUri>urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0</DataUri>

      <Metadata>

        <Item Key="DisplayName">Signin and Signup</Item>

      </Metadata>

    </ContentDefinition>

  </ContentDefinitions>

</BuildingBlocks>

Save the extensions file.

5. Upload and test your updated custom policy in Azure AD B2C

5.1 Upload the custom policy

Make sure you’re using the directory that contains your Azure AD B2C tenant:
- Select the Directories + subscriptions icon in the portal toolbar.
- On the Portal settings | Directories + subscriptions page, find your Azure AD B2C directory in the Directory name list and then select Switch.
Search for and select Azure AD B2C.
Under Policies, select Identity Experience Framework.
Select Upload custom policy.
Upload the extensions file that you previously changed.

5.2 Test the custom policy by using Run now

Select the policy that you uploaded, and then select Run now.
You should be able to sign up by using an email address.

Conclusion

Azure Active Directory B2C provides business-to-customer identity as a service. Your customers use their preferred social, enterprise, or local account identities to get single sign-on access to your applications and APIs.
Finally, for more such updates, please follow our LinkedIn page- FrontEnd Studio.