Angular 2/4 adal-angular4 Active Directory authenticates API issue

Question

I used this example to access the active azure directory from angular (4) app: https://github.com/benbaran/adal-angular4-example

I can authenticate to AD, but then I want to make subsequent API / APP calls that are also registered in AD.

I tried using this example:

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);
  }));
}

The first problem I encountered was a CORS error. I run the client application on localhost: and get:

XMLHttpRequest https://localhost:45678/stuff. https://localhost:45678/stuff '' https://login.microsoftonline.com/.......... ' CORS: Access-Control-Allow-Origin . https://localhost:4200 ', , .

/API, , ( https)

, signon/app id localhost.

/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, , OPTIONS, 302 ( "stuff" ), : Bearer {token}. , OPTIONS 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'

}

- , ? purchaseToken endpoints :

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

Answer 1

( ) API AD (adal4.service.js)

handleWindowCallback 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)];
}

URL- stateResponse ( ..), .

, - - , !

fork: adal-angular4