Valid access_token but no identity

[stepsma]

Hi Manfred,

I am currently trying to setup a Microsoft AAD authentication with OIDC component. I am doing trylogin() first with implicitFlow().

I am able to get valid access_token (with expiration) and use it to service API, however I am NOT able to get id token and identity claim. Both getIdentityClaims() function and getIdToken() function returns null. Could you please help take a look, whether this is normal? Thank you so much.

Following is my configuration.

this.oauthService.loginUrl = 'https://login.microsoftonline.com/"tennant_id"/oauth2/authorize';
this.oauthService.clientId = 'client AAD ID';
this.oauthService.resource = 'service URL';
this.oauthService.logoutUrl = 'https://login.microsoftonline.com/tennant_id/oauth2/logout';
this.oauthService.redirectUri = window.location.origin + '/';
this.oauthService.scope = 'openid';
this.oauthService.oidc = false;
this.oauthService.setStorage(sessionStorage);

[Gimly]

Do you have any error in your console? I think the issue you might have is that 1) you're missing the issuer in the configuration and 2) you're missing the jwks as well, which you have to setup manually.

All this is because Azure AD B2C doesn't support CORS and can't get the information straight from .well-known/openid-configuration so you have to do it manually.

Head to https://login.microsoftonline.com/"tennant_id"/v2.0/.well-known/openid-configuration and, in that document :

• get the issuer property that you'll want to add to this.oauthService.issuer.
• get the jwks_uri property, follow the link in your browser and create a json object from that JSON file that you'll put in this.oauthService.jwks property.

After that, you should be good to go and it should (hopefully) work. I had success with that, but using Azure AD B2C, but it should be the same with "classic" AAD.

[stepsma]

Hi @Gimly

Thank you for the replay. I do see the following error when I set this.oauthService.oidc = true

angular-oauth2-oidc.umd.js:1502 Error validating tokens
angular-oauth2-oidc.umd.js:1503 Wrong issuer: https://sts.windows.net/"tennant_id"/

Changing this.oauthService.oidc = false can let the error gone.

I tried for a day with your suggestion, but no luck. this.oauthService.issuer property is straightforward to assign. But for this.oauthService.jwks property, what I end up with is creating two new classes as below, and instantiate it with the data retrieved from jwks_uri. Then I passed the JWKArrays object to this.oauthService.jwks property. And I still Cannot get the identity claims. Is there anything wrong with my creating JSON object? Thank you so much.

export class JWKObject {
   kty: string;
   use: string;
   kid: string;
   x5t: string;
   n: string;
   e: string;
   x5c: Array<string>;
   issuer: string;
}

export class JWKArrays {
  keys: Array<JWKObject>;
  constructor(_keys: Array<JWKObject>) {
    this.keys = _keys;
  }
}

[Gimly]

I don't have access to my code right now, but if I recall correctly, what I did was doing something like:

this.oauthService.jwks = {
 keys: [
     {
        kid: "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk",
        nbf: 1493763266,
        use: "sig",
        kty: "RSA",
        e: "AQAB",
        n: "tVKUtcx_n9rt5afY_2WFNvU6PlFMggCatsZ3l4RjKxH0jgdLq6CScb0P3ZGXYbPzXvmmLiWZizpb-h0qup5jznOvOr-Dhw9908584BSgC83YacjWNqEK3urxhyE2jWjwRm2N95WGgb5mzE5XmZIvkvyXnn7X8dvgFPF5QwIngGsDG8LyHuJWlaDhr_EPLMW4wHvH0zZCuRMARIJmmqiMy3VD4ftq4nS5s8vJL0pVSrkuNojtokp84AtkADCDU_BUhrc2sIgfnvZ03koCQRoZmWiHu86SuJZYkDFstVTVSR0hiXudFlfQ2rOhPlpObmku68lXw-7V-P7jwrQRFfQVXw"}
]}

You can try this and if still doesn't work for you, tell me, I'll check my code and give you more info.

[stepsma]

Sorry, still no luck. I don't see any error message coming from loading jwks object.
Could you please help take a look and give me more info, thanks!

Here is my declaration:

this.oauthService.issuer = 'https://login.microsoftonline.com/"tennant_id"/v2.0';
this.oauthService.jwks = {
        "keys": [
          {
            "kty": "RSA",
            "use": "sig",
            "kid": "kid_code_1",
            "x5t": "x5t_code_1 same as kid_code_1",
            "n": "n_code_1",
            "e": "AQAB",
            "x5c": ["x5c_code_1"],
             "issuer": "https://login.microsoftonline.com/"tennand_id"/v2.0"
          },
          {
            "kty": "RSA",
            "use": "sig",
            "kid": "kid_code_2",
            "x5t": "x5t_code_2 same as kid_code_2",
            "n": "n_code_2",
            "e": "AQAB",
            "x5c": [ "x5c_code_2"],
             "issuer": "https://login.microsoftonline.com/"tennand_id"/v2.0"
          },
          {
            "kty": "RSA",
            "use": "sig",
            "kid": "kid_code_3",
            "x5t": "x5t_code_3 same as kid_code_3",
            "n": "n_code_3",
            "e": "AQAB",
            "x5c": ["x5c_code_3"],
            "issuer": "https://login.microsoftonline.com/"tennand_id"/v2.0"
          }
        ]
      };

[Gimly]

@stepsma Could you try without the quotes in the properties names?

{ 
   keys: 
    [{
       kty: "RSA", 
        ...
     }]
}

[stepsma]

Thanks a lot, let me give a further try on this.

[manfredsteyer]

I'm late to this party. sorry. Did it work?

[stepsma]

Thank you for the help. It still didn't work for me actually, and I later switched to ADAL. Let me explore little more using OIDC, and close two of my issues for now, thanks.

[stuartjdavies]

@manfredsteyer, @stepsma I am having the same issue. Any luck with this. Any know resolution. I am using Angular 5.

[stuartjdavies]

@stepsmaI I tried this library https://blogs.msdn.microsoft.com/premier_developer/2017/04/26/using-adal-with-angular2/ but with angular 5 and no luck with this either. Did you find another library that works for you.

[Gimly]

@stuartjdavies I got it to work with MSAL.js https://github.com/AzureAD/microsoft-authentication-library-for-js. You can check out this repo for a working sample https://github.com/Gimly/NetCoreAngularAzureB2CMsal.

[manfredsteyer]

I guess I will need some time to provide an example using Azure AD as it seems to provide some challenges ...

[grzegorz-skowronski]

For what it's worth I managed to get it to work with Azure. It was a massive PITA though. I was already using angular-oauth2-oidc for Okta and didn't want to use another library like ADAL.

@stepsma you have to have oidc = true to get identity claims. If you switch it off, angular-oauth2-oidc will not send the request for id_token!!!!!!!

and

this.oauthService.jwks = { "keys": [ { "kty": "RSA", "use": "sig", .....whatever };

Hope it helps.

I am actually thinking this might be worth writing an article/doc about it....

[marekdano]

@Greg5ki Have you written some article about using angular-oauth2-oidc with AAD authentication yet?. It helps me if you did. I'm thinking to use this library for authentication of our app. As you mentioned I also want to use the same library for Okta and AAD.
Thanks!!!

[chlegou]

For what it's worth I managed to get it to work with Azure. It was a massive PITA though. I was already using angular-oauth2-oidc for Okta and didn't want to use another library like ADAL.

@stepsma you have to have oidc = true to get identity claims. If you switch it off, angular-oauth2-oidc will not send the request for id_token!!!!!!!

and

this.oauthService.jwks = { "keys": [ { "kty": "RSA", "use": "sig", .....whatever };

Hope it helps.

I am actually thinking this might be worth writing an article/doc about it....

@mraible @Greg5ki i have tried that, but didn't work, it always makes the /certs call, and returning the cors problem.