Пользователь MSAL заявляет об ошибках декодирования специальных символов

Question

Я получаю неправильные значения при получении пользовательских претензий с акцентами, например, "é", используя MSAL с Angular.

Пример: Ожидаемая стоимость претензии: Maxime Gélinas; Полученное значение претензии: Maxime Gélinas

Вот мой код:

const idToken = this.msalService.getUser().idToken;
const userName = idToken.name;

Когда я копирую токен ID из локального хранилища и декодирую его с помощью jwt.io, все нормально, поэтому ошибка не на стороне сервера msal проблема, а не msal- angular проблема.

Я пропустил какую-то скрытую конфигурацию или это проблема библиотеки?

Answer 1

Получите @azure/msal-angular используйте старую версию msal, то есть 0.2.2, в то время как последняя версия 1.2.1. Мы переключились на msal вместо @azure/msal-angular, и это устранило проблему.

В противном случае вы можете использовать следующую пользовательскую функцию для декодирования заявок, как указано @PrateekKumarDalbehera:

  // Since claims are not decoded properly while using `this.msalService.getUser().idToken`,
  // This function get the ID token from cache and decode it manually.
  // We are waiting for a better answer on Stack Overflow: https://stackoverflow.com/q/59688501/5960632.
  private getIdToken() {
    const encodedToken = this.msalService.getCacheStorage().getItem(Constants.idTokenKey);
    const base64Payload = encodedToken.split('.')[1].replace('-', '+').replace('_', '/');
    const jsonPayload = decodeURIComponent(
      Array.prototype.map.call(atob(base64Payload), (c: string) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''),
    );
    return JSON.parse(jsonPayload);
  }