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 App with a Microsoft Dataverse through Web API – Part I of 3

  • Home
  • Blog
  • Dynamics 365
  • Connect the Angular App with a Microsoft Dataverse through Web API – Part I of 3
  • January 13, 2023January 23, 2023
  • Ahmad Hussain

Angular Dataverse

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:
Azure Portal
Azure Portal

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

registration
registration

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.

registration

registration

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

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

registration

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

registration

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

registration

  1. 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.

registration

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.

tenant

tenant

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

Posted in Dynamics 365, Microsoft Azure, Microsoft DataverseTagged D365, Dataverse

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 Microsoft Dataverse – Part 3 of 3
  • Connect the Angular with a Microsoft Dataverse using Web API – Part 2 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.