Impulz Technologies LLC

Menu
  • Home
  • About Us
  • Solutions
    • Microsoft Dynamics 365 Finance & Supply Chain Management
    • Microsoft Power Platform
      • Power BI
      • Power Apps
  • Products
    • Impulz Positive Pay
    • Impulz Construction 365
  • Blog
  • Services
    • Application Support And Maintenance
    • ISV Development
    • Project Resources
  • Clients
  • Contact Us

Impulz Technologies LLC

Connect the Angular with Microsoft Dataverse – Part 3 of 3

  • Home
  • Blog
  • Dynamics 365
  • Connect the Angular with Microsoft Dataverse – Part 3 of 3
  • January 27, 2023
  • Ahmad Hussain

Angular Dataverse

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

 

 

Posted in Dynamics 365, Microsoft Azure, Microsoft Dataverse, UncategorizedTagged D365, Dataverse, Power Apps, Power Platform

Recent Posts

  • Postman Best Practices for Microsoft Dynamics 365 Finance and Supply Chain Management
  • Microsoft Dataverse is not a database
  • Connect the Angular with Microsoft Dataverse – Part 3 of 3
  • Connect the Angular with a Microsoft Dataverse using Web API – Part 2 of 3
  • Connect the Angular App with a Microsoft Dataverse through Web API – Part I of 3

Recent Comments

No comments to show.

Archives

  • February 2023
  • January 2023
  • October 2022
  • September 2022
  • August 2022
  • July 2022

Categories

  • Business
  • Dynamics 365
  • Microsoft Azure
  • Microsoft Dataverse
  • Microsoft Power Platform
  • Power BI
  • Uncategorized

Latest Post

  • Postman Best Practices for Microsoft Dynamics 365 Finance and Supply Chain Management
  • Microsoft Dataverse is not a database
  • Connect the Angular with a Microsoft Dataverse using Web API – Part 2 of 3
  • Connect the Angular App with a Microsoft Dataverse through Web API – Part I of 3
  • Deploying aggregate measurement for custom tables in Dynamics 365 F&O for Power BI Reports

Tags

Application integration with D365 Azure Azure AD Banking D365 D365 code management D365 FO D365 FO Azure DevOps D365 FO Customization D365 FO Extensions D365 FO VM Deployment D365 integration D365 MPOS Retail D365FO Excel Export to SharePoint Dataverse Dataverse integration Debugging Development Dynamics 365 Finance and Operations Dynamics 365 FO Security Dynamics 365 with git Lifecycle Services Microsoft .Net Microsoft Azure Microsoft Dataverse Microsoft Dynamics 365 Microsoft Dynamics 365 Commerce Microsoft Dynamics 365 Finance and Operations Microsoft Dynamics 365 Retail MPOS Microsoft Dynamics 365 Retail MPOS customization Microsoft Dynamics 365 version control Model Driven Apps OAuth 2.0 Positive pay Postman Power Apps Power BI Power Platform Reporting Safe pay SharePoint Virtual Machine Web APIs X++ XDS Framework
© Impulz Technologies - All right reserved.