Part 3 – PowerApps Portals: Azure B2C and Power Apps Portals – User Flow for Signup and Signin

   Words by Paul McQuillan

   on 24/02/2021 16:30:00

See the source image

User Flows define how our contacts will be able to gain access to our portal and make changes to their own user info (like with password resets).  To set these up, we need navigate to our ‘User flows’ tab, under the ‘Policies’ section in our Azure B2C Tenant

Initially for a new B2C Tenant this will be blank as we will not have any User Flows.

image_thumb[5]




To work with Power Apps Portals, we need to create at least 2 User Flows: the Signup and Signin Flow + the Signin Only Flow.

We can create a New User Flow and select the categories for Sign up and sign in + Recommended to create the screens and logic in our B2C Tenant for a new Sign In:

image_thumb[15]



We then give the Flow a particular Name – if we follow the defaults from the Microsoft Guides, this will typically be: signup_signin - Here we can set the Multi-Factor Authentication Settings we want to use for our Directory – this will typically be down to verification of the incoming user’s email address.

  image_thumb[19]


At the bottom of creating the Flow, we can then set the Details we collect from a New User signing up – this is particularly key for Power Apps Portals as this defines what details will flow from Azure B2C to Portals and ultimately to Dynamics to populate the Fields on the Contact Record for the Portal User.

We can change this Attribute Map after the creation of the Flow – but initially we can define First Name, Last Name and Email Address.

image_thumb[24]


Once created, we can access the Properties area of the User Flow.

In here we need to ensure the Issuer (iss) Claim is set to use the ‘tfp’ referenced URL – this is controlled by a dropdown under the Token Compatibility Settings:

image

  

With this done, we can drill down into the properties of our new User Flow and find the Issuer URL – as we will need this to insert into the Site Settings of our Portal. To do this, we open our Signup / Signin User Flow, we will now have the option to Run user flow, this will open a right-hand-side panel which will elaborate on the User Flow Settings:

image_thumb[8]



We can click this URL to open the JSON definition of the Flow:

image


The ‘issuer’ here being the setting we need as our B2C/Authority and one of our B2C/ValidIssuers to configure into the Portal Site Settings.


Portal Site Settings

Now we have our B2C Tenant Setup with our two initial User Flows – we can configure the Site Settings in Power App Portals to communicate with them.

This is done in the Portal Management App within Dynamics 365, and then into Site Settings.

image_thumb[11]



We then have a number of settings to set based on our User Flow:

Authentication/OpenIdConnect/B2C/Authority https://crmcstestb2c.b2clogin.com/tfp/be96a25c-a4d3-40f7-aceb-b1b60904da5b/b2c_1_signup_signin/v2.0/
Authentication/OpenIdConnect/B2C/ClientId {App Registration – Client ID}
Authentication/OpenIdConnect/B2C/DefaultPolicyId B2C_1_signup_signin
Authentication/OpenIdConnect/B2C/RedirectUri https://{myportalname}.powerappsportals.com/signin-B2C
Authentication/OpenIdConnect/B2C/RegistrationClaimsMapping

firstname=https://schemas.xmlsoap.org/ws/2005/05/identity/claims/givenname,lastname=
https://schemas.xmlsoap.org/ws/2005/05/identity/claims/surname

Authentication/OpenIdConnect/B2C/ValidIssuers https://crmcstestb2c.b2clogin.com/tfp/be96a25c-a4d3-40f7-aceb-b1b60904da5b/b2c_1_signup_signin/v2.0/

This configures the Portal to work with the Sign Up and Sign In process we have defined in our Azure B2C Tenant.

The RegistrationClaimsMapping Setting here is how our Attribute Map captured by the B2C Signup process is then mapped to Fields within Dynamics 365 – so there is a flow of data from the Azure User Account to the Contact Record in CRM.

This set of settings then combines with standard configuration to enable Azure B2C:

Authentication/OpenIdConnect/B2C/AllowContactMappingWithEmail true
Authentication/Registration/LoginButtonAuthenticationType https://crmcstestb2c.b2clogin.com/tfp/be96a25c-a4d3-40f7-aceb-b1b60904da5b/b2c_1_signup_signin/v2.0/
HTTP/Access-Control-Allow-Origin https://crmcstestb2c.b2clogin.com/
    

Now, we are ready to test our Portals and B2C Setup and see how things are working with the two sync’ed up.


Testing

First off – we can check our Authentication Settings in our Power Apps Maker area.

This can be done by highlighting the Portal App – clicking Settings – and then Authentication Settings.

image



This will open an area that allows us to configure different Identity Providers to work with our Portal – including the Azure B2C Provider, and view the Settings we have just configured:

image



If the Power Apps Portal Site has been running prior to us making the Site Settings changes – then it may be useful to restart the Portal Site from the Administration area.

image


This will ensure the Portal has reloaded any updated Settings from our updated Site Settings – essentially flushing the cache.

Once done, we can open our portal and try signing in and signing up.

When we click to Login, we will notice the URL change from that of our Portal and into the URL we have setup for Azure B2C:

image


Here we can Sign In or Sign Up Now as our setup of the B2C User Flow would suggest.

Clicking Sign Up Now will allow us to create a New Account in Azure B2C and see this in Dynamics as a Contact.

In this Sign Up, we will see our Attribute Map (First Name + Last Name + Email) and our Multi-Factor Authentication Settings (verification by email) in action:

image


Clicking Create will then set us up as a brand new User to the Portal – and log us in.

Now we have a Portal authentication with Azure B2C.

We can see the New Users appearing in the Configuration Area of the B2C Tenant:

image


Plus seeing the User appear as a Contact in Dynamics with a link out to this profile in B2C:

image



Most importantly – the end user experience logs into the Portal via an Account secured in Azure B2C:

image


This sets us up with our Basic User Flow between Azure B2C – our next step being two fold:

  • Making sure we have an additional User Flow for a Self-Service Reset Password
  • Customising the Login Screen Appearance so we can bespoke this to the Portal.

      Next Article >>

      Part 4 – Styling Azure B2C for Power Apps Portals

      Further Reading…

      https://www.crmcs.co.uk/what-we-do/powerapps-portals/

        Share this Article

        Search Articles

        Filter Articles

        CRM Tech DocMan

        Recent Articles

        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 The Automation Bot: Launching Contextual Flow from Teams Creating a New Bot for Teams Debugging your Teams Bot using Ngrok Adding a Microsoft Teams URL to a Dynamics Appointment
        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