使用 loginPopup 时 Microsoft 身份验证反应“hash_empty_error”

我无法理解在尝试使用 Micrsoft Authentication 库 for React (PWA) 对用户进行身份验证时遇到的错误。我需要帮助理解为什么尝试使用 loginPopup 方法登录用户时失败。

在某些情况下，身份验证按预期工作，但在某些情况下却不起作用。任何形式的建议和/或帮助将不胜感激。

以下是我配置 microsoft 身份验证库的方式：

// create the microsoft signin configuration object
const msalConfig = {
  auth: {
    clientId   : process.env.REACT_APP_APP_CLIENT_ID,
    authority  : "https://login.microsoftonline.com/common/",
    redirectUri: window.location.origin,
  },
  cache: {
    cacheLocation: "sessionStorage",
  }
};

// initialize the user egent of the application 
const msalInstance = new msal.PublicClientApplication(msalConfig);

这是我调用 loginPopup 方法的块，该方法应该返回一个承诺，该承诺在该函数完成时得到满足，或者在出现错误时被拒绝。

const handleMicrosoftSignin = async () => {
  try {
    // this function does not get fulfilled, hence a 'hash_empty-err' 
    let msalResponse = await msalInstance.loginPopup();
    console.log("MSAL POPUP-LOGIN RESPONSE:", msalResponse)

    authenticateWithMicrosoft(
      msalResponse.account.username,
      msalResponse.accessToken
    );
  } catch (err) {
    setSnackBar({
      open    : true,
      message : err.message,
    });
  }
}

以下是我尝试使用登录弹出方法登录时收到的错误：

BrowserAuthError: hash_empty_error: Hash value cannot be processed because it is empty. Please verify that your redirectUri is not clearing the hash. Given Url: http://localhost:3000/login

以下是我正在使用的包，如我的 package.json 依赖关系树中所定义：

"dependencies": {
    ...
    "@azure/msal-browser": "^2.14.1",
    "@azure/msal-react": "^1.0.0-beta.2",
    ...
}

造成这个调试困难的原因是它不可重复，我发现很难理解为什么这个错误会在随机时间出现。有时承诺会实现，但有时却不会。换句话说，它有效，也无效。

关于如何调试或解决此问题的帮助和/或建议将非常有价值并受到高度赞赏。预先感谢您的帮助。

免责声明： 我已经阅读了文档、Microsoft Msal 示例应用程序，我还阅读了大量教程，但仍然未能使其完全发挥作用。

请仔细检查您用作redirectUri 的页面是否未更改或清除网址的哈希值。 AAD 的响应在哈希中返回，清除此响应可能会导致这种间歇性行为，因为它会在应用程序逻辑和 MSAL 之间产生竞争条件。