时间戳

首页 > 解决方案 > Angular 5 调用 AzureAD 保护的 WebAPI 导致 CORS

angular - Angular 5 调用 AzureAD 保护的 WebAPI 导致 CORS

问题描述

环境

配置

挑战

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

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

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

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

代码

网络API

    [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' 不允许访问。

标签： angularazurecorsasp.net-web-api2azure-active-directory

解决方案

这不是它的工作方式。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 的权限。

推荐阅读