-1

I'm trying to use MSAL with angular9 so i can get access to a custom 'dynamics.com' api I am able to obtain a valid access token for the login API

But for some reason I can't access this token to make a GET request for a custom api

this is my app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MsalInterceptor, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG } from '@azure/msal-angular';
import { InteractionType,  IPublicClientApplication, PublicClientApplication } from '@azure/msal-browser';

 imports: [
    MsalModule.forRoot( new PublicClientApplication({
      auth: {
        clientId: 'xxxxx-xxxxxxxxxxxx', // This is your client ID
        authority: 'https://xxxx.microsoftonline.com/xxxxxxxxxxxxx', // This is your tenant ID
        redirectUri: 'http://localhost:4200'// This is your redirect URI
              },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE,
      }
      }), {
        interactionType: InteractionType.Popup,
        authRequest: {
          scopes: ['user.read', 'user_impersonation']
        }
      }, {
        interactionType: InteractionType.Popup,
        protectedResourceMap: new Map([ 
          ['https://xxxxxxxxxxx.xxxxxxxxxxxx.dynamics.com/user_impersonation', ['user_impersonation']]
        ])
      })

]

// these are the providers
providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: MsalInterceptor,
          multi: true
        },
        MsalService
        
        
  ],

this is my app.component.ts

  apiResponse: string;
constructor(private authService: MsalService, private http: HttpClient,
    ) {}
ngOnInit(): void {
      this.authService.instance.handleRedirectPromise().then( res => {
        if (res != null && res.account != null) {
          this.authService.instance.setActiveAccount(res.account)
        }
      })      

    }
  isLoggedIn(): boolean {
    return this.authService.instance.getActiveAccount() != null
  }

  login() {
    this.authService.loginPopup()
      .subscribe((response: AuthenticationResult) => {
        this.authService.instance.setActiveAccount(response.account);
      });
  }
    callProfile () {
      this.http.get("https://orgb8d5a472.crm17.dynamics.com/api/data/v9.1").subscribe( resp  => {
        this.apiResponse = JSON.stringify(resp)
      })
    }

and this is the app.component.html

<button  *ngIf="!isLoggedIn()" (click)="login()">Login</button>
<button  (click)="callProfile()">get</button>

Can anyone tell what's the problem here and why I can't access the token generated and use it in an API? and why i'm getting 'GET https://xxxxxxxxx.xxxxxxxx.dynamics.com/api/data/v9.1 401' whenever i press the "Get" button?

Omar Bouattour
  • 41
  • 2
  • 9

2 Answers2

0

Possibly a silly question, but you didn’t say; Does you app Id have the user impersonation api permission?

MattB
  • 171
  • 4
0

I managed to get mine working by removing the 'user.read' scope and changing the 'user_impersonation' one to 'https://xxxxxxxxxxx.xxxxxxxxxxxx.dynamics.com/user_impersonation'. And on the map item I dropped the 'user_impersonation' part on the URL so that it becomes the following: ['https://xxxxxxxxxxx.xxxxxxxxxxxx.dynamics.com', ['user_impersonation']]

I also changed the API URL to be version 9.2, but it worked on both 9.1 and 9.2.

Bob
  • 1
  • 1