我正在使用
@react-keycloak/web
使用 keycloak 来保护 React 应用程序的安全。
我最近开始将 KeyCloak 与 React 结合使用。我的 KeyCloak Docker 在端口 8080 上运行,我的 React 应用程序在 3000 上运行。
当我尝试登录时,地址栏开始跳转,并且 url 中出现一些不同的标记。
应用程序.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;
我认为您面临的问题已在这里讨论和回答:https://github.com/react-keycloak/react-keycloak/issues/93
从index.js 中删除
<React.StrictMode>
应该可以暂时解决这个问题。如果您希望保留严格模式,请将 StrictMode 放在 ReactKeycloakProvider
中。
删除
<React.StrictMode>
并不能解决问题。
该问题与 React-keycloak 如何验证颁发的令牌尚未被撤销有关。为此,它尝试加载并验证被大多数现代浏览器阻止的特定 i-frame。
要解决此问题,您有两种选择:
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;
这将使您的身份验证适用于所有浏览器。