角2 /4 adal- Angular 4活动目录认证API问题

Question

我一直在遵循这个示例从一个角(4)应用程序访问azure活动目录：https://github.com/benbaran/adal-angular4-example

我可以对AD进行身份验证，但随后我想对也在AD中注册的API / APP进行调用。

我试过使用这个例子：

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错误。我正在本地主机上运行客户端应用程序:并获得：

XMLHttpRequest无法加载https://localhost:45678/stuff。将“https://localhost:45678/stuff”重定向为“https://login.microsoftonline.com/.”已被CORS策略阻止:请求的资源上没有“访问-控制-允许-原产地”标题。因此，“https://localhost:4200”源是不允许访问的。

我试图访问的应用程序/ API也在本地运行(客户机和服务器都是https)。

它们都是活动目录中的注册应用程序，它们的登录/app id uris被设置为各自的localhost地址。

app / 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铬扩展，使用它我得到了一个选项请求，然后是一个302 (指向我的“OPTIONS”端点)，其中包含了我的授权：Bearer {token}头。最后，还有一个选项和GET (带有auth标头)到login.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'

}

我有什么明显的遗漏吗？我还试过使用端点属性绕过acquireToken步骤，但没有结果：

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

Answer 1

我们(我们的高级开发人员)在登录到AD (adal4.service.js)后试图访问注册API时发现了一些问题。

首先，在handleWindowCallback中，在我们的例子中，requestType总是被设置为未知的，所以状态映射始终是假的。

这里有点骇人听闻：

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已被编码(百分比、符号等)，因此永远不会匹配，从而使回调为空。

希望这能帮助别人--也许能找到更好的解决方案！

这是叉子：阿达尔-安古拉