当我尝试使用Microsoft Azure AD在生产网站上调用登录时，我得到一个BrowserAuthError: Interaction is currently in progress。我一辈子都想不出我做错了什么。这是我用于生产和开发的同一段代码。唯一的区别是clientId、redirecturl和postLogoutRedirectUri的配置发生了变化。我在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,
    },
}

我真的很感激任何帮助

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;

1条答案

按热度按时间

p3rjfoxz1#

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

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

启动开发服务器

npm start

结果

赞(0）回复(0）举报 2023-10-22

BrowserAuthError：interaction_in_progress. Microsoft Azure Active Directory

1条答案

相关问题

热门标签

最新问答