Keycloak在我刚登录Keycloak认证页面后导致React应用程序出现循环。登录后重定向时出现无限循环。

Question

我正在使用@react-keycloak/web来保护React应用程序，使用Keycloak进行安全认证。

最近我开始在React中使用KeyCloak。我的KeyCloak Docker运行在8080端口，而我的React应用程序则运行在3000端口。

当我尝试登录时，地址栏会跳动，并且一些不同的令牌会出现在URL中。

App.js

import React from "react";
import { ReactKeycloakProvider } from "@react-keycloak/web";
import keycloak from "./Keycloak"
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Nav from "./components/Nav";
import WelcomePage from "./pages/Homepage";
import SecuredPage from "./pages/Securedpage";
import PrivateRoute from "./helpers/PrivateRoute";

function App() {
 return (
   <div>
     <ReactKeycloakProvider authClient={keycloak}>
       <Nav />
       <BrowserRouter>
         <Routes>
           <Route exact path="/" element={<WelcomePage />} />
           <Route path="/secured" element={<PrivateRoute>
                                            <SecuredPage />
                                          </PrivateRoute>} />
         </Routes>
       </BrowserRouter>
       </ReactKeycloakProvider>
   </div>
 );
}
export default App;

Nav.js

import React from "react";
import { useKeycloak } from "@react-keycloak/web";

const Nav = () => {
 const { keycloak, initialized } = useKeycloak();

 return (
   <div>
     <div className="top-0 w-full flex flex-wrap">
       <section className="x-auto">
         <nav className="flex justify-between bg-gray-200 text-blue-800 w-screen">
           <div className="px-5 xl:px-12 py-6 flex w-full items-center">
             <h1 className="text-3xl font-bold font-heading">
               Keycloak React AUTH.
             </h1>
             <ul className="hidden md:flex px-4 mx-auto font-semibold font-heading space-x-12">
               <li>
                 <a className="hover:text-blue-800" href="/">
                   Home
                 </a>
               </li>
               <li>
                 <a className="hover:text-blue-800" href="/secured">
                   Secured Page
                 </a>
               </li>
             </ul>
             <div className="hidden xl:flex items-center space-x-5">
               <div className="hover:text-gray-200">
                 {!keycloak.authenticated && (
                   <button
                     type="button"
                     className="text-blue-800"
                     onClick={() => keycloak.login()}
                   >
                     Login
                   </button>
                 )}

                 {!!keycloak.authenticated && (
                   <button
                     type="button"
                     className="text-blue-800"
                     onClick={() => keycloak.logout()}
                   >
                     Logout ({keycloak.tokenParsed.preferred_username})
                   </button>
                 )}
               </div>
             </div>
           </div>
         </nav>
       </section>
     </div>
   </div>
 );
};

export default Nav;

Keycloak.js

import Keycloak from "keycloak-js";
const keycloak = new Keycloak({
 url: "http://localhost:8080/auth",
 realm: "keycloak-react-auth",
 clientId: "React-auth",
});

export default keycloak;

- womendev

Answer 1

我认为你所面临的问题在这里有讨论和答案：https://github.com/react-keycloak/react-keycloak/issues/93 从index.js中删除<React.StrictMode>应该可以暂时解决它。如果您希望保留strict mode，请将StrictMode放置在ReactKeycloakProvider内部。

- Rowan

Answer 2

删除 <React.StrictMode> 并不能解决问题。

问题与 React-keycloak 如何验证已发出的令牌未被撤销有关。为此，它尝试加载和验证一个特定的 i-frame，但大多数现代浏览器会阻止该操作。

要解决此问题，您有两个选项：

• 使用 onLoad: "check-sso" , silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html",
• 使用 checkLoginIframe:false （尽管这个选项更加激进）。 您的 App.js 代码将如下所示：

   

     import React from "react";
        import { ReactKeycloakProvider } from "@react-keycloak/web";
        import keycloak from "./Keycloak"
        import { BrowserRouter, Route, Routes } from "react-router-dom";
        import Nav from "./components/Nav";
        import WelcomePage from "./pages/Homepage";
        import SecuredPage from "./pages/Securedpage";
        import PrivateRoute from "./helpers/PrivateRoute";
    
        function App() {
         return (
           <div>
             <ReactKeycloakProvider authClient={keycloak} initOptions={{
          checkLoginIframe: false,
            }}>
           <Nav />
               <BrowserRouter>
             <Routes>
               <Route exact path="/" element={<WelcomePage />} />
               <Route path="/secured" element={<PrivateRoute>
                                                <SecuredPage />
                                              </PrivateRoute>} />
             </Routes>
           </BrowserRouter>
           </ReactKeycloakProvider>
       </div>
     );
    }
    export default App;

这将使您的认证在所有浏览器上工作。

- Mocktar Issa

---

@Mockstar Issa - 使用 onLoad: "check-sso"，silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html"。这应该在哪里使用？ - K. Shaikh

你好，你可以将它作为值传递给你的initOptions，作为ReactKeycloakProvider的props。 - Mocktar Issa