Cannot get Username / given_name when using angular-oauth2-oidc and Identity Server 4

Question

I am following the Implicit Workflow example from the angular-oauth2-oidc documentation.

Everything works well in my Angular app, and I can login (during which I am redirected to Identity Server), get my token and use this token to access my Web Api.

However, I have noticed that the "given_name" claim is null, and therefore, the username is not displayed on the login page. Specifically, the following method from the sample code appears to return null:

public get name() {
    let claims = this.oauthService.getIdentityClaims();
    if (!claims) return null;
    return claims.given_name;
}

I thought perhaps this was a problem with permissions, but my scope is set to:

scope: 'openid profile email api1',

Any idea what I need to change to get this "given_name" claim?

Deviate

Were you manage to solve this? I encountered the same issue and I'm not sure what I did wrong after following the steps in angular-oauth2-oidc. The claims.given_name is always null even after I signed-in in to the identity server. – Tilefish

I figured it out. I fixed my issue by setting the value of "AlwaysIncludeuserClaimsInIdToken" to true in the client settings – Tilefish

@SetrákusRa Nice, good to hear you found a solution. Perhaps post it as an answers so others can easily spot it? – Madelle

Jeroen, thanks for that reminder! I posted it in the answers section. Hopefully, this can help others who may encounter the same issue. – Tilefish

Answer 1

For those who encountered the same issue. You can fix it by adding this line AlwaysIncludeuserClaimsInIdToken=true in the client settings on identity provider side.

Chalk

When I added the line to my config and ran the solution again, it worked and I given_name is now populated! Thanks. – Planimetry

I am trying to find 'AlwaysIncludeuserClaimsInIdToken' but cannot seem to find it. Any ideas? Thanks – Sempstress

@Setrákus Ra - where can i add/configure this "AlwaysIncludeuserClaimsInIdToken=true" settings in above shared code..? – Sideslip

@Setrákus Ra - Can you please share how can i set client..? – Sideslip

Would also like to get know where the client settings are? – Pneuma

Answer 2

OauthService.getIdentityClaims() is a Promise and holds UserInfo you can extract the name field with braces, so your function should be:

public get name() {
    let claims = this.oauthService.getIdentityClaims();
    if (!claims) return null;
    return claims['name'];
}

Boron

Answer 3

The answer marked as "Best answer" is not correct. Get the user claims in the 'idtoken' will cause that the 'idtoken' be very big and then you may exceed the size limit.

The correct implementation is to use the 'UserInfo' Endpoint and then use the method 'loadUserProfile':

Example:

getUserClaims() {
    const user = this.oauthService.loadUserProfile();
    console.log(user, user);
}

Kan

Answer 4

I had the same issue, in my case with an error displayed on the browser console, saying that Request was blocked by Security Policy. even having the AllowAnyOrigin() method called in startup, I lacked to get the header allowed. So when in my angular aap i call the loadUserProfile method via the token_received event, it sends some headers that were not allowed. Finaly this fix my issue: app.UseCors(options => options.AllowAnyOrigin().AllowAnyHeader()); Don't forget calling that before usemvc

Triny