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?

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. — Setrákus Ra, Aug 08 '18 at 05:50
I figured it out. I fixed my issue by setting the value of "AlwaysIncludeuserClaimsInIdToken" to true in the client settings — Setrákus Ra, Aug 08 '18 at 09:26
@SetrákusRa Nice, good to hear you found a solution. Perhaps post it as an answers so others can easily spot it? — Jeroen, Aug 08 '18 at 09:37
Jeroen, thanks for that reminder! I posted it in the answers section. Hopefully, this can help others who may encounter the same issue. — Setrákus Ra, Aug 08 '18 at 12:18

score 2 · Accepted Answer · edited Jun 01 '20 at 11:16

2

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.

edited Jun 01 '20 at 11:16

d_f

4,599
2
23
34

answered Aug 08 '18 at 12:14

Setrákus Ra

255
1
8

When I added the line to my config and ran the solution again, it worked and I given_name is now populated! Thanks. – Røye Aug 23 '18 at 07:25
1

I am trying to find 'AlwaysIncludeuserClaimsInIdToken' but cannot seem to find it. Any ideas? Thanks – L1ghtk3ira Mar 01 '20 at 18:55
3

@Setrákus Ra - where can i add/configure this "AlwaysIncludeuserClaimsInIdToken=true" settings in above shared code..? – Siddharth Shah Mar 05 '20 at 07:27
5

@Setrákus Ra - Can you please share how can i set client..? – Siddharth Shah Mar 05 '20 at 07:32
1

Would also like to get know where the client settings are? – Alexander Plickat Mar 27 '20 at 16:44

score 1 · Answer 2 · answered Nov 06 '20 at 12:52

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

score 0 · Answer 3 · answered Jul 23 '20 at 01:53

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

score 0 · Answer 4 · answered Feb 08 '22 at 08:03

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

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

4 Answers4

Linked