Angular client needs Access Token for Web API

Question

I have a Web API secured by OWIN that requires the user to be authenticated using Azure Active Directory. I’m able to make requests via Postman with the access token I obtained using the Microsoft Authorization URL.

From my Angular client (also secured by Azure AD), however, I cannot get the access token for the Web API without getting redirected to the API. Is there any way for the client app (which has a different client id than the Server API) to retrieve the access token it needs to use in the Authorization header of API requests?

Answer 1

You have registred two applications in your Azure Active Directory (your UI and your API). You need to grant the UI access on behalf of the current User for the API. You login the user using the registred UI application ID and finally retrieve an access token for the API.

Here the pseudo code for the ng2-adal component:

import { Injectable } from '@angular/core';

@Injectable()
export class AuthconfigService {

  constructor() { }

  public get adalConfig(): any {
    return {
      tenant: 'yourTenant.onmicrosoft.com',
      clientId: 'UI AppId (GUID)',
      redirectUri: window.location.origin + '/',
      postLogoutRedirectUri: window.location.origin + '/'
    };
  }

  public get apiKey(): string
  {
    return "API AppId (GUID)";
  }

}

Then in your app.component.ts:

this.adalService.init(this.authconfigService.adalConfig);
this.adalService.login();

this.adalService.acquireToken(this.authconfigService.apiKey).subscribe(
      (data) => {
.....});