2

I have a single page application needs to call a CORS enable web api. Both applications are secured by AAD. I found a sample done by Mat Velloso at https://github.com/matvelloso/AngularJSCORS

I've followed the steps in the readme file, only thing not sure was "remember to use the class ID from the client application you created" in step 2, I used a newly generate GUID. But I'm keep getting: XMLHttpRequest cannot load http://localhost:63918/api/values. The request was redirected to 'https://login.windows.net/devazureadnrw.onmicrosoft.com/wsfed?wa=wsignin1.0…3d0%26id%3dpassive%26ru%3d%252fapi%252fvalues&wct=2015-01-09T11%3a37%3a19Z', which is disallowed for cross-origin requests that require preflight.

Follwing is the Chrome console out:

renewToken is called for resource:http://localhost:63918/
adal.js:959 Add adal frame to document:adalRenewFrame
adal.js:959 Renew token Expected state: 9964340c-3c3b-4a2a-b710-f0d44f58655a|http://localhost:63918/
adal.js:755 Navigate url:https://login.windows.net/devazureadnrw.onmicrosoft.com/oauth2
authorize?re…e=9964340c-3c3b-4a2a-b710-f0d44f58655a%7Chttp%3A%2F%2Flocalhost%3A63918%2F
adal.js:959 Navigate to:https://login.windows.net/devazureadnrw.onmicrosoft.com/oauth2
authorize?re….onmicrosoft.com&domain_hint=devazureadnrw.onmicrosoft.com&nonce=undefined
adal.js:959 Add adal frame to document:adalRenewFrame
adal.js:959 State: 9964340c-3c3b-4a2a-b710-f0d44f58655a|http://localhost:63918/
adal.js:959 State status:true
adal.js:959 State is right
adal.js:959 Fragment has access token
adal.js:959 State: 9964340c-3c3b-4a2a-b710-f0d44f58655a|http://localhost:63918/
adal.js:959 State status:true
adal.js:959 State is right
adal.js:959 Fragment has access token
adal.js:959 Add adal frame to document:undefined
(index):1 XMLHttpRequest cannot load http://localhost:63918/api/values. The request was redirected to https://login.windows.net/devazureadnrw.onmicrosoft.com/wsfed?wa=wsignin1.0…3d0%26id%3dpassive%26ru%3d%252fapi%252fvalues&wct=2015-01-09T11%3a37%3a19Z', which is disallowed for cross-origin requests that require preflight.
adal.js:959 Add adal frame to document:undefined
adal.js:959 State: 9964340c-3c3b-4a2a-b710-f0d44f58655a|http://localhost:63918/
adal.js:959 State status:true
adal.js:959 State is right
adal.js:959 Fragment has access token
adal.js:959 State: 9964340c-3c3b-4a2a-b710-f0d44f58655a|http://localhost:63918/
adal.js:959 State status:true
adal.js:959 State is right
adal.js:959 Fragment has access token

The CORS pre flight request was made with 200 status code:

> values/api OPTIONS    200 OK text/plain   angular.js:8560 Script 461 B 0 B
> 5 ms 4 ms
> authorize?response_type=token&client_id=1208eac1-f4dd-42f5-be33-886075f81be2&resource=http%3A%2F%2Flocalhost%3A63918%2F&redirect_uri=http%3A%2F%2Flocalhost%3A44302%2F&state=9964340c-3c3b-4a2a-b710-f0d44f58655a%7Chttp%3A%2F%2Flocalhost%3A63918%2F&prompt=none&login_hint=binjie%40devazureadnrw.onmicrosoft.com&domain_hint=devazureadnrw.onmicrosoft.com&nonce=undefined
> login.windows.net/devazureadnrw.onmicrosoft.com/oauth2 GET    302 Found
> text/html adal.js:297 Script
> 3.6 KB 0 B
> 1.30 s
> 1.29 s values/api GET 302 Found application/json  Other   677 B 0 B 13 ms 13 ms

I'm stuck since this is the only sample I found. Any suggestions please? Many thanks.

4

2 回答 2

1

这是 Mat Velloso，我创建了那个样本，所以你可以拍摄我 :)

这是发生了什么：您正在执行 CORS 调用，但服务器拒绝它并要求您进行身份验证。这可能是由于以下三个原因之一（除非我遗漏了什么）：

1-Web API 没有正确配置为允许 CORS（检查我的示例和注释，我一开始遇到了完全相同的错误，因为我没有为它配置我的 Web API

2-您没有有效的访问令牌（这可能是因为尚未配置 AAD 中的应用程序，因此允许调用另一个，或者只是因为您实际上没有有效的访问令牌）

3-或者 ADAL 没有为您获取正确的访问令牌，因为您没有配置端点集合（检查我如何在我的应用程序 JavaScript 中初始化它，清除正确的 URL）

让我知道这是否有帮助，请随时 ping 我以获取更多信息。

问候，垫

于 2015-01-12T18:17:19.603 回答
1

抱歉耽搁了。我想我没有收到通知，所以我错过了。回答您的问题：

1-当您转到 Azure Active Directory 并创建应用程序时会生成 Guid。然后它分配一个新的 Guid 作为客户端 ID，用于标识您的应用程序。不要自己创建新的 Guid，使用那里标识为 Client ID 的 Guid。

2-应用程序是部署在 Azure 上还是在本地运行（或在其他任何地方运行）都无关紧要。只要您正确配置回复 URI 以使重定向落到原处，您就可以开始了。

3-一旦您的用户进行身份验证并且您获得了一个令牌，那么您对该令牌所做的任何事情都已经代表该用户。因此，例如，您可以查询 Azure Graph API 并检查该用户所在的组。图形 API 是一个 REST API，可让您与 Azure Active Directory 对话。为了使其正常工作，请记住您需要授予应用程序调用 Azure Graph API 并读取此类设置的权限。另请记住，对于您调用的每个端点，您都需要一个特定的访问令牌（您从身份验证中获得的那个仅适用于返回 AAD 并为您想要访问的特定事物请求特定的访问令牌）。

也许你开始的一个好方法是看看这个：http ://azure.microsoft.com/en-us/documentation/articles/mobile-services-how-to-register-active-directory-authentication/

于 2015-02-11T01:38:54.530 回答