Authenticate and query the Dynamics CRM Web API using Angular 2 (TypeScript)

Question

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.

Have you completed this walk-through to ensure you have everything working before introducing Angular complexity: msdn.microsoft.com/en-us/library/mt595797.aspx? — Nicknow
– Nicknow, Commented Apr 19, 2017 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
– Dave Clark, Commented Apr 20, 2017 at 7:14

Community · Accepted Answer · 2020-06-20 09:12:55Z

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):

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 20, 2017 at 8:39

Fei Xue

14.7k1 gold badge24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dave Clark Over a year ago

My other question 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.

Fei Xue Over a year ago

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?

Dave Clark · Accepted Answer · 2017-04-21 10:49:20Z

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.

answered Apr 21, 2017 at 10:49

Dave Clark

2,31117 silver badges33 bronze badges

Collectives™ on Stack Overflow

Authenticate and query the Dynamics CRM Web API using Angular 2 (TypeScript)

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related