Hi, welcome to the Impulz Technologies blog. In this multi-series blog post we are going to discuss how web developers can connect the JavaScript Single Page Application or simply SPA to a Microsoft Dataverse as back-end storage service using the standard REST APIs.

We will be discussing the following scenario:

1. User is going to sign-in or authenticate through Single Sign on (SSO) using the Microsoft organization account.
2. Once authenticated by the Microsoft Identity Management (Azure AD in our case) the web app is going to call the Dataverse Web API to display records from the Accounts table.

In this blog post we will be using the following technology stack:

1. Angular as a SPA framework.
2. Microsoft Authentication Library (MSAL) to authenticate the user’s identity and generate the access token from the Microsoft cloud. You can read more information about MSAL from https://learn.microsoft.com/en-us/azure/active-directory/develop/msal-overview

For simplicity we assume the following:

1. You already have an access to the Azure portal which can be accessed from https://portal.azure.com/.
2. You already have a Dataverse setup and a database has been initialized.
3. You are familiar with Node Package Manager (NPM) CLI. NodeJS and NPM can be downloaded and installed from https://nodejs.org/en/download/.
4. You are familiar with JavaScript and TypeScript.
5. You are also familiar with Angular and its associated concepts like components, templates and dependency injections in particular. You can find more information about Angular by visiting https://angular.io/.

Installation of NodeJS and Angular is also out of scope of this blog post.

The first step which we need to take is the app registration in the Microsoft Azure. Once the app (Angular SPA in our case) is registered within the Azure then the app can participate in Single Sign on (SSO) using the Microsoft accounts. In the section below we are going to discuss step-by-step with screen shots how the app can be registered within Azure.

App Registration in Microsoft Azure

1. In your browser login to the Azure admin portal https://portal.azure.com/. Once signed in successfully it is going to look like below:

2. From the Azure postal click on the App registrations and then click on the New registration as shown below:

3. On the new app registration form enter any name you like. Also, on the same form under the redirect URL, select Single Page Application (SPA) in the drop-down and enter the redirect URL. Since, we will be using and by default Angular works on port 4200 that’s why we have mentioned http://localhost:4200 as a redirect URL. This is the same URL to which Microsoft Azure will be redirected upon the successful user authentication.

And then click on Register button to complete the registration process.

4. Copy the application id and store it somewhere like in a Notepad for later use.

5. Click on API permissions on the left hand menu and then click on the Add permission button as shown below:

6. On the Add permission form search for Microsoft Dynamics CRM in the application list and click on it.

7. On the Dynamics CRM application form, please make sure that Delegated permissions is selected and then select user_impersonation from the permissions list and then click Add permissions button.

This completes the registration and the configuration of the app registration in Microsoft Azure. Now, you have to complete one additional step on Azure portal – make a note of the tenant id and copy it somewhere like Notepad. If you have multiple Azure subscriptions then you need to ensure you have already selected the correct subscription from the list. Then click on the tenant properties and copy the tenant id for later use.

This completes the first part of the two parts blog series. In our next blog post same day next week, we are going to discuss how an Angular app can connect to the Dataverse to consume the data.

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