Build a Single Page Application with MSAL.js

Build a Single Page Application with MSAL.JS

Hi fellow tech peeps out there. Have you ever thought of using the dataverse table data in the normal HTML page with some CSS styles in it. This article is about how to access the dataverse data using the MSAL.js(Microsoft Authentication Library).

Pre-requisites:

Access to Dataverse or Dynamics 365 CE applications
Azure license with permission to manage applications
Visual Studio Code, click here to download 🔗
Install Live Server Extension, click here to download 🔗

Steps:

Configure the Azure Active Directory app
Develop Single Page Application
Access Dataverse Data

Configure the Azure Active Directory app:

For accessing the dataverse data, register an application in azure active directory. In the registered app, navigate to the Authentication → + Add a platform. Select the Single-page application under Configure Platforms. Use http://localhost:5500/index.html for Redirect URIs and click on configure and save.

Develop Single Page Application :

This Single Page Application is used for sign-in, view dataverse table data and sign-out. Open the visual studio code(recommended) or any other IDE, create a folder and create a html file named index.html inside the folder. The code for the page is below. In the code, the configuration stuffs like tenant id, client id and client secret should be changed according to their environment.

Click on the button in the bottom of the visual studio code. It navigate to the default browser and open the index.html page over there.

Access Dataverse Data :

Click on the Login button in the opened web page. The authentication window for microsoft login pops out. login with the credentials which has access to dataverse or dynamics 365 CE environments. After logged in the page appears with the name of the user and sign-out button on the top-right corner. And the Get Accounts button is in the middle of the page.

Click the Get Accounts button, then in the fraction of seconds the table with the accounts data is displayed. For Logging out of the web-page, the logout button is the top-right corner below the name. click on logout → select the account to logout.

Keep Learning!

Build a Single Page Application with MSAL.js