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

Question

我有一个单页应用程序需要调用CORS启用web api。这两个应用程序都由AAD保护。我在https://github.com/matvelloso/AngularJSCORS找到了一个由Mat Velloso制作的样品

我遵循了自述文件中的步骤，唯一不确定的是“记住使用您创建的客户端应用程序中的类ID”在步骤2中，我使用了一个新生成的GUID。但我一直在想：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.

下面是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-要么你没有有效的访问令牌(这可能是因为AAD中的应用程序没有配置，所以一个应用程序可以调用另一个应用程序，或者只是因为你实际上没有有效的访问令牌)

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

如果这有帮助，请让我知道，请随时与我联系以获取更多信息。

向您致敬，Mat

Answer 2

很抱歉让您久等了。我想我没有收到通知，所以错过了。回答你的问题：

1-转到Azure Active Directory并创建应用程序时生成Guid。然后，它会分配一个新的Guid作为客户端ID，以标识这是您的应用程序。不要自己创建新的Guid，请使用其中标识为客户端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/