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.
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.
Tamilarasu Arunachalam - you are the man, the myth, the legend! You helped us a lot!
ReplyDeleteHi Tamilarasu, I have just come across your post and am trying to get the code above to work. However, when I click the Login button, all I get is another smaller window also with the Login button; and clicking that second button does nothing. I have followed your steps above carefully; any thoughts on what is happening would be most appreciated, thank you.
ReplyDelete