Connecting Cordova Apps to Dynamics CRM using Web API

In Dynamics CRM 2016 Microsoft introduced Web API. You can use it across wide variety of programming languages, devices and platforms.

Apache Cordova

Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development.

In this tutorial we will learn how to connect to Dynamics CRM from Cordova using Web API.

How to Register an App in Azure Active Directory

Before using Web API, we need to register the App in Azure Active Directory and get the clientId and redirectURL. For more details please check our following blog post:

How to register an App in Azure Active Directory

Application

The App takes Dynamics CRM online URL, username and Password and return fullname of the logged in user. This App is created in Visual Studio 2015 and uses Azure Active Directory Authentication Library for Cordova Plugin.

Note: The complete code of the application is hosted on Github

Working

In this App authentication is performed using Azure Active Directory Authentication Library for Cordova Plugin.

First part is to create Authentication Context as shown below:

var authority = 'https://login.microsoftonline.com/common';
AuthenticationContext = Microsoft.ADAL.AuthenticationContext;
AuthenticationContext.createAsync(authority).then(function (context) {

})

Next is to send the request to acquire Access Token. Pass Microsoft Dynamics CRM Online URL, ClientId and RedirectURL as parameters. We can get the ClientId and RedirectURL from Azure Active Directory.

context.acquireTokenAsync(organizationURL, clientID, redirectURL).then(function (authResult) {

})

When the Access Token is acquired, we can call the Web API. Below code is used to call Dynamics CRM Web API WhoAmI Function. For more details about Web API Functions, you can check our blog post:

Web API Functions Dynamics CRM 2016

var req = new XMLHttpRequest
req.open("GET", encodeURI(organizationURL + "/api/data/v8.0/WhoAmI"), true);
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {

}
};
req.setRequestHeader("OData-MaxVersion", "4.0");
req.setRequestHeader("OData-Version", "4.0");
req.setRequestHeader("Accept", "application/json");
req.setRequestHeader("Authorization", "Bearer " + authResult.accessToken);
req.send();

The result of the WhoAmI Request is passd to systemusers entity to retrieve fullname of the logged in user.

var req = new XMLHttpRequest
req.open("GET", encodeURI(organizationURL + "/api/data/v8.0/systemusers(" + userId + ")?$select=fullname"), true);
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
}
};
req.setRequestHeader("OData-MaxVersion", "4.0");
req.setRequestHeader("OData-Version", "4.0");
req.setRequestHeader("Accept", "application/json");
req.setRequestHeader("Authorization", "Bearer " + authResult.accessToken);
req.send();

Conclusion

The given sample is great starter app to perform authentication in Cordova apps. It gives a good overview of how you can make connection with CRM from external apps not developed in .NET. You can freely use this sample in your apps for authentication purposes.