CODEWITHSUNDEEP
angularazure-active-directoryazure-resource-managerbearer-tokenmicrosoft-adal-angular6
David Lundholm
David Lundholm

Reputation: 23

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

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.

Upvotes: 2

Views: 2940

Answers (1)

Mikey123
Mikey123

Reputation: 1429

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

Upvotes: 1

Related Questions