3

我无法理解在尝试使用 Micrsoft Authentication library 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,
    });
  }
}

以下是我尝试使用 Login Popup 方法登录时遇到的错误：

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 示例应用程序，我还阅读了大量教程，但仍无法使其完全发挥作用。

4

1 回答 1

0

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

于 2021-06-01T16:09:13.953 回答