AngularJS SPA访问Azure AD上保护的CORS Web API

Question

我遵循了SinglePageApp-DotNet示例，它运行良好。

然后我想让单页面应用程序调用CORS启用web api。这两个应用程序都由AAD保护并部署到Azure网站，我无法使其工作。我按照https://github.com/omercs/corsapisample和https://github.com/matvelloso/AngularJSCORS的例子对每个字进行了操作，但我得到了这个请求的授权被拒绝了＃39;错误。

当我禁用控制器操作的[Authorize]属性时，它工作正常。所以我认为CORS设置是正确的。从日志中我可以看到CORS预检（OPTION调用）成功。

知道如何解决问题吗？非常感谢您的帮助。

Answer 1

如果您看到来自CORS api端点的401响应代码，则表示您的服务不接受令牌。您需要在cors api项目配置中匹配令牌和受众中的受众。

1. 在Azure AD-项目1
注册CORS API项目
2. 找到应用密钥ida：租户并将该值替换为您的AAD租户名称
3. 找到应用密钥ida：Audience并将该值替换为您从Azure门户复制的App ID URI。
4. 启用样本中的cors
5. 在Azure AD-项目2注册单页应用
6. 授予project1
的权限
7. 在“其他应用程序的权限”部分中，单击“添加应用程序”。在“显示”下拉列表中选择“其他”，然后单击上方的复选标记。定位＆amp;单击To Go API，然后单击底部复选标记以添加应用程序。从“委派的权限”下拉列表中选择“Access To Go API”，然后保存配置。

启用Oauth2隐含：

默认情况下，Azure AD中配置的应用程序无法使用OAuth2隐式授权。使用Azure AD部分内的app config中的Manage Manifest按钮，下载应用程序的清单文件并将其保存到磁盘。使用文本编辑器打开清单文件。搜索oauth2AllowImplicitFlow属性。你会发现它被设置为false;将其更改为true并保存文件。使用Manage Manifest按钮，上载更新的清单文件。保存应用程序的配置。

如果有任何问题，您可以使用Fiddler获取令牌并检查它们。如果权限设置正确，则CORS API端点将接受令牌。

Answer 2

FYI。我们现在有一个官方示例演示如何将CORS与ADAL JS和Angular一起使用。您可以在https://github.com/AzureADSamples/SinglePageApp-WebAPI-AngularJS-DotNet

中找到代码和详细说明