Angular-oauth2-oidc: Valid access_token but no identity

Created on 19 Oct 2017 · 15Comments · Source: manfredsteyer/angular-oauth2-oidc

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);

Source

stepsma

Most helpful comment

@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!!!

marekdano on 12 Jul 2018

👍2

All 15 comments

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.

Gimly on 20 Oct 2017

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;
  }
}

stepsma on 21 Oct 2017

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.

Gimly on 23 Oct 2017

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"
          }
        ]
      };

stepsma on 23 Oct 2017

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

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

Gimly on 25 Oct 2017

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

stepsma on 27 Oct 2017

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

manfredsteyer on 17 Nov 2017

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.

stepsma on 17 Nov 2017

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

stuartjdavies on 29 Nov 2017

😕1

@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.

stuartjdavies on 29 Nov 2017

@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.

Gimly on 29 Nov 2017

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

manfredsteyer on 13 Dec 2017

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....

grzegorz-skowronski on 20 Jun 2018

👍2

marekdano on 12 Jul 2018

👍2

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.