azure - 如何使用 ADAL.js 并对 Web API 和 Azure AD 启用安全 CORS 调用

Question

我有一个单页应用程序需要调用启用 CORS 的 Web api。这两个应用程序均受 AAD 保护。我在 https://github.com/matvelloso/AngularJSCORS 找到了 Mat Velloso 完成的示例

我已按照自述文件中的步骤进行操作，唯一不确定的是在步骤 2 中“记住使用您创建的客户端应用程序中的类 ID”，我使用了新生成的 GUID。但我不断收到: XMLHttpRequest 无法加载 http://localhost:63918/api/values。该请求被重定向到“https://login.windows.net/devazureadnrw.onmicrosoft.com/wsfed?wa=wsignin1.0…3d0%26id%3dpassive%26ru%3d%252fapi%252fvalues&wct=2015-01-09T11%” 3a37%3a19Z'，对于需要预检的跨源请求是不允许的。

以下是 Chrome 控制台输出:

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

CORS 飞行前请求的状态代码为 200:

> 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

我被困住了，因为这是我找到的唯一样本。请问有什么建议吗？非常感谢。

Answer 1

我是 Mat Velloso，我创建了该样本，以便您可以拍摄我:)

发生的情况是这样的:您正在执行 CORS 调用，但服务器拒绝它并要求您进行身份验证。这可能是由于以下三个原因之一(除非我遗漏了某些内容):

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

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

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

请告诉我这是否有帮助，请随时联系我以获取更多信息。

问候，垫子