使用 angular-oauth2-oidc 和 Identity Server 4 时无法获取用户名/given_name

Question

我正在关注 angular-oauth2-oidc 文档中的隐式工作流示例。

我的 Angular 应用程序一切正常，我可以登录（在此期间我被重定向到 Identity Server），获取我的令牌并使用此令牌访问我的 Web Api。

但是，我注意到 "given_name" 声明为空，因此用户名未显示在登录页面上。具体来说，示例代码中的以下方法似乎 return null:

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

我认为这可能是权限问题，但我的范围设置为：

scope: 'openid profile email api1',

知道我需要更改什么才能获得此 "given_name" 声明吗？

Answer 1

对于遇到同样问题的人。您可以通过在身份提供者端的 client settings 中添加此行 AlwaysIncludeuserClaimsInIdToken=true 来修复它。

Answer 2

标记为“最佳答案”的答案不正确。在 'idtoken' 中获取用户声明会导致 'idtoken' 非常大，然后您可能会超过大小限制。

正确的实现是使用 'UserInfo' 端点，然后使用方法 'loadUserProfile':

示例：

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

Answer 3

OauthService.getIdentityClaims() 是一个 Promise 并持有 UserInfo 你可以用大括号提取名称字段，所以你的函数应该是：

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

Answer 4

我有同样的问题，在我的情况下，浏览器控制台上显示错误，说请求被安全策略阻止。即使在启动时调用了 AllowAnyOrigin() 方法，我也无法获得 header 允许。因此，当在我的 angular aap 中时，我通过 token_received 事件，它发送了一些不允许的 header。最后这解决了我的问题： app.UseCors(选项 => options.AllowAnyOrigin().AllowAnyHeader()); 不要忘记在使用 mvc

之前调用它

使用 angular-oauth2-oidc 和 Identity Server 4 时无法获取用户名/given_name

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

identityserver4

angular-oauth2-oidc