Angular 5 调用 Azure AD 保护的 Web API 导致 CORS答案

【问题标题】：Angular 5 call AzureAD protected WebAPI results in CORSAngular 5 调用 Azure AD 保护的 Web API 导致 CORS
【发布时间】：2018-11-07 17:25:24
【问题描述】：

环境

Angular 5 前端
ASP.NET WebAPI 2
WebAPI 上的 AzureAD 身份验证

配置

WebAPI 为所有人启用了 CORS (***)
AzureAD 启用 OAuthImplicitFlow
Angular 和 WebAPI 托管在同一个 IIS 的不同端口中

挑战

当通过浏览器直接调用 WebAPI 时，AzureAD 身份验证挑战工作正常并且调用获得授权。但是，当 Angular 调用 WebAPI 时，AzureAD 的身份验证质询会引发 CORS 问题。

Angular 应用程序不会直接调用 Azure（通过 adal-angular），它应该只通过 WebAPI 调用。 Angular 应用程序成功地在 WebAPI 上成功调用了不受保护的 GET/POST 函数，因此 Angular-WebAPI 连接性很好。

（更新 1 Angular APP 调用 ADAL-ANGULAR 以通过 Azure 进行身份验证并获取令牌，然后将相同的令牌作为承载传递给 WebAPI）

任何想法我在这里错过了什么？可以根据需要提供任何特定的代码/配置。

代码

WebAPI

    [HttpGet]
    [Authorize]
    [Route(ApiEndPoint.AzureAD.GetMyProfile)]
    public async Task<ADUser> GetUserProfile()
    {
        ADUser user = null;

        GraphFacade graphFacade = new GraphFacade(this.graphServiceClient);       
        user = await graphFacade.GetMyProfileDetails();

        return user;
    }

角度

  Authenticate(): Observable<any> {
    this.authServerUrl = "https://localhost:44371/";   // This is where WebAPI is running
    let httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
    let authRequest = this._http.get<any>(this.authServerUrl + '/api/aduser/profile', httpOptions);
    return authRequest;
  }

错误信息

加载失败 https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=fba45f7b : 对预检请求的响应未通过访问控制检查：不存在“Access-Control-Allow-Origin”标头请求的资源。因此不允许访问 Origin 'null'。

【问题讨论】：

您希望在 Angular 应用中调用 /api/aduser/profile 时被重定向到 AAD SigninPage？
这是目标，但是，我的设计可能不正确。请指教

标签： angular azure cors asp.net-web-api2 azure-active-directory

【解决方案1】：

这不是它的工作方式。 Http 客户端将永远不会将您重定向到页面（在您的情况下为 AAD 登录页面）。它仅从/向资源检索/发送内容。您可以使用 window.location.replace() 执行重定向，但这可能不是您想要的（令牌不会返回到您的角度应用程序）。

您需要选择一个 Active Directory 身份验证库，例如 adal-js 或 MSAL（您会找到两者的 Angular NPM 包）和使用您的 AAD 设置配置组件。然后，您可以从 Angular 客户端挑战登录并为您的 API 请求 access_token。现在，您必须在针对（保护）API 发出的每个请求中传递 Authorization HTTP 标头中的 access_token。

请注意，您应该在 AAD 中创建另一个应用程序来代表您的 Angular UI，并授予该应用程序访问您的 API 的权限。

【讨论】：

我不希望在我的 Angular 应用程序中使用令牌，令牌仅用于保留在 WebAPI 层中。将检查基于 MSAL 的方式，然后进一步更新。谢谢
如果您使用 AAD 身份验证保护您的 API，您将需要在 Angular 应用程序中使用该令牌
我现在已经使用 ADAL 插件并成功获得了令牌和用户配置文件。但是，在将此令牌发送到 WebAPI 时，WebAPI 的身份验证质询（由 Azure）再次引发 CORS 错误（与上述相同）......我是否还需要在 web api 方面进行更多更改？
是的，您需要将 UI 的 URL 添加到 CORS 设置中的允许来源（在您的 API 应用中）
WebAPI 允许所有人 , * ,.. Angular 可以调用匿名身份验证成功的 api。这里 AzureAD 给出了 CORS 错误

【解决方案2】：

对于那些关注 msal-angular MsalHttpInterceptor 的人。
我自己实现了 MsalInterceptor 来克服 protectedResourceMap 的问题。
这是我的自定义代码块：

// #region own workaround in order not to put every api endpoint url to settings
if (!scopes && req.url.startsWith(this.settingsService.apiUrl)) {
  scopes = [this.auth.getCurrentConfiguration().auth.clientId];
}
// #endregion

// If there are no scopes set for this request, do nothing.
if (!scopes) {
  return next.handle(req);
}

PS：在 protectedResourceMap https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1776 中投票给通配符

【讨论】：