Part 4 – Power Apps Portals: Styling Azure B2C for Power Apps Portals

   Words by Paul McQuillan

   on 25/02/2021 16:30:00

See the source image

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.

image



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.

image



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:

image



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.

image



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:

image



Defining a New Password Page in the same way

This page can then be likewise configured into one of the Azure B2C User Flows:

image



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

image



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:

image

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.

image



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)

Share this Article

Search Articles

Filter Articles

CRM Tech DocMan

Recent Articles

Release Wave 2 New Feature: The Columns Button HOW TO: Search a date field in Microsoft Dynamics The Relevance Search COMING SOON to Power Apps Portals HOW TO: Manage Your Dynamics 365 Database Size (Video Included) Dynamics 365 Marketing vs ClickDimensions It’s time to pause, reflect and acknowledge a new era of inclusivity and collaboration. Part 2 - How to get the most from a Technology Expert – Asset Management Hub Property & Asset Management Hub Part 1 – Balancing CRM and Asset Management Scopes - Asset Management Hub Creating a Multi-Lingual PowerApps Portal How to Set Up a Microsoft Teams Site Using DocDrive365 Microsoft Teams - Adding a Microsoft Teams URL to a Dynamics Appointment Dynamics 365 Marketing – Customer Voice Survey Not Appearing In Emails? Using SQL Management Studio to connect to the Dynamics DB Calling a Power Platform AI Builder Model via oData How to use DocDrive365 to integrate permissions between Business Units in Dynamics with Sites in SharePoint Getting started with the Power Platform AI Builder. Power Apps Portal Information Hub DocDrive365 Security: Day One - Getting Started with Dynamics to SharePoint Permissions Part 5 - Power Apps Portals: How To Connect Azure B2C With Linked-In Part 4 – Power Apps Portals: Styling Azure B2C for Power Apps Portals The 3 Phases for Using Multi-Select Option Sets in Flow with Microsoft Forms Part 3 – PowerApps Portals: Azure B2C and Power Apps Portals – User Flow for Signup and Signin Part 2 - Power Apps Portals: New Application Registration in Azure B2C for our Power Apps Portal Part 1 – Power Apps Portals: Creating a New Azure AD B2C Tenant
Contact Us

Want expert advice or a demo?

Get in touch now and see how we can help your business grow.

  • Name
  • Email Address
  • Phone Number
 
Close

Understanding Your Challenges

Our strong understanding of CRM and emerging technologies within the Microsoft environment means we deliver the right solutions for you.

Proven Real-World Solutions

As a leader in the field of Dynamics solutions, our pedigree developing and delivering real-world solutions is unsurpassed.

Long Term Support

We provide support beyond our design, implementation and 'go-live' delivery using Sprints and continual updates to our AppSource apps.

CRMCS | Design by Thinktank Marketing | Citrus-Lime Limited

To improve your experience today and in the future, this site uses cookies. Read our full Privacy Policy & Cookie information here I Understand