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?

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.

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