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

问题

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?

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

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/51671800/cannot-get-username-given-name-when-using-angular-oauth2-oidc-and-identity-ser

标签

identityserver4

angular-oauth2-oidc