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

Question

我正在使用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:交互当前正在进行中。请确保在调用交互式接口之前，此交互已完成。“

Answer 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。