在 Keycloak React 中的 login-status-iframe.html 中获取 403 Forbidden

Question

我正在尝试在 React 应用程序中实现 keycloak，但收到 403 禁止消息。React 在 :3000 上运行，Keycloak 在端口 :8080 上运行，这是 Keycloak.ts

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

});

export default keycloak;

索引.ts

  import keycloak from './keycloak'
    import AppRouter from './routes/index'
import { ReactKeycloakProvider } from '@react-keycloak/web'
    
    const eventLogger = (event: unknown, error: unknown) => {
      console.log('onKeycloakEvent', event, error)
    }
    
    const tokenLogger = (tokens: unknown) => {
      console.log('onKeycloakTokens', tokens)
    }
    
    ReactDOM.render(
      <React.StrictMode>
        <ReactKeycloakProvider
          authClient={keycloak}
          onEvent={eventLogger}
          onTokens={tokenLogger}
        >
          <div style={{margin: '0px', padding: '0px', width: '100%', height: '100%'}}>
            <AppRouter />
          </div>
        </ReactKeycloakProvider>
      </React.StrictMode>,
      document.getElementById('root')

这是 keycloak 客户端配置

Keycloak 在最新版本上运行：docker pull jboss/keycloak:latest

反应时：

1. "keycloak-js": "^20.0.3",
2. "@react-keycloak/web": "^3.4.0",

错误代码：

Answer 1

我遇到了同样的问题，答案是 keycloak 客户端的 Web 原点设置不正确。要检查您登录 keycloak 的管理面板是否存在同样的问题，请选择正确的领域，选择您的客户端并将 Web 源更改为 just，+然后尝试从您的应用程序登录。

还要确保您的Valid redirect URIs. 为了在我的本地进行测试，我刚刚使用了http://localhost:3000/*

希望这可以帮助！