Невозможно связать «это» с функцией обратного вызова AcquireTokenSilent - Azure AD MSAL & ReactJS

Question

Я настраиваю аутентификацию в приложении ReactJS, используя AzureAD MSAL .Я могу получить id_token и access_token.Но пока я получаю токен доступа, я не могу сослаться на локальные переменные через это ключевое слово.Я пытался привязать «this» к функции обратного вызова, но это приводит к другим проблемам.

Я реализую все функции входа в систему как класс.

import { UserAgentApplication } from "msal";

export default class AuthService {
  constructor() {
    this.applicationConfig = {
      clientID: "<clientId>",
      authority: "<azureADTenantUrl>"
    };

    this.scopes = [
      "openid",
      "<Other scopes>"
    ];

    this.client = new UserAgentApplication(
      this.applicationConfig.clientID,
      this.applicationConfig.authority,
      this.authCallback,
      {
        redirectUri: "http://localhost:3000/"
      }
    );
  }

  login = () => {
    this.client.loginRedirect(this.scopes);
  };

  logout = () => {
    this.client.logout();
  };

  authCallback = (erroDesc, token, error, tokenType) => {
    if (tokenType == "id_token") {
       this.acquireTokenSilent(this.scopes).then(
         function(accessToken) {
           console.log(accessToken);
         },
         function(error) {
           console.log(error);
         }
       );
    }
  };
}

(это нефактическое сообщение об ошибке, но понятное описание)

this.scopes не определено, поскольку 'this' находится в области UserAgentApplication.

, чтобы избежать этого, я попытался связатьэто к функции обратного вызова.Я добавил следующее утверждение в конструктор.

this.authCallback = this.authCallback.bind(this);

это приводит к другой ошибке.

(это не фактическое сообщение об ошибке, а понятное описание)

this.acquireTokenSilent не определено, и у 'this' нет определения для клиента, на который можно ссылаться с помощью this.client.acquireTokenSilent

Поэтому я жестко закодировал области действия в исходном коде и былудалось получить токен доступа, но опять та же проблема при перезвоне.На этот раз «this» является нулевым в обратном вызове.

Я попытался переместить authCallback в компонент реагирования и передать его в качестве параметра службе, но это также имеет проблемы такого же рода.

Любая помощь в том, как правильно это настроить, очень ценится.спасибо.

Answer 1

Попробуйте эту замену для authCallback.Это не решает проблему полностью, но может помочь вам избежать угона UserAgentApplication объекта «this».

  authCallback = (erroDesc, token, error, tokenType) => {

    const client = window.client as Msal.UserAgentApplication;

    if (tokenType == "id_token") {
       client.acquireTokenSilent(["openid"]).then(

         function(accessToken) {
           console.log(accessToken);
         },
         function(error) {
           console.log(error);
         }
       );
    }
  };

В качестве альтернативы используйте функцию loginPopup вместо loginRedirect, поскольку у него нет проблемы «this»это все еще существует в текущем MSAL v0.2.3.