Question

我有一个React SPA，我正在使用msal使用loginRedirect对Microsoft用户进行身份验证。登录后，我正在使用acquireTokenSilent来静默获取访问令牌，以调用Web API。当获取访问令牌失败并且需要进行交互时，我正在使用acquireTokenRedirect。

当我使用acquireTokenRedirect时，看到的是： 1.将用户重定向到login.microsoftonline.com。 2.返回带有位置标头的302响应，该标头包含重定向URL +访问令牌。 3.对我的重定向URL的GET请求-调用我的回调。 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

为避免额外的重定向，我需要做的是将Auth config中的“ navigateToLoginRequestUrl”参数设置为false。这解决了我的问题。

Answer 2

您还可以通过弹出窗口获取令牌。这是acquireTokenPopup和acquireTokenRedirect方法之间的differences。

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

React SPA中的msal-使用从AcquireTokenRedirect收到的访问令牌

2 个答案: