MSAL Angular：如何从 JWT 令牌中检索用户角色？

Posted 2023-03-10

【中文标题】MSAL Angular：如何从 JWT 令牌中检索用户角色？

【英文标题】：MSAL Angular: How can I retrieve the user role from the JWT token?

【发布时间】：2020-09-12 04:48:39

【问题描述】：

我知道有类似的问题，但没有一个能解决我的问题。我有一个针对 Azure AD 的带有 JWT 不记名令牌身份验证的 ASP.net Core API。现在，我还有一个使用 MSAL 库的 Angular SPA，它从这个 API 中检索数据。对于授权，我使用在 Azure AD 中向应用程序注册的用户组。这部分就像一个魅力。

在这个用户组中，我有不同的用户角色，它们也在标头的 Bearer token 字段中正确传输，因此 API 的某些部分只能由该组中具有管理员角色的用户访问。这也很有效。

现在在 Angular 方面，我想显示一些对用户不可见的管理员用户的链接。这些是从 API 部分检索数据的链接，仅适用于管理员用户。要隐藏/显示这些链接，我需要知道用户是否在管理员组中。从标头解码 Bearer 令牌时，它会显示我在解码令牌中的应用清单中配置的用户组和角色：

[...],
 "given_name": "JohnDoe",
  "groups": [
    "abcdef12-3456-7890-abcd-ef0123456789"
  ],
[...],
  "roles": [
    "MyAdminRole"
  ],
[...]

现在，当我尝试从我的 Angular 应用程序访问令牌时，我会得到用户所在的所有组的列表，并且绝对没有任何角色。在我的组件中，我使用这一行来访问令牌：

import  JwtHelperService  from '@auth0/angular-jwt';
import  MsalService  from '@azure/msal-angular';

constructor(private jwtHelper: JwtHelperService, private authService: MsalService, http: HttpClient, @Inject('BASE_URL') baseUrl: string)
  
    let token: string = localStorage.getItem("msal.idtoken");
    console.log(this.jwtHelper.decodeToken(token));
  

现在这是控制台上记录的内容（已删除 id）：

aud: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", iss: "https://login.microsoftonline.com/8xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/v2.0", iat: 1590411759, nbf: 1590411759, exp: 1590415659, …
aio: "xxxxxxxxxxxxxxxxxxxN"
aud: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
exp: 1590415659
groups: Array(5)
0: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
1: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
2: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
3: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
4: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
length: 5
__proto__: Array(0)
iat: 1590411759
iss: "https://login.microsoftonline.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/v2.0"
name: "John Doe"
nbf: 1590411759
nonce: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
oid: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
preferred_username: "[e-mail]"
sub: "xxxxxxxxxxxxx"
tid: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
uti: "xxxxxxxxxxxxx"
ver: "2.0"

所以这是我的问题：如何将请求标头的不记名令牌中明显存在的组名放入 Angular？ 其他有趣的令牌从何而来，不是以这种方式创建的在应用清单中列出？

请注意：我没有在前端使用用户组来授予或阻止访问，这是在服务器端完成的，并且运行良好。它只是在视觉上对普通用户隐藏一些管理员链接，以免混淆他们。如果普通用户可以访问这些功能，它们将无法工作，因为 API 会以 401 响应。

【问题讨论】：

您有两个应用程序注册 API 和 UI 还是一个注册？

好吧，我错误地认为它是一个，实际上它是两个。这解决了这个问题，感谢您指出我正确的方向！

【参考方案1】：

我错误地认为前端和 API 都只有一个应用注册，实际上是两个。未在前端应用程序的 Azure 应用清单中正确配置令牌。感谢 juunas 指出这一点！