Angular Azure AD - MsalModule. Get the Access Token after authentication[Answered] RSS

• • Reply
  comicrage

  Member

  46 Points

  283 Posts

  Angular Azure AD - MsalModule. Get the Access Token after authentication

  Jul 26, 2019 08:07 PM|comicrage|LINK

  HI,

  I just install MsalModule and followed the steps in https://www.npmjs.com/package/@azure/msal-angular.

  In my app.module.ts, I specified the MsalModule in the import section as followed

  MsalModule.forRoot({
  clientID: myClientId,
  authority: myAuthority,
  redirectUri: myReDirectUri,
  validateAuthority: true,
  cacheLocation: 'localstorage',
  postLogoutRedirectUri: myPostLogoutRedirectUri,
  
  popUp: false,
  level: LogLevel.Verbose,
  piiLoggingEnabled: true,
  })

  
  I also add the broadcast as followed

  this.loginSuccessSubscription = this.broadCastService.subscribe("msal:loginSuccess", (payload) => {
  
  alert("Login Success");
  });
  
  this.loginTokenSuccessSubscription = this.broadCastService.subscribe("msal:loginTokenSuccess", (payload) => {
  
  
  alert("Acquired Token");
  })

  
  After successfully authenticating to Azure, it redirect back to the web client. I hit F12 and see the id token but not the access token. I verified this by clicking F12, Network, Headers and don't see the access token.

  Visual Studio Code breaks on broadcast successful login but never on aquired token.

  How do I specified MsalServer to return the access token after authentication?

  Thanks.

• • Reply
  Nan Yu

  All-Star

  18815 Points

  3831 Posts

  Re: Angular Azure AD - MsalModule. Get the Access Token after authentication

  Jul 29, 2019 02:30 AM|Nan Yu|LINK

  Hi comicrage ,

  As documented here : https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular 

  MSAL Angular allows you to add an Http interceptor (MsalInterceptor) in your app.module.ts as follows. MsalInterceptor will obtain tokens and add them to all your Http requests in API calls except the API endpoints listed as unprotectedResources.

  providers: [ ProductService, {
          provide: HTTP_INTERCEPTORS,
          useClass: MsalInterceptor,
          multi: true
      }
     ],

  Using MsalInterceptor is optional and you can write your own interceptor if you choose to. Alternatively, you can also explicitly acquire tokens using the acquireToken APIs.

  You can follow the code sample : 

  https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/34892e8d44d493df9754bc5692caebbccb451be3/lib/msal-angular/samples/MSALAngularDemoApp

  Set the `protectedResourceMap` and config the providers :

  https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/34892e8d44d493df9754bc5692caebbccb451be3/lib/msal-angular/samples/MSALAngularDemoApp/src/app/app.module.ts#L57 

  Best Regards,

  Nan Yu

• • Reply
  comicrage

  Member

  46 Points

  283 Posts

  Re: Angular Azure AD - MsalModule. Get the Access Token after authentication

  Jul 29, 2019 02:45 PM|comicrage|LINK

  Thanks Nan for the help.