How to – Connect to Dynamics 365 Web API using OAuth 2.0 – Implicit Grant Type (through Single Page Apps)


In previous post we saw how to connect to Dynamics 365 Web API using Postman and Implicit Grant type, in this post we will be creating a single page html application and will use ADAL library in our JavaScript to call Web API using Implicit Grant Type.

While writing the single page application, we need to consider CORS. CORS – Cross-Origin Resource Sharing basically enables us to access resources that are in different domain and here the CORS support is only enabled for the Web API and not for the Organization Service. The Azure Active Directory Authentication Library (adal.js) that we will be using in our Single Page App will takes cares of all the CORS complexity for us.

To get started,

Create a new ASP.NET Web Application of type Empty Project.

Add an HTML page to it.

Add the reference to ADAL JS i.e. Azure Active Directory Library for JavaScript, which allows client application to get tokens on behalf of users using OAuth 2.0 Implicit Flow.


To make example easy to understand, let us add just 3 buttons and 2 DIV


Before we proceed further, login to Azure Portal and register the client application.

Copy the Client Id.

Specify the URL of the page that we are working on as the REDIRECT URI and also enable Access Tokens and ID Tokens required for implicit grant to work.


Back in our html page,

First step is to get the AuthenticationContext object.

To get the authentication context we can use the below line of code


Below is how we will specify the configuration details required by the AuthenticationContext.


  • postLogoutRedirectUri – ADAL redirects the user to postLogoutRedirectUri after logout. Defaults is ‘redirectUri’.
  • cacheLocation – ADAL caches tokens in the browser storage which defaults to ‘sessionStorage’. You can set this to either ‘localStorage’ or ‘sessionStorage’.

Read about all the configuration options here

https://github.com/AzureAD/azure-activedirectory-library-for-js/wiki/Config-authentication-context

Login and Logout methods are straightforward à

Login method will redirect the user to a new page for entering the credentials. If we want to remain in the same page and use popup instead, we can specify it in the popUp property of config.

To get the user details use the GetCachedUser() method of Authentication Context. The sign-in flow not only gets the token but also authenticates the user with Azure AD. The user.profile property contains the claims about the user.

User Profile è

AcquireToken method of AuthenticationContext to get the token and make the request

The getUserDetails method

The basic flow of the application à

Click on Login to authenticate. The message div indicates that there is no user information present in the cache.

Enter the credentials

This redirects back to the page, showing logout button and Get User GUID button and hiding login button. It also shows the Name of the user fetched from the profile.

user.profile.name

Click on Get User GUID to call the WhoAmI request and display the GUID of the user.


Finally click on Logout and select the account to sign out of.

On successful sign out we will be redirected to our page.

Back in our Fiddler below is the Request being passed to the Authorization end point.

response_type value of id_token value has been added by OpenID Connect. OpenID connect extends OAuth 2.0, by adding the authentication layer to it, by allowing the verification of the identity of the end user as well as to obtain basic information about the end user.

More on OpenId  – https://medium.com/@darutk/diagrams-of-all-the-openid-connect-flows-6968e3990660

Source code 

Hope it helps..

Sample Code – Dynamics 365 Web API / Organization Service

 

Advertisements

Author: Nishant Rana

I love working in and sharing everything about Microsoft.NET technology !

4 thoughts on “How to – Connect to Dynamics 365 Web API using OAuth 2.0 – Implicit Grant Type (through Single Page Apps)”

Please share your thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Power Melange

Power Melange By Shalinee

Clavin's Blog

Power Automate - Power Apps - SharePoint Online - Azure - Nintex - K2 - Artificial Intelligence

Sat Sangha Salon

An Inquiry in Being

The Indoencers

The Influencers & Influences of Indian Music

Monika Halan's blog

Hand's-free money management

D365 Demystified

A closer look at Microsoft Dynamics 365.

Microsoft Mate (msftmate) - Andrew Rogers

Experienced consultant primarily focused on Microsoft Dynamics 365 and the Power Platform

Knowhere365

Specific topics by Django Lohn on the whole Microsoft365 Stack

Manmit Rahevar's Blog

One Stop Destination for Microsoft Technology Solutions

MG

Naturally Curious

Brian Illand

Power Platform and Dynamics 365

Steve Mordue MVP

A Microsoft Business Applications MVP

Subwoofer 101

Bass defines your home theater

SQLTwins by Nakul Vachhrajani

SQL Server tips and experiences dedicated to my twin daughters.

Everything D365

Discovering Azure DevOps and D365 Business Applications

Tech Wizard

Lets do IT Spells

Two Bite Tips

Valuable Tips To Grow Your Business

XRM Tricks (Power Platform & Dynamics CRM )

Power Platform & Dynamics CRM

CRM TIPS BY PRM

Mail to crmtipsbyprm@gmail.com for queries and suggestions

nijos.dev

Giving back to the community what I have learned

xrm CRM Dynamics

Dynamics CRM Technical & Functional Info

Dynamics 365 Blogs - Explained in unique way

Sometimes you need to look at things from different perspective.

CRM Keeper

Dynamics 365 Customer Engagement, CRM, Microsoft CRM, Dynamics CRM

EVOLVED365

Step into the world of a Dynamics 365 Consultant

Dianamics PCF Lady

Diana & Dynamics 365 & Power Platform

Sara Lagerquist

No Code Customization Concepts

innovativeaj

developer, designer, writer, fun loving, patriotic, humble and a sweet person inside out :) love and respect people who have a great sense of humor.

Temmy Wahyu Raharjo

Dreaming to be a clean coder and TDD minded programmer.

Transform 365

We blog about problems we face and code we write to help others

Virendra Agrawal's Blog

Blogs, News and Insights of Dynamics 365 world

Jukka Niiranen

Thinking forward about Microsoft Power Platform

Amar Singh

Share your knowledge. It’s a way to achieve immortality.

%d bloggers like this: