reactjs - 不调用重定向回调，但访问了重定向 URI

Question

我尝试使用 Microsoft Azure 登录。

到目前为止有效的方法：

• 使用loginPopup().then(response => console.log(response)时，我被要求登录然后获取我在这里打印的令牌。这对我来说意味着一切都已正确设置和配置。
• 用户体验不是用弹出窗口来打扰用户，而是使用loginRedirect()。再次要求我登录，然后我被重定向到注册的 URI (AuthPage)。

问题：

• 注册的回调函数永远不会被调用。我想将接收到的token存储在App中，并在用户登录时设置不同的路由。为什么没有调用回调？
• 如果我不使用msalObj.handleRedirectCallback(callback);我会得到一个错误。显然必须设置一些回调函数。
• 如果我仍然被重定向到redirectURI并且可以从 URL 中提取令牌，为什么我需要回调？

我发现最有帮助的来源：

• Microsoft Msal 官方文档

---

import React from 'react';
import { Configuration, UserAgentApplication } from "msal";


export const LoginPage = (props) => {
  const submitHandler = (e) => {
    const msalConfig = {
      auth: {
        clientId: `${process.env.REACT_APP_AAD_CLIENT_ID}`,
        authority: `${process.env.REACT_APP_AAD_AUTHORITY}/${process.env.REACT_APP_AAD_TENANT_ID}`,
        redirectUri: `${process.env.REACT_APP_AAD_REDIRECT_URI}`,
      },
      cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: true
      }
    };
    const requestObj = {
      scopes: ["user.read"]
    };

    const callback = (error, response) => {
      console.log(response);
      props.onRedirect(error, response);
    };

    e.preventDefault();
    const msalObj = new UserAgentApplication(msalConfig);
    msalObj.handleRedirectCallback(callback);
    msalObj.loginRedirect(requestObj);
  };

  return (
    <>
    <h2>Login</h2>
    <hr />
    <form onSubmit={submitHandler}>
      <button type="submit">Login with Azure</button>
    </form>
    </>
  );
};

标签： reactjsazureredirectcallbackmsal