azure-active-directory Getting started with azure-active-directory Customize the Azure AD B2C user interface

Example

The Azure AD B2C login screen can be customized to suit our branding. Refer Customizing the UI

Refer https://github.com/NewtonJoshua/Azure-ADB2C-Angularjs-sample

In this sample we have two customized UI screens,

• AD B2C Sign in ansd Sign up page: adCustomPages/unified.html
• AD B2C Password reset page: adCustomPages/resetpassword.html

In adCustomPages/unified.html, at line 442 and 445, enter your tenantName, password-reset-policy and clientId

The pages should be uploaded in a blob and their url should be referred in the Azure AD B2C policies.

• Create a storage account as mentioned in Upload the sample content to Azure Blob Storage
• Upload the sample AD Pages in the container and note down their url.
• For the created Blob service Storage account create a CORS rule with '*' as ALLOWED ORIGINS. Select all in ALLOWED METHODS. Enter * for ALLOWED HEADERS and EXPOSED HEADERS as well.
• Customize your policy

Now in your application you can see the customized UI.