BrowserAuthError:interaction_in_progress. Microsoft Azure Active Directory

vu8f3i0k  于 2023-10-22  发布在  其他
关注(0)|答案(1)|浏览(149)

当我尝试使用Microsoft Azure AD在生产网站上调用登录时,我得到一个BrowserAuthError: Interaction is currently in progress。我一辈子都想不出我做错了什么。这是我用于生产和开发的同一段代码。唯一的区别是clientIdredirecturlpostLogoutRedirectUri的配置发生了变化。我在localhost或staging上没有遇到过这种情况。
我已经按照文档中的解决方案在一定程度上,但它仍然不工作。这是我目前的代码库

const LoginLayout = () => {
    const navigate = useNavigate();
    const { instance, accounts, inProgress } = useMsal();
    const account = useAccount(accounts[0] || {});
    const auth_token = useSelector(state => state.auth);
    const dispatch = useDispatch();
    const isAuthenticated = useIsAuthenticated();

    console.log(auth_token.token);

    const handleLogin = async () => {
        if (!isAuthenticated && inProgress === InteractionStatus.None) {
            await instance.loginRedirect();
        }
    }

  useEffect(() => {
    if (account) {
        instance.acquireTokenSilent({
            scopes: config.azure.auth.scopes,
            account: account
        }).then((response) => {
            if(response) {
                //console.log("hi "+accounts.length);
                const authToken = response.accessToken;
                console.log(authToken);
                dispatch(setToken(authToken));
            }
        });

        if (accounts.length > 0){
            navigate("/overview");
        }
    }
   }, [account, instance]);

  return (
    <>
        <div className="block w-full">
            {
                accounts.length > 0 ? null
                : inProgress === "login" ? 
                <button 
                    type="submit" 
                    disabled 
                    onClick={handleLogin}    
                >
                    <p>Login</p>
                    <h1><IoSyncOutline className="text-xl animate-spin" /></h1>
                </button> 
                : <button 
                    type="submit" 
                    onClick={handleLogin}    
                >
                    <p>Login</p>
                    <h1><IoArrowForward className='text-xl' /></h1>
                </button> 
            }
        </div>
    </>
  )
}

下面是用于生产的Azure AD配置config.azure。值得注意的是,我使用相同的ID作为生产配置的客户端和租户ID

const azureAD = {
    auth: {
        clientId: "507772e4-",
        redirecturl: ["https://usmartinvoiceadmin.example.net"],
        postLogoutRedirectUri: "https://usmartinvoiceadmin.example.net",
        scopes: [
            "api://db7641cc-/access_as_user"
        ],
        authority: "https://login.microsoftonline.com/507772e4-"
    },
    cache: {
        cacheLocation: 'sessionStorage',
        storeAuthStateInCookie: true,
    },
}

我真的很感激任何帮助

p3rjfoxz

p3rjfoxz1#

  • 错误消息BrowserAuthError: interaction_in_progress. Microsoft Azure Active Directory表示另一个交互式Azure Active Directory(AAD)身份验证流已在进行中。
  • 如果您在同一浏览器中打开了多个Azure AD应用程序,或者您尝试从另一个交互式流中向Azure AD进行身份验证,则可能会发生这种情况
  • 要解决这个问题,您需要检查是否有正在进行的交互,以及是否没有帐户登录。如果这两个条件都满足,则代码将启动登录重定向。
  • 这将确保一次只运行一个交互式身份验证流。

下面是我用来解决和能够登录没有任何错误的代码

import  React  from  'react';
import { useMsal } from  '@azure/msal-react';
import { InteractionStatus } from  "@azure/msal-browser";

function  AuthButton() {

const { instance, accounts, inProgress, isAuthenticated } =  useMsal(); 

const  login  =  async () => {
if (!isAuthenticated  &&  inProgress  ===  InteractionStatus.None  &&  accounts.length  ===  0) {
await  instance.loginPopup();
}
};

const  logout  = () => {
instance.logoutPopup();
};

return (
<div>
{accounts.length === 0 ? (
<button  onClick={login}>Login</button>
) : (
<button  onClick={logout}>Logout</button>
)}
</div>
);
}
export  default  AuthButton;

启动开发服务器

npm start

结果

相关问题