How to get correct bearer token through Microsoft-adal-angular6 library?

Question

Im trying to get data from the Azure Resources API: https://management.azure.com/subscriptions/%7BsubscriptionId%7D/tagNames?api-version=2018-05-01

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { MsAdalAngular6Service } from 'microsoft-adal-angular6';

@Injectable({
  providedIn: 'root'
})

export class AzureApiService {


  httpOptions = {
    headers: new HttpHeaders({ 
      'Authorization': 'Bearer ' + this.adalSvc.accessToken,
      //'Access-Control-Allow-Origin' : '*'    
  })}

  azure_url = "https://management.azure.com/subscriptions/xxxxx-9d71-xxxx-8f20-xxxxxx/tagNames?api-version=2018-05-01";
  constructor(private http: HttpClient, private adalSvc: MsAdalAngular6Service) { }

  getTags(){
    console.log(this.adalSvc.accessToken);
    return this.http.get(this.azure_url, this.httpOptions).subscribe(
      result => {
        console.log(result) 
      },
      error => {
        console.log(error)
      }
    )
  }

But i am recieving this error: error="invalid_token", error_description="The access token is from wrong audience or resource."

In the AppComponent i can log in and get authenticated and recieve a token through

constructor(private adalSvc: MsAdalAngular6Service, private ApiService: AzureApiService) {
    this.adalSvc.acquireToken('https://management.core.windows.net').subscribe((token: string) => {
    console.log(token);
  });;
  }

But its not valid when i apply it as bearer token in the request header.

this is my App module configuration:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { SvgComponent } from './svg/svg.component';
import { DataComponent } from './data/data.component';
import { ListComponent } from './list/list.component';

import { HttpClientModule } from '@angular/common/http';
import { MsAdalAngular6Module, AuthenticationGuard } from 'microsoft-adal-angular6';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SvgComponent, 
    DataComponent,
    ListComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    MsAdalAngular6Module.forRoot({
      tenant: 'xxxxx-a23e-xxxxx-ad14-xxxxxx',
      clientId: 'xxxxx-65b0-xxxxx-9425-xxxxxxxxx',
      redirectUri: window.location.origin,
      authority: 'https://login.microsoftonline.com/common/oauth2/authorize',
      endpoints: {
      },
      navigateToLoginRequestUrl: false,
      cacheLocation: 'sessionStorage'
    }),
    AppRoutingModule
  ],
  providers: [AuthenticationGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

Also, when i go to https://learn.microsoft.com/en-us/rest/api/resources/tags/list and press 'try it', here i can log in to our azure account and get a working bearer token, which we in turn can use in the code for accessing the resources we want.

score 1 · Accepted Answer · answered Apr 04 '19 at 13:50

1

I think you need to specify the correct resource id when acquiring the token. The error you are receiving is saying you cannot use that token to access the resource you are requesting

this.adalSvc.acquireToken('https://management.core.windows.net').subscribe((token: string) => {

Are you sure the value entered here is the correct resource? Might be worth checking

See the ADAL Github page for more info

answered Apr 04 '19 at 13:50

Mikey123

1,201
2
12
23

After experimenting with this suggestion we realized it didnt matter what we wrote as url, we still got a token that's not working as the bearer token. And even when we removed this whole section of code, we still get a token. – David Lundholm Apr 05 '19 at 15:09
2

After struggling with this for a few more days I finally understood that to get the correct bearer token, i had to declare the endpoint array like this: `endpoints: { 'management' : 'https://management.azure.com/' //'https://management.azure.com/' : 'xxxxxx-bcxx-xxx-a925-xxxxxx', }, ` And then aquire the token with: `this.adalSvc.acquireToken('management') .subscribe(result => console.log(result), err => console.log(err))` After this i got a token in the session storage which i could use as bearer token. – David Lundholm Apr 09 '19 at 12:43
I'm glad you managed to solve it! Getting the resource right is essential for it to work. Unfortunately often there are no proper error messages when running into issues with this. – Mikey123 Apr 09 '19 at 14:16

How to get correct bearer token through Microsoft-adal-angular6 library?

1 Answers1