时间戳

首页 > 解决方案 > 调用 HandleRedirectPromise 后 MSAL 已验证/未验证的模板组件不起作用

reactjs - 调用 HandleRedirectPromise 后 MSAL 已验证/未验证的模板组件不起作用

问题描述

我有一个 React 应用程序，我在其中使用 msal 库通过 Azure B2C 进行身份验证，并且我正在使用登录重定向流。直到最近，我才知道登录后令牌存储在会话中，并且我根据默认的复杂密钥将其取出。我最近了解到，您可以调用 msalInstance.HandleRedirectPromise().then(...) 在重定向后实际取回令牌并自行存储。但是，在添加调用后，Authenticated 和 Unathenticated Template 组件都停止工作 - 任何一个都没有呈现任何内容。

我知道是这种情况，因为我减少了一个简单的案例：

<AuthenticatedTemplate>AA</AuthenticatedTemplate>
<UnauthenticatedTemplate>BB</UnauthenticatedTemplate>

我在每次渲染时在我的 App.tsx 文件中调用 HandleRedirectPromise：

this.props.instance
  .handleRedirectPromise()
  .then((tokenResponse) => {
    if (tokenResponse !== null) {
      const idToken = tokenResponse.idToken;
      sessionStorage.setItem("idToken", idToken);
    }
  })
  .catch((error) => {
    console.error(error);
  });

当我删除 handleRedirectPromise 调用时，会呈现正确的模板。我是否需要手动设置 ActiveAccount 才能让模板再次工作？

标签： reactjsmsal

解决方案

什么都没有返回，因为 handleRedirection 正在返回一个空令牌响应。

这是microsoft-authentication-library-for-js中的一个已知错误。您需要将 /home 路由添加到您的 AAD 应用注册。在 b2c 配置中注释您的 redirectUri 并将 navigationToLoginRequestUrl 设置为 true。

推荐阅读