Angular 2/4 adal-angular4 active directory验证到API问题

我一直遵循此示例从angular（4）应用程序访问azure active directory：

我可以对AD进行身份验证，但随后我想调用同样在AD中注册的API/应用程序

我尝试使用以下示例：

public CallAPI() {
  let headers = new Headers({ 'Content-Type': 'application/json' });
  var token;

  this.service.acquireToken("{client id}").subscribe(p => {
    token = p;

    headers.append("Authorization", 'Bearer ' + token);

    let options = new RequestOptions({ headers: headers });
    // Make the HTTP request:
    this.httpClient.get('https://localhost:45678/stuff', options).subscribe(data => {
      // Read the result field from the JSON response.
      this.results = data['results'];
      console.log(data);
    });

  }, (error => {
    console.log(error);
  }));
}

我遇到的第一个问题是CORS错误。我正在localhost:上运行客户端应用程序，并获取：

无法加载XMLHttpRequest。CORS策略已阻止从“”重定向到“……”：请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“”

我尝试访问的应用程序/API也在本地运行（客户端和服务器都是https）

它们都是在active directory中注册的应用程序，它们的登录/应用id URI设置为各自的本地主机地址

应用程序/api使用服务堆栈，因此设置为：

app.SetDefaultSignInAsAuthenticationType(CookieAuthenticationDefaults.AuthenticationType);
app.UseCookieAuthentication(new CookieAuthenticationOptions());
app.UseWindowsAzureActiveDirectoryBearerAuthentication(
  new WindowsAzureActiveDirectoryBearerAuthenticationOptions
  {
    TokenValidationParameters = new System.IdentityModel.Tokens.TokenValidationParameters
    {
      ValidAudience = Audience
    },
    Tenant = Domain
  });

public override void Configure(Container container)
{
  AddPreRequestFilters();
  AddErrorResponseFilters();

  this.Plugins.AddRange(ServiceConfiguration.GetPlugins());
  this.Plugins.Add(new SwaggerFeature());
  this.Plugins.Add(new CorsFeature(allowedHeaders: "Origin, X-Requested-With, Content-Type, Accept, Authorization", allowCredentials: true));
  ServiceConfiguration.Configure(container);

}

为了绕过CORS错误，我使用了

Allow-Control-Allow-Origin

chrome扩展，使用它我得到一个选项请求，然后是一个302（到我的'stuff'端点），其中包含我的授权：

Bearer{token}

头。最后还有一个选项和GET（带有auth头）登录到.microsoft.com/…/oath2

这总是无法登录

我的ADAL配置如下所示：

const config: adal.Config = {                          
  tenant: 'xxxx.onmicrosoft.com',            
  clientId: 'xxxxxxxxxxxxxx',   // client id of AD app
  redirectUri: 'https://localhost:4200/', // the angular app
  cacheLocation: 'localStorage'

}

我有什么明显的遗漏吗？我还尝试使用endpoints属性绕过acquireToken步骤，但没有成功：

endpoints: {
  'https://localhost:45678/': 'https://localhost:45678/'   <-- the address of the API/APP I want to call
}

端点：{
'https://localhost:45678/': 'https://localhost:45678/“我们（我们的高级开发人员）在登录AD（adal4.service.js）后尝试访问注册的API时发现了几个问题

首先，在HandleIndowCallback中，在我们的示例中，requestType始终设置为UNKNOWN，因此statematch始终为false

这里有点奇怪：

if(requestInfo.requestType === 'UNKNOWN') {
requestInfo.requestType = this.adalContext.REQUEST_TYPE.RENEW_TOKEN;
requestInfo.stateMatch = true;
}

我们还必须改变这一点：

else if (requestInfo.requestType === 
this.adalContext.REQUEST_TYPE.RENEW_TOKEN) {
this.adalContext.callback = 
window.parent.callBackMappedToRenewStates[requestInfo.stateResponse];
}

为此：

else if (requestInfo.requestType === 
this.adalContext.REQUEST_TYPE.RENEW_TOKEN) {
this.adalContext.callback =
window.parent.callBackMappedToRenewStates[
decodeURIComponent(requestInfo.stateResponse)];
}

stateResponse中的url已编码（百分比符号等），因此将永远不会匹配，并保留回调null

希望这能帮助一些人——也许能找到更好的解决方案

这里有一个问题：
问题不在于你的站点，而在于
https://login.microsoftonline.com/
您的代码正在将请求重定向到不发送Access Control Allow Origin response标头，浏览器需要该标头才能允许前端JavaScript代码跨源访问响应在这种情况下，唯一可能的解决方案是不处理来自前端代码的登录请求，而是从后端代码处理该请求。您现在试图让它遵循的流程将不起作用。因为您提到“它们都是在active directory中注册的应用程序，其登录/应用id URI设置为各自的本地主机地址“。您需要为您的api应用程序获取令牌，acquireToken函数的客户端id值是多少？api应用程序令牌验证逻辑中的
validudience
值是多少？@NanYu acquireToken中的客户端id是在AD中注册的api服务应用程序的应用程序id（在我的示例中是'stuff'端点/）angular应用程序使用AD登录，然后从acquireToken获取令牌。问题是，当我尝试使用此令牌访问API本身时，我可以看到授权：Bearner…存在，但我始终会收到“我们无法为您登录”html页面响应。我的有效性设置为API的本地主机地址，即感谢