MSAL Angular: Как мне получить роль пользователя из токена JWT? - PullRequest
Новая
       56

MSAL Angular: Как мне получить роль пользователя из токена JWT?

0 голосов
/ 25 мая 2020

Я понимаю, что есть похожие вопросы, но ни один из них не решил мою проблему. У меня есть ASP. net Core API с аутентификацией токена-носителя JWT против Azure AD. Теперь у меня также есть Angular SPA, использующий библиотеку MSAL, которая извлекает данные из этого API. Для авторизации я использую группы пользователей, которые зарегистрированы в приложении в Azure AD. Эта часть работает как шарм.

В этой группе пользователей у меня есть разные роли пользователей, которые также правильно передаются в поле токена-носителя в заголовке, поэтому некоторые части API могут быть доступны только пользователям в этом группа с ролью администратора. Это также отлично работает.

Теперь на стороне Angular я хочу отобразить некоторые ссылки на пользователей Admin, которые невидимы для пользователей. Это ссылки, извлекающие данные из части API, которая работает только для пользователей с правами администратора. Чтобы скрыть / показать эти ссылки, мне нужно знать, входит ли пользователь в группу администратора. При декодировании токена Bearer из заголовка он показывает мне группы пользователей и роли, которые я настроил в манифесте приложения в декодированном токене: 

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

Теперь, когда я пытаюсь получить доступ к токену из моего Angular app, я получаю список всех групп, в которых находится пользователь, и абсолютно без ролей. В моем компоненте я использую эту строку для доступа к токену: 

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

Теперь это то, что регистрируется на консоли (удаленные идентификаторы): 

{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: "john@doe.com"
sub: "xxxxxxxxxxxxx"
tid: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
uti: "xxxxxxxxxxxxx"
ver: "2.0"

Итак, это мой вопрос: Как мне получить имя группы, которое явно находится в токене носителя заголовка запроса, в Angular? И откуда взялся этот другой забавный токен, который не создан способом, изложенным в манифесте приложения?

Обратите внимание: я не использую группу пользователей для предоставления или блокировки доступа во внешнем интерфейсе, это делается на стороне сервера и отлично работает. Это просто визуально скрыть некоторые ссылки администратора от обычных пользователей, чтобы не запутать их. Если бы у обычного пользователя был доступ к этим функциям, они бы не работали, поскольку API отвечает 401.

1 Ответ

0 голосов
/ 26 мая 2020

Я ошибочно предположил, что была только одна регистрация приложения для внешнего интерфейса и API, на самом деле было две. Маркер не был правильно настроен в манифесте Azure приложения внешнего интерфейса. Спасибо juunas за указание на это!

...