{"id":126,"date":"2022-01-06T09:20:15","date_gmt":"2022-01-06T09:20:15","guid":{"rendered":"https:\/\/blog.citrus-lime.com\/crmc\/?p=126"},"modified":"2022-01-06T09:20:15","modified_gmt":"2022-01-06T09:20:15","slug":"part-3-powerapps-portals-azure-b2c-and-power-apps-portals-user-flow-for-signup-and-signin","status":"publish","type":"post","link":"https:\/\/blog.citrus-lime.com\/crmc\/part-3-powerapps-portals-azure-b2c-and-power-apps-portals-user-flow-for-signup-and-signin\/","title":{"rendered":"Part 3 \u2013 PowerApps Portals: Azure B2C and Power Apps Portals \u2013 User Flow for Signup and Signin"},"content":{"rendered":"\n

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 \u2018User flows\u2019 tab, under the \u2018Policies\u2019 section in our Azure B2C Tenant<\/p>\n\n\n\n

Initially for a new B2C Tenant this will be blank as we will not have any User Flows.<\/p>\n\n\n\n

\"image_thumb[5]\"<\/a><\/figure>\n\n\n\n

To work with Power Apps Portals, we need to create at least 2 User Flows: the Signup and Signin Flow + the Signin Only Flow.<\/strong><\/p>\n\n\n\n

We can create a New User Flow and select the categories for Sign up and sign in<\/strong> + Recommended<\/strong> to create the screens and logic in our B2C Tenant for a new Sign In:<\/p>\n\n\n\n

\"image_thumb[15]\"<\/a><\/figure>\n\n\n\n



We then give the Flow a particular Name \u2013 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 \u2013 this will typically be down to verification of the incoming user\u2019s email address.<\/em><\/p>\n\n\n\n

\"image_thumb[19]\"<\/a><\/figure>\n\n\n\n


At the bottom of creating the Flow, we can then set the Details we collect from a New User signing up \u2013 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.<\/p>\n\n\n\n

We can change this Attribute Map after the creation of the Flow \u2013 but initially we can define First Name, Last Name and Email Address.<\/p>\n\n\n\n

\"image_thumb[24]\"<\/a><\/figure>\n\n\n\n


Once created, we can access the Properties area of the User Flow.<\/strong><\/p>\n\n\n\n

In here we need to ensure the Issuer (iss) Claim<\/strong> is set to use the \u2018tfp\u2019 referenced URL \u2013 this is controlled by a dropdown under the Token Compatibility Settings<\/strong>:<\/p>\n\n\n\n

\"image\"<\/a><\/figure>\n\n\n\n

  

With this done, we can drill down into the properties of our new User Flow and find the Issuer URL \u2013 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:<\/p>\n\n\n\n

\"image_thumb[8]\"<\/a><\/figure>\n\n\n\n


We can click this URL to open the JSON definition of the Flow:<\/strong><\/p>\n\n\n\n

\"image\"<\/a><\/figure>\n\n\n\n


The \u2018issuer\u2019 here being the setting we need as our B2C\/Authority<\/em> and one of our B2C\/ValidIssuers<\/em> to configure into the Portal Site Settings.<\/p>\n\n\n\n


Portal Site Settings<\/h3>\n\n\n\n

Now we have our B2C Tenant Setup with our two initial User Flows \u2013 we can configure the Site Settings in Power App Portals to communicate with them.<\/p>\n\n\n\n

This is done in the Portal Management App within Dynamics 365, and then into Site Settings.<\/p>\n\n\n\n

\"image_thumb[11]\"<\/a><\/figure>\n\n\n\n



We then have a number of settings to set based on our User Flow:<\/strong><\/p>\n\n\n\n

Authentication\/OpenIdConnect\/B2C\/Authority<\/strong><\/td>https:\/\/crmcstestb2c.b2clogin.com\/tfp\/be96a25c-a4d3-40f7-aceb-b1b60904da5b\/b2c_1_signup_signin\/v2.0\/<\/em><\/strong><\/a><\/td><\/tr>
Authentication\/OpenIdConnect\/B2C\/ClientId<\/strong><\/td>{App Registration \u2013 Client ID}<\/td><\/tr>
Authentication\/OpenIdConnect\/B2C\/DefaultPolicyId<\/strong><\/td>B2C_1_signup_signin<\/td><\/tr>
Authentication\/OpenIdConnect\/B2C\/RedirectUri<\/strong><\/td>https:\/\/{myportalname}.powerappsportals.com\/signin-B2C<\/a><\/td><\/tr>
Authentication\/OpenIdConnect\/B2C\/RegistrationClaimsMapping<\/strong><\/td>firstname<\/strong>=https:\/\/schemas.xmlsoap.org\/ws\/2005\/05\/identity\/claims\/givenname<\/strong>,lastname<\/strong>=
https:\/\/schemas.xmlsoap.org\/ws\/2005\/05\/identity\/claims\/surname<\/strong><\/td><\/tr>
Authentication\/OpenIdConnect\/B2C\/ValidIssuers<\/strong><\/td>https:\/\/crmcstestb2c.b2clogin.com\/tfp\/be96a25c-a4d3-40f7-aceb-b1b60904da5b\/b2c_1_signup_signin\/v2.0\/<\/em><\/strong><\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

This configures the Portal to work with the Sign Up and Sign In process we have defined in our Azure B2C Tenant.<\/p>\n\n\n\n

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

This set of settings then combines with standard configuration to enable Azure B2C:<\/p>\n\n\n\n

Authentication\/OpenIdConnect\/B2C\/AllowContactMappingWithEmail<\/strong><\/td>true<\/td><\/tr>
Authentication\/Registration\/LoginButtonAuthenticationType<\/strong><\/td>https:\/\/crmcstestb2c.b2clogin.com\/tfp\/be96a25c-a4d3-40f7-aceb-b1b60904da5b\/b2c_1_signup_signin\/v2.0\/<\/em><\/strong><\/a><\/td><\/tr>
HTTP\/Access-Control-Allow-Origin<\/strong><\/td>https:\/\/crmcstestb2c.b2clogin.com\/<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Now, we are ready to test our Portals and B2C Setup and see how things are working with the two sync\u2019ed up.<\/p>\n\n\n\n

<\/h3>\n\n\n\n


Testing<\/h3>\n\n\n\n

First off \u2013 we can check our Authentication Settings in our Power Apps Maker<\/a> area.<\/p>\n\n\n\n

This can be done by highlighting the Portal App \u2013 clicking Settings<\/strong> \u2013 and then Authentication Settings<\/strong>.<\/p>\n\n\n\n

\"image\"<\/a><\/figure>\n\n\n\n



This will open an area that allows us to configure different Identity Providers to work with our Portal \u2013 including the Azure B2C Provider, and view the Settings we have just configured:<\/p>\n\n\n\n

\"image\"<\/a><\/figure>\n\n\n\n



If the Power Apps Portal Site has been running prior to us making the Site Settings changes \u2013 then it may be useful to restart the Portal Site from the Administration<\/strong> area.<\/p>\n\n\n\n

\"image\"<\/a><\/figure>\n\n\n\n


This will ensure the Portal has reloaded any updated Settings from our updated Site Settings \u2013 essentially flushing the cache.<\/p>\n\n\n\n

Once done, we can open our portal and try signing in and signing up.<\/p>\n\n\n\n

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:<\/p>\n\n\n\n

\"image\"<\/a><\/figure>\n\n\n\n


Here we can Sign In or Sign Up Now as our setup of the B2C User Flow would suggest.<\/p>\n\n\n\n

Clicking Sign Up Now will allow us to create a New Account in Azure B2C and see this in Dynamics as a Contact.<\/p>\n\n\n\n

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:<\/p>\n\n\n\n

\"image\"<\/a><\/figure>\n\n\n\n


Clicking Create will then set us up as a brand new User to the Portal \u2013 and log us in.<\/p>\n\n\n\n

Now we have a Portal authentication with Azure B2C.<\/p>\n\n\n\n

We can see the New Users appearing in the Configuration Area of the B2C Tenant:<\/p>\n\n\n\n

\"image\"<\/a><\/figure>\n\n\n\n


Plus seeing the User appear as a Contact in Dynamics with a link out to this profile in B2C:<\/p>\n\n\n\n

\"image\"<\/a><\/figure>\n\n\n\n



Most importantly \u2013 the end user experience logs into the Portal via an Account secured in Azure B2C:<\/p>\n\n\n\n

\"image\"<\/a><\/figure>\n\n\n\n


This sets us up with our Basic User Flow between Azure B2C \u2013 our next step being two fold:<\/p>\n\n\n\n