使用 Angular 2 (TypeScript) 验证和查询 Dynamics CRM Web API答案

【问题标题】：Authenticate and query the Dynamics CRM Web API using Angular 2 (TypeScript)使用 Angular 2 (TypeScript) 验证和查询 Dynamics CRM Web API
【发布时间】：2017-04-19 13:51:57
【问题描述】：

如何在使用 Angular 2 (TypeScript) 构建的 SPA 中通过 Dynamics CRM Web API 进行身份验证和查询？

迄今为止的研究表明：

Dynamics CRM（2016 或 365 版）实例必须在 Azure 中注册为应用程序。
用户可以通过 Azure AD 对 Azure 注册的应用程序进行身份验证。 Azure 有一个名为 ADAL 的客户端身份验证库，用 JavaScript 编写。

到目前为止，我的尝试涉及克隆使用 ADAL 构建的各种 Angular 2 存储库，例如 this one，并编辑它们的配置文件以指向我的 Azure 应用程序。这些尝试都导致了401 (Unauthorized) cross-domain 错误，在我的separate question 中有详细说明。

在 this 中使用相同的配置（例如 cliendId）来自 Microsoft 的 JavaScript 演练是成功的。

【问题讨论】：

在引入 Angular 复杂性之前，您是否已完成此演练以确保一切正常：msdn.microsoft.com/en-us/library/mt595797.aspx？
我已经能够成功完成该演练。为了让它工作，我必须使用我的 Dynamics 实例的 Service Root URL 而不是文档要求的 organizationURI。我还必须将 API 版本从 v8.0 更改为 v8.2。

标签： angular azure typescript dynamics-crm adal

【解决方案1】：

这个 Access-Control-Allow-Origin 问题更多地与服务器端相关。使用 Angular 1 或 Angular 2 进行开发并不重要。

您可以确认此问题手动发送选项请求以验证您的域是否允许请求。例如，我们可以使用下面的请求来检查来自http://localhost:3000的AJAX请求是否被允许：

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

如果域被允许，它将返回如下响应（参考Access-Control-Allow-Origin）：

要解决此问题，您需要检查服务器是否支持 CORS。如果不允许，您可以创建一个 Web API 作为解决方法的代理。

【讨论】：

My other question 在 Response 1 标题下显示我正在发送 OPTIONS 飞行前请求，该请求返回 200 OK，标题为 Access-Control-Allow-Origin: http://localhost:3000。这表明在服务器上启用了 CORS，但通过我的代码发送请求的方式导致了问题。
看来这个问题与令牌有关，不是无效的，您是否能够在您的 SPA 中捕获令牌并再次使用 PSOT man 对其进行测试？另外，您是否查看了我上传的有关 Angular 2 的代码示例？

【解决方案2】：

Fei Xue 提供的代码示例发布在here on GitHub 已证明成功地通过托管在 Azure 中的 Dynamics CRM 应用程序进行身份验证并查询 Web API。

我使用的类似代码示例导致了401 Unauthorized HTTP 错误。为什么这个示例有效，而其他示例目前没有得到解答。

【讨论】：