Customise Azure B2C Login
Introduction
There are three Azure B2C login templates ready to use, the default is 'Ocean Blue', with 'Slate Gray' and 'Classic' also available. For most people one of the defaults will be perfectly adequate, but I wondered what would be involved in changing the appearance of the 'sign in, sign up' form.
Company Branding
It turned out to be remarkably easy to make a dramatic change by using 'company branding'. This allows changes to the background image and the login logo. Beyond these changes it looked considerably more complicated - so I didn't even attempt it.
As mentioned, 'Company Branding' allows changes to the background image and logo. Selecting these is probably to most difficult part of the process! When selecting or creating these images the following guidance should be used:
Background Image
1920 x 1020 pixels, maximum size 300kb. Format: .png, .jpg or .jpeg
Logo
280 x 60 pixels, maximum size 10kb. Format: transparent .png, .jpg or .jpeg.
This size for the logo image seems remarkably small when creating, or selecting a logo, but seems to be a requirement. A transparent png appears to be the recommended format, but isn't a requirement. Most suggestions on how to create a transparent .png use Photoshop, but some free online services could be used. I settled for some simple text on a white background created in Paint.
For the background image I did a Google image search for Images, making sure I selected 'Creative Commons Licenses' under the Tools option to ensure I could use the image freely.
Recap and aside on Azure B2C
When we created the Azure AD B2C service, in particular the User Flow, we accepted the Ocean Blue default for the login template (without realising it!). As an aside, if we wanted to change to either of the other templates, the way to do it is:
- Login to the Azure portal
- Switch to the Azure AD B2C directory
- Enter 'Azure AD B2C' in the search box and select 'Azure AD B2C'
- Select 'User Flows' from the left-hand menu
- Select the appropriate user flow
- Select 'Page layouts'
- Click the 'Templates' drop-down list and select the required template
Add Company Branding
Before you start, make sure you have the Background Image and Logo files ready.
- Login to the Azure portal
- Switch to the Azure AD B2C directory
- Enter 'Azure AD B2C' in the search box and select 'Azure AD B2C'
- Select 'Company branding' from the left-hand menu
- Click on 'Default' and an 'Edit company branding' panel will open on the right-hand side.
- Browse to your Background image file
- Browse to your Logo image file
- (There is no need to change any of the other settings)
- Click 'Save' at the top of the 'Edit' panel and then close it
- The 'Company branding' page will now display green checkmarks under 'Background image' and 'Banner logo'.
That's it. Maximum effect for minimum effort.
References
I have found various articles on modifying the Azure B2C Login page, (including some that imply you need a 'Premium' Azure service - which appears to be false!), but this is the most helpful article I have found.