This is the 4th in a 5-part blog series. The previous blog posts touched on configuring and validating Azure Active Directory setup of a third-party application. This blog post focuses on implementing code to perform the authentication using the OAuth protocol using JQuery.

Prerequisites

This blog post assumes some knowledge of JavaScript, JQuery, Visual Studio and Microsoft CRM Development using the Web API endpoint.

This blog post also assumes that an application has been configured in Azure Active Directory as per Part 2 of this blog series.

Source code for the demo ASP.NET MVC application can be found on Codeplex at https://crmdynamicsoauthwebapiexample.codeplex.com/.

Important Note

When running the demo ASP.NET MVC application from localhost, a permission error will occur because of default browser security against Cross Origin Resource Sharing (CORS) attacks.

CORS security can be disabled in chrome by running the below command in the windows run command prompt.

Dynamics CRM OAuth Examples in a JQuery Web Application

Demo Application Overview – Authentication

  1. Navigate to http://localhost:53290/home/AuthenticatedByCrm2
  2. Click on login button.

log-in

  1. Login to the Dynamics CRM trial created in Part 2 of this blog series
    1. Enter Username
    2. Enter Password
    3. Click sign in

sign-in

  1. The demo application is displayed with a list of accounts from the Dynamics CRM application that was signed into in the previous step.

demo-application

 

Important Files in the Solution

important-files-in-the-solution

 

JQueryAuthorize.js

The JQueryAuthorize.js is the workhorse of the demo application. It contains JavaScript code that

  • generates the link to the Microsoft login web page
  • gets the access code sent to the screen
  • gets the access token from the authorization server

AuthenticatedByCrm2.cshtml

The AuthenticatedByCRM2.cshtml file contains the asp.net MVC razor code to create the login screen.

Creating the Login Link

The below code creates the URL to the Microsoft login screen and attaches the URL to the login link.

The URL requires the encoded resource, client id, state, encoded Redirect Uri and response type as query string parameters.

The resource is the Microsoft Dynamics CRM whose Web API endpoint we are trying to consume.

The client id is the application id created when configuring a new application in Azure Active Directory in part 2 of this blog series.

The redirect uri is the URL that the Microsoft login screen will redirect to after a user has successfully logged in.

 

Getting the Access Code from the response

Users are redirected back to the demo application screen after they have clicked on the login link and successfully logged in on the Microsoft login screen. The redirection URL includes an access code as a query string parameter. The below code shows how the global accessCode variable is set when the code query string parameter exists on page load.

 

Getting the Access Token using Access Code

If a code exists as a query string parameter, then an authorisation token is requested from the Microsoft token URL using the JQuery’s Post method.

To request an authentication token, query string parameters are added to in the body of a request. The body must include the client id and encoded client secret (both were created in part 2 of this blog series). The body also includes the access code and encoded redirect URL.

 

When the request for the authentication token has completed successfully the below code logs a few messages and then sets the global globalToken variable to the authentication token.

The global token is used by the GetAccounts method which gets a list of all accounts from the Microsoft Dynamics CRM resource. We will discuss the GetAccounts method and how to perform Create, Read, Update, and Delete OData operations in the next blog post.

 

Summary

This blog shows how to authenticate to the Dynamics CRM Web API endpoint from an external website using JQuery and the OAuth protocol. The full source code for the sample can be found here https://crmdynamicsoauthwebapiexample.codeplex.com.