1

How do you authenticate with and query the Dynamics CRM Web API from within a SPA built using Angular 2 (TypeScript)?

Research so far has suggested that:

  • the Dynamics CRM (version 2016 or 365) instance must be registered as an application in Azure.
  • users can authenticate with Azure-registered applications via Azure AD. Azure has a client authentication library called ADAL written in JavaScript.

My attempts so far have involved cloning various Angular 2 repos built with ADAL, such as this one, and editing their configuration files to point towards my Azure application. These attempts have all resulted in 401 (Unauthorized) cross-domain errors which is detailed in my separate question.

Using the same configuration (e.g. cliendId) in this JavaScript walk-through from Microsoft is successful.

Community
  • 1
  • 1
Dave Clark
  • 2,243
  • 15
  • 32
  • Have you completed this walk-through to ensure you have everything working before introducing Angular complexity: https://msdn.microsoft.com/en-us/library/mt595797.aspx? – Nicknow Apr 19 '17 at 22:13
  • I've been able to complete that walk-through successfully. For it to work I had to use my Dynamics instance's _Service Root URL_ rather than the _organizationURI_ which the document asks for. I also had to change the API version from _v8.0_ to _v8.2_. – Dave Clark Apr 20 '17 at 07:14

2 Answers2

1

This Access-Control-Allow-Origin issue is more relative to the server-side. It doesn't matter you were developing with Angular 1 or Angular 2.

You can confirm this issue send the options request manually to verity whether your domain is allowed to request. For example, we can check whether the AJAX request from http://localhost:3000 is allowed using the request below:

OPTIONS: https://xxxx.crm.dynamics.com/api/data/v8.0/accounts
Authorization: Bearer {accessToken}
Origin: http://localhost:3000
Host: xxxx.crm.dynamics.com
Access-Control-Request-Headers: authorization
Access-Control-Request-Method: GET

And if it will return the response like below if the domain is allowed( refer Access-Control-Allow-Origin): enter image description here

To fix this issue, you need to check whether the server supports the CORS. If it doesn't allowed, you can create a web API as the proxy for a workaround.

Community
  • 1
  • 1
Fei Xue
  • 14,369
  • 1
  • 19
  • 27
  • [My other question](http://stackoverflow.com/questions/43372088/unauthorized-http-request-to-dynamics-crm-web-api-via-angular-2-using-adal) shows under the **Response 1** heading that I am sending an `OPTIONS` pre-flight request which is returning `200 OK` with the header `Access-Control-Allow-Origin: http://localhost:3000`. This suggests that CORS is enabled on the server but the way in which the request is sent via my code is causing an issue. – Dave Clark Apr 20 '17 at 12:36
  • 1
    It seems the issue is relative to the token is not invalid, are you able to capture the token in your SPA and test it using PSOT man again? In-addiion, did you check the code sample about Angular 2 I have uploaded? – Fei Xue Apr 21 '17 at 02:36
1

The code sample provided by Fei Xue posted here on GitHub has proved successful in authenticating with a Dynamics CRM application hosted in Azure and querying the Web API.

Similar code samples I've used have resulted in 401 Unauthorized HTTP errors. Why this sample works and others do not remains unanswered for the moment.

Dave Clark
  • 2,243
  • 15
  • 32