使用angular-oauth2-oidc和Identity Server 4

Question

我正在遵循angular-oauth2-oidc文档中的隐式工作流程示例。

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

但是，我注意到“ given_name”声明为空，因此，用户名未显示在登录页面上。具体来说，示例代码中的以下方法似乎返回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

对于那些遇到相同问题的人。您可以通过在客户端设置中添加此行AlwaysIncludeuserClaimsInIdToken=true来解决此问题。

Answer 2

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

正确的实现是使用“ UserInfo”端点，然后使用方法“ loadUserProfile ”：

示例：

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

Answer 3

OauthService.getIdentityClaims()是一个承诺，拥有UserInfo，您可以使用大括号提取名称字段，因此您的功能应为：

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