本地开发环境中的Keycloak和React无限重定向循环

Question

我正在维护一个旧的 React 应用程序，它使用 Keycloak 作为身份提供者。

在本地开发环境中，成功登录后，浏览器陷入 URL 之间的无限重定向循环，如下所示：

• http://localhost:3000

  （React 应用程序 URL）

• http://localhost:3000/#state=01e0e63d-9688-4d7b-913f-078605c2d1c2&session_state=fe8282ff-00f3-41b8-9d21-fa265d4ac6b7&code=98b9af84-2545-4a6e-9e29-3f14be14e51a.fe8282ff-00f3-41b8-9d21-fa265d4ac6b7.1566b4fb-81be-4a85-a31b-d72dfccb1f5b

Keycloak 版本是

15.0.2

。该项目使用

keycloak-js

版本

15.0.2

。将 Keycloak 更新到新版本目前超出了范围。

这是React Keycloak初始化代码：

      <ReactKeycloakProvider
          authClient={keycloak}
          initOptions={{
            onLoad: "check-sso",
            silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html"
          }}
          LoadingComponent={<KeycloakLoadingComponent/>}
      >
        <AppContent/>
      </ReactKeycloakProvider>

React 应用程序不使用

<React.StrictMode>

，所以这不是问题。

我在 Chrome、Firefox 和 Edge 中观察到这种行为。

该问题不会发生在生产或预生产环境中，仅在本地开发时发生。

我尝试了这些网址中列出的解决方案：

• KeyCloak登录导致死循环
• Keycloak无限重定向
• https://github.com/mauriciovigolo/keycloak-angular/issues/289
• https://szoradi-balazs.medium.com/keycloak-login-infinite-loop-9005bcd9a915

我尝试在Keycloak

checkLoginIframe: false

中设置

initOptions

，但没有解决问题。

我还尝试在 Chrome 中禁用 SameSite 安全性，但显然不再可能了。

Answer 1

我在本地计算机上完全重新安装了 Keycloak，现在它可以正常工作了。不知道发生了什么，但显然问题出在 Keycloak 的配置上。