When we configure an App or Website to authenticate via Azure B2C – this will give us a vanilla Log In and Sign-up Page.
We will often want to customize this page and define the appearance according to our intended content and not just the default.
We can do this by editing the Settings for the Azure B2C User Flow in question – specifically the Page Layouts for that User Flow.
Initially this will be set to ‘Use custom page content’ as NO – but we can change this to YES and set where this Custom Page Content should come from.
We need to ensure that for each Layout Name we change ‘Use custom page content’ to YES for each of the layouts for the user flow.
This will mean that whatever route the user goes down in this user flow, the style of the page will stay consistent. We can copy the same custom page URI for each one of these layouts.
Now when we think of using Power Apps Portals, we want this Custom Page URL to be supplied from the Portal Content held in our Dynamics Portal.
Specifically a Page that is ready to merge the content in our Portals with the content produced by Azure B2C:
In the example above, this is following the default format of:
- Page - Page in Portal Management to define the partial URL of /azure-ad-b2c-sign-in
- Page Template - This connects to a Page Template so this can be used across multiple Pages
- Web Template - The Page Template connects up to a Web Template that handles the HTML that will be read from the Power Apps Portal, merged with Azure B2C and then presented from Azure B2C to the user.
This means that the Web Template can be designed and built in Power Apps Portals and then used in however many Pages we need the same base Template for.
Now – the unique content for the User Flow is actually generated by Azure B2C and then ‘fed into’ our Web Page + Template Html.
This often means we can define the broad Styling and Frame for our page in the Web Template – use this Web Template in our Pages – so each unique Page we connect into Azure B2C is mainly just giving us a different partial URL.
Viewing the the Pages connected with our Page Template and Web Template.
The Page Content is then just the basics to define the Page and insert any unique HTML Content only if required:
Defining a New Password Page in the same way
This page can then be likewise configured into one of the Azure B2C User Flows:
Connecting the Change Password Page for the B2C Password Reset User Flow to the Content in Power Apps Portals
For the HTML part of this, we need to look at our Web Template. Microsoft has an article providing a sample section of source HTML you can copy and paste as a base here: https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/azure-ad-b2c
Web Template using sample Microsoft source HTML
It’s not required to go down this route however, you can build your HTML from scratch, and can amend this however you want, in order to get to the required styling for your portal.
The only thing you need to ensure you have in the source HTML is a div element with ‘id’ set to ‘api’, this is where the Azure B2C functionality will be merged into your web page:
The div id = api is required in your source HTML
The final thing you need to do here is set cross-origin resource sharing for your portal. We configure these in our Portal site settings.
There are two portal site settings we need to define here:
· HTTP/Access-Control-Allow-Methods: GET,OPTIONS
· HTTP/Access-Control-Allow-Origin: https://[yourazureb2ctenant].b2clogin.com/
These will grant access between your Azure B2C tenant and your Portal to pass the authentication details using your custom web pages.
Required portal site settings for the CORS
With all the above set up, your user will now see your custom styling when interacting with any user flow in Azure B2C via your portal.
Next Article >>
Part 5 - How to connect Azure B2C with LinkedIn
Further Reading…
Open up new possibilities with Power Apps Portals | CRM Consultancy (crmcs.co.uk)