How to configure Azure B2C authentication for Event Management

azure-active-directory1In this article, I would like to give you an overview of how to use Azure B2C authentication in Event Management portals as well as how to fix most of the issues and problems you might face during the configuration. Event management portals configuration is a bit different from power portals as you also need to configure angular frontend. I will also provide information on which angular modules are responsible for implementing b2c authentication as well as how backend process the requests.

Let’s briefly discuss why you might need Azure B2C authentication. Let’s assume you want to allow your users to manage sessions that they wish to attend or just restrict the possibility to register without an approved e-mail address. This is where Azure B2C can help you and provide infrastructure to manage your users.  If you never heard about Azure B2C before, please check the documentation: What is Azure Active Directory B2C? At first, I would like to give you a link to the official documentation: Setting up event management to work with AAD B2C. I don’t want to focus on the creation of necessary thinks as they are very well documented. However, I will provide screenshots of all my settings for you and try to explain topics that are not covered in the documentation. Let’s start.

This article describes the configuration for the new event management public API. To use the new event management public API, you need to register the web application and use emApplicationToken. You will find information on how to do it in the appropriate part of this article. Your environment.ts should contain useRestStack = true. 

1. First of all, we need to create an Azure B2C tenant: Create an Azure Active Directory B2C tenant.

azureb2ctenant

2. Register an application in Azure Active Directory B2C.

azureb2capp

App ID URI should contain events. We need App ID URI to define the scope. Scope defined in the azure application should match the scope defined in our event management angular application. Below you can find scopes that I have for my app.

scopes

Please allow all API access you have as on the picture below

apiaccess

Now we have our app fully configured. The next step is to configure policies. Policies define how we create new users or restore passwords for existing ones. Please check how to create policies in the following article: Setting up event management to work with AAD B2C. Here are how I configure my policies:

policy

As you see, I have two policies: 1. Password reset. 2. Sign up and sign in. Please see below the detailed configuration:

1. Password reset. (Properties)passwordreset_prop

2. Password reset. (Identity providers)passwordreset_ident

3. Password reset. (Claims)passwordreset_claims

4. Sign up and sign in (Properties 1)signup_prop1

5. Sign up and sign in (Properties 2)signup_prop2

6. Sign up and sign in (Identity providers)sign_identity

7. Sign up and sign in (User attributes)signup_userattr

8. Sign up and sign in (Claims)signup_claims

All properties are important. For example, if you will not choose to use User’s Object ID, then your event management process will not be able to process the token and raise the exception.

Once you’ve configured Azure B2C Tenant, Application, and Policies, you can switch to Angular frontend and configure environemnt.ts. Below you can find how the configuration looks for me:

To get authority host, you need to open your sign up and sign-in policy and click run.authorityhost

To complete the configuration and in case you use Event API 2.0, you also need to create Event Management web application configuration. Event API 2.0 created as a separate service, and you need to obtain an “emApplicationtoken”  token to use it. Previously it was a LIQUID script and special plugin behind it; everything was hosted inside Dynamics 365 CE. Now we have a separated web service that requires a particular token.webapp

More information you can find here: Using Events API. Now you have fully configured Azure B2C Authentication for Event Management Portals. Hoverwer something might not work. Let’s briefly review possible errors:

This application does not have sufficient permissions against this web resource.
Usually, this error happens when the scope defined in your Azure application doesn’t correspond to the scope defined in your angular application environment.ts file.

The AAD policy does not contain the required claim: $http://schemas.microsoft.com/identity/claims/objectidentifier. This is most probably caused due to a wrong configured AAD policy.
This error always happens when some of the required claims are not defined in the appropriate policy. Check your policy and mark appropriate claims.

Sometimes it is good to check Js console to find the error description.

Here is how the authenticated request looks like:authenticatedrequest

Here is how this request looks like from the Angular point of view. This code is from file user.rest.service.ts.

The second argument for http.get is true, which means that as a part of this request, we need to send the authentication token. Implementation of the function which constructs the request can be found in HttpRestHelper.ts.

In case you want to add some more information about the user in the area, which is available only for registered users (e.g., my registrations). Simply use the Azure function, which will parse the authentication header and use data from it to request additional information from Dynamics CE and return some data back to the frontend. You can later call this azure function from the angular front-end.

 

Leave a Reply