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

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.

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:

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.

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.

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:

  

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:

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

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.

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.

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:

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.

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:

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:

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:

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

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

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/