如何在初始回调时从 msal-react 检索令牌？答案

【问题标题】：How can I retrieve a token from msal-react on initial callback?如何在初始回调时从 msal-react 检索令牌？
【发布时间】：2021-05-31 23:26:03
【问题描述】：

我正在使用 msal-react 尝试对我的应用程序上的用户进行身份验证，但是返回到我的应用程序的初始重定向似乎没有提供令牌。如果我在回调后刷新页面，则应用程序按预期工作。我已正确设置 Azure AD，并且已验证我可以在 Postman 中使用同一用户获取令牌。

目前我的 index.tsx 页面如下所示：

import { Configuration, PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";

...

const configuration: Configuration = {
  auth: {
    authority: 'https://login.microsoftonline.com/organizations',
    clientId: '<AppClientId>',
    redirectUri: 'https://localhost:3000',
  }
};
const pca = new PublicClientApplication(configuration);

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <MsalProvider instance={pca}>
        <App />
      </MsalProvider>      
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

由于我想进行自动登录而不是让用户单击登录按钮，因此我尝试从 App.tsx 文件进行登录。这适用于当应用程序最初加载时，我被重定向到 Azure 登录页面，我可以使用我的用户名和密码成功登录。但是当重定向发生时，由于帐户仍然是空的，它会再次调用相同的 instance.loginRedirect 调用。如前所述，当我刷新浏览器帐户中的页面时，我会按预期显示应用程序。

这是我为 App.tsx 准备的内容：

function Login(): React.ReactElement {
  const { instance } = useMsal();

  useEffect(() => {
    const accounts = instance.getAllAccounts();    
    if (!accounts || accounts.length < 1) {
      instance.loginRedirect({
        scopes: ["profile", "openid"]
      });
    }
  }, [instance]);

  return (
    <p>Signing in...</p>
  );
}

function App(): React.ReactElement {
  return (
    <>
      <AuthenticatedTemplate>
        <Router>
          <ThemeProvider theme={theme}>
            ... App Components ...
          </ThemeProvider>
        </Router>
      </AuthenticatedTemplate>

      <UnauthenticatedTemplate>
        <Login />
      </UnauthenticatedTemplate>
    </>
  );
}

当我查看商店时，我可以看到我有一个有效的访问令牌，所以我一定错过了一个步骤

我还尝试使用 inProgress 字符串来查看是否可以检测到不同的状态来阻止第二次调用的发生，但这也没有奏效。除了我无法阻止我的应用再次调用 loginRedirect 之外，一切似乎都在工作。

对此的任何帮助将不胜感激。

编辑：应该提到我得到的错误是“interaction_in_progress：交互正在进行中。请确保在调用交互式 API 之前此交互已完成。”

【问题讨论】：

标签： javascript reactjs azure-active-directory msal

【解决方案1】：

试试这个。

import { InteractionStatus } from "@azure/msal-browser";    
... 

const { instance, inProgress } = useMsal();    
useEffect(() => {
    if (inProgress === InteractionStatus.None && !isAuthenticated) {
        instance.loginRedirect(loginRequest)
            .catch(e => {
                console.error(e);
            });
    }
});

您需要在调用登录重定向之前检查 InteractionStatus。

【讨论】：