MSAL/ Microsoft Authorization problem with Angular: How to validate id_token?

Question

I'm trying to make an authorization through microsoft using MSAL Angular library. I configured environment in MS Azure, wrote a code...After logging in I get id_token, but I cannot validate it on graph.microsoft.com/v1.0/me as a Bearer. I get "InvalidAuthenticationToken" code. I searched through all stack and I still can't figure it out, even though there are some familiar threads. I want to make sure token is valid and get an email of user from response. This is my code:

@Injectable()
export class MsalService {

  B2CTodoAccessTokenKey = 'b2c.access.token';

  tenantConfig = {
    tenant: 'censored.onmicrosoft.com',
    // Replace this with your client id
    clientID: 'censored',
    signInPolicy: 'B2C_1_signinsignup',
    signUpPolicy: 'B2C_1_signin',
    redirectUri: 'http://localhost:4200/auth/microsoft',
    b2cScopes: 
['https://censored.onmicrosoft.com/api/user_impersonation'],
    resource: 'https://graph.microsoft.com'
  };

  /*
   * B2C SignIn SignUp Policy Configuration
   */
  clientApplication = new Msal.UserAgentApplication(
    this.tenantConfig.clientID, this.authority,
    function(errorDesc: any, token: any, error: any, tokenType: any) {
    },
    {
      redirectUri: this.tenantConfig.redirectUri,
      navigateToLoginRequestUrl: false
    }
  );

  public login(): void {
    this.clientApplication.authority = 
'https://login.microsoftonline.com/common';
    this.authenticate();
  }

  public authenticate(): void {
    var _this = this;



 this.clientApplication.loginPopup(this.tenantConfig.b2cScopes)
.then(function(idToken: any) {

_this.clientApplication.acquireTokenSilent(
_this.tenantConfig.b2cScopes)
    .then(
        function(accessToken: any) {
          _this.saveAccessTokenToCache(accessToken);
        }, function(error: any) {
          _this.clientApplication.acquireTokenPopup(
_this.tenantConfig.b2cScopes).then(
            function(accessToken: any) {
              _this.saveAccessTokenToCache(accessToken);
            }, function(error: any) {
              console.log('error: ', error);
            });
        });
    }, function(error: any) {
      console.log('error: ', error);
    });
  }

I'm not familiar with this MSAL library but I think you need the access_token to make the call to the graph api not the id_token. In python MSAL at least, both are returned and MSAL takes care of validation and decoding of the id_token. You shouldn't really need to care about the access_token as it's intended for the graph resource, not your app. — user3366016

Marilee Turscak - MSFT Marilee Turscak - MSFT · Accepted Answer · 2019-07-16T21:49:42

First, you seem to be missing the response_type parameter, which is required for the Authorization code grant flow that you are using.

Also, you can't use the token directly but need to exchange the code you get from the response url into the token.

 public static AuthenticationResult ExchangeCodeForToken(string InTenantName, string InUserObjId, string InRedirectUri, string InApplicationAzureClientID, string InApplicationAzureClientAppKey)
  {
            Check.Require(!string.IsNullOrEmpty(InTenantName), "InTenantName must be provided");
            Check.Require(!string.IsNullOrEmpty(InUserObjId), "InUserObjId must be provided");

            if (CanCompleteSignIn) //redirect from sign-in
            {
                var clientCredential = new ClientCredential(InApplicationAzureClientID, InApplicationAzureClientAppKey);
                var authContext = new AuthenticationContext(Globals.GetLoginAuthority(InTenantName), (TokenCache)new ADALTokenCache(InUserObjId)); //Login Authority is https://login.microsoftonline.com/TenantName
                return authContext.AcquireTokenByAuthorizationCode(VerificationCode, new Uri(InRedirectUri), clientCredential, Globals.AZURE_GRAPH_API_RESOURCE_ID); //RESOURCE_ID is "https://graph.microsoft.com/"
            }

            return null; 
   }

See related post.

MSAL/ Microsoft Authorization problem with Angular: How to validate id_token?

1 Answers