Hi, welcome to the Impulz Technologies LLC blog. In this third and final part of the three parts blog post series, I am going to explain the JS code to interact with the Microsoft Dataverse REST API to fetch the accounts table data.

Before going forward let’s quickly recap what we have discussed so far.

Recap

In the first two parts of the blog post we have covered:

1. How to register an application in Microsoft Azure.
2. How to extract different data elements like tenant Id, application id etc. from the Azure portal. These values are required to successfully execute the code within your environment.
3. Theoretical background of how the Azure Active Directory actually works.

If you have not read the previous blog posts, it is highly recommended to read them first from part-1 and part-2.

What we are going to cover today?

Today, we are going to going to consolidate what we have covered so far and apply those concepts in the actual code. This is the scenario we are going to cover in the code today.

• Try to login the user through a silent login API. That is single sign-on (SSO).
• If SSO failed then show the popup to the user to enter the credentials.
• Upon successful login fetch the data from the Dataverse system table ‘Accounts’.

Assumptions

• You are familiar with Angular and specifically the concepts like components, dependency injection and how it works in Angular, services, routes and http client.
• You already know Angular CLI and some of the basic commands.
• JavaScript and HTML concepts like async programming, local storage etc.
• The user going to sign in has an access the accounts table in the Dataverse environment.

From where to download the code?

The code used in this blog post has been published in the GitHub public repository. You can download or clone the code from this repo https://github.com/RealAhmadH/ng-dataverse

You can setup the code by reading the readme file of the repo.

Let’s now review the code.

src/constants.ts

This file is used to store configuration information of the Azure AD and the Microsoft Dataverse environment. You have to fill in the following in order to successfully connect the Dataverse environment:

• AZURE_APP_ID: this is the application identifier which you have configured on your Azure portal.
• AZURE_TENANT_ID: this is the tenant identifier of the Azure AD.
• DATAVERSE_BASE_URL: this is the URL of yours Dataverse environment. You can get this information from the Microsoft Power Apps admin centre.

Within the same file there exists a configuration JSON object required to connect to the Azure environment using the MSAL package. The only required configuration is the client identifier. Rest of the details are optional.

src/app/services/microsoftad.service.ts

In this file the code exists which actually interacts with the Microsoft Azure AD for Single Sign-on (SSO).

Following is the brief description of the code:

Class constructor

• In the constructor of the class, constant object is been passed as a dependency. Constant object contains important configuration information like configuration JSON object, application id, tenant id etc. required to successfully establish a connection with the Azure AD.

Confidential vs Public Client Application

• In the class constructor we initialized an object PublicClientApplication. Microsoft MSAL supports two types of clients: confidential and public. Confidential clients include secure clients like web server applications whereas public client includes desktop, mobile or browser clients. Since, we are using a browser to connect the Azure, that’s why PublicClientApplication object is used to connect to Azure.

ssoSignIn method

• The class instance method ssoSignIn is defined to try to connect the Azure AD first silently (Microsoft account Single Sign-on typically used in every Microsoft apps). If the single sign-on gets failed then it tries to launch the Microsoft login popup and ask the user to enter the credentials.

Scopes and Microsoft Azure AD

Microsoft also issues the authentication token within a single call in response. Azure AD issues token on based of scopes. It is important to understand that you can merge more than one scope within a single call but all the scopes has to be of the same resource we are trying to access. During the sign-in process, we are actually interacting with Microsoft Graph to allow us the access to the user’s profile. Within the same call we can’t ask to issue the access token for the Dataverse because Dataverse is a different Azure resource or API and it is required to repeat the same process to acquire the access token for the Dataverse scope.

Conluding remarks!

This concludes the three parts blog post series. You can apply the same knowledge and ideally the code to other JavaScript frameworks or even the plain JavaScript appkications. Similarly, authentication and authorization works more or less the same for every Azure resource. Ideally, you can extend the same code to other services like Power BI for example.

About Impulz Technologies LLC

Impulz Technologies, is a Silver Certified Microsoft Partner company. We specialize in the implementation, consulting and development of Microsoft Dynamics and Microsoft Power Platform. Impulz Technologies also provide staff augmentation services all across the US. For more information please contact us at 630-540-6302 or email us at info@impulztech.com