Azure AD B2C UI Customization

Question

I want to customize the default sign up page created using Azure AD B2C. I also have referred the relevant azure documentation as well. But it is not much clear.

Is there any document that contains all the steps that i can refer to fulfill this purpose.

Thanks in advance

I assume you are referring to this: docs.microsoft.com/en-us/azure/active-directory-b2c/… ? Where are you getting stuck? — spottedmahn
<div id="api"></div> tag auto generates the content of signin and signup pages. Can I know whether I can change those content created by Azure AD? — Indeevari Ramanayake
@IndeevariRamanayake spottedmahn Is correct, but remember that you can hide/show, disable, enable, and all sorts of fun stuff with CSS. For example, the "thinking" progress bar really messes up the content of custom templates, so you could hide that. — Pytry

Pytry Pytry · Accepted Answer · 2017-08-02T17:16:23

The documentation for Azure AD B2C can be confusing as heck to someone new to Azure and/or new to OpenIdConnect, but it's all you get -.. for now.

(Thanks for the comment by @SergeyBrazhnik for reminding me to add this, and sorry for forgetting this previously).

Be aware that the "sign-in" policy does not allow template customizations; you can only customize a "sign-in" policy using your companies branding in the Azure portal UI. When I was had to implement a sign-in only page, I used a sign-up-or-sign-in policy and used CSS to hide the sign-up links. It was kludgy, but the customer wants what she wants.

Here's a basic summary of what you need to do for policies that do support templates:

First Create your template.

It's really as simple as follows:

<!DOCTYPE html/>
<html>
  <body>
    <h1>It worked!</h1>
    <div id="api"></div>
  </body>
</html>

Seriously, that's all you need for your template. It's a rather bland and boring template, and probably not very user friendly, but you can add your own CSS to it an/or peak at the special CSS that MS uses in the default templates. I would suggest just using your own.

Remember to not include any JavaScript.

If you need dynamic templates, then you will have to use a server-side templating structure like ASP.NET (or Thymeleaf, JSPX, or whatever for you Java folks out there being forced to use this:D).

Do not put anything in the "api" div. Leave it completely blank and do NOT self close it (ie, no "/>").

Lastly, make sure that the template is available without needing any type of authentication.

Configure your policy so that it uses the template.

Assuming you are configuring a sign-up-or-sign-in policy, got to "Azure AD B2C -> Policies -> Sign-up or sign-in policies -> Your Policy -> Edit" to open the "Edit Policy" panel.

Open the "Page UI customization" panel (second option from the bottom for me).

In each of the sections there, set the "Use custom page" toggle option to "Yes" and add the full uri to the "Custom page URI" text box.

During development/testing (and production as well), you do not need to allow any special access to Azure for your servers if they are on a closed/secure network; B2C uses JavaScript and CORS to pull the template and fill them, so it's really you/your-browser doing the legwork of filling in the template. However, you will need to enable CORS for those endpoints serving the templates and you will need whichever box you are running your browser on to have internet access.

DONE!

Let me know if you have any more questions about this and I will revise my answer to clarify anything.

Azure AD B2C UI Customization

2 Answers