msal в React SPA - использовать токен доступа, полученный от AcquireTokenRedirect

Question

У меня React SPA, и я использую msal для аутентификации пользователей Microsoft с помощью loginRedirect. После входа в систему я получаю токен доступа без вывода сообщений, используя acquTokenSilent для вызова веб-API. При сбое получения токена доступа и необходимости взаимодействия я использую acquTokenRedirect.

Когда я использую acquTokenRedirect, я вижу следующее: 1. Пользователь перенаправлен на login.microsoftonline.com. 2. Ответ 302 возвращается с заголовком Location, который содержит URL перенаправления + токен доступа. 3. Запрос GET на мой URL перенаправления - мой обратный вызов вызывается. 4. Еще одно перенаправление в мой корень приложения.

При последнем перенаправлении мое приложение обслуживается снова, и я теряю токен доступа из состояния приложения. Кроме того, я потерял возможность перенаправлять пользователя на определенный маршрут.

Получение токена доступа:

getAccessToken = async () => {
    let accessTokenRequest = { scopes: [...]
    };
    try {
      var accessTokenResponse = await 
      this.authAgent.acquireTokenSilent(accessTokenRequest);
      return accessTokenResponse.accessToken;
    } catch (error) {
      const errorCode = error.name;
      if (errorCode === "consent_required" || errorCode === "interaction_required") {
        await this.authAgent.acquireTokenRedirect(accessTokenRequest);
      }

      throw error;
    }
  };

Answer 1

Чтобы избежать дополнительного перенаправления, мне нужно было установить для параметра «navigateToLoginRequestUrl» в конфигурации Auth значение false. Это решает мою проблему.

Answer 2

Вы также можете приобрести токен с помощью всплывающего окна.Вот различия между acquireTokenPopup и acquireTokenRedirect методами.

Когда вы используете метод acquireTokenPopup, обратитесь к этому примеру.

const accessTokenRequest = {
    scopes: ["user.read"]
}

userAgentApplication.acquireTokenSilent(accessTokenRequest).then(function(accessTokenResponse) {
    // Acquire token silent success
    // call API with token
    let accessToken = accessTokenResponse.accessToken;
}).catch(function (error) {
    //Acquire token silent failure, send an interactive request.
    if (error.errorMessage.indexOf("interaction_required") !== -1) {
        userAgentApplication.acquireTokenPopup(accessTokenRequest).then(function(accessTokenResponse) {
            // Acquire token interactive success
        }).catch(function(error) {
            // Acquire token interactive failure
            console.log(error);
        });
    }
    console.log(error);
});

Когда выиспользуйте метод acquireTokenRedirect, вам необходимо зарегистрировать обратный вызов перенаправления.

function authCallback(error, response) {
    //handle redirect response
}

userAgentApplication.handleRedirectCallback(authCallback);

const accessTokenRequest: AuthenticationParameters = {
    scopes: ["user.read"]
}

userAgentApplication.acquireTokenSilent(accessTokenRequest).then(function(accessTokenResponse) {
    // Acquire token silent success
    // call API with token
    let accessToken = accessTokenResponse.accessToken;
}).catch(function (error) {
    //Acquire token silent failure, send an interactive request.
    console.log(error);
    if (error.errorMessage.indexOf("interaction_required") !== -1) {
        userAgentApplication.acquireTokenRedirect(accessTokenRequest);
    }
});