React Keyckloak 在客户端身份验证切换为 ON 后获取 Token 时始终出现 401 响应

Question

我正在使用 React 并尝试使用 ReactKeycloakWeb 和 Keycloak JS 将 Keycloak 与其集成。我添加了以下配置，通常工作正常：

const keycloakConfig = {
  realm: "webapp", // Realm as configured in Keycloak
  url: "http://localhost:8080",
  clientId: "webapp-client", // Client ID as configured in the realm in Keycloak
};

const keycloak = new Keycloak(keycloakConfig);

const App = () => {
  return (
    <ErrorBoundary>
      <ReactKeycloakProvider
        authClient={keycloak}
        initOptions={{
          onLoad: "login-required",
        }}
      >
        <ThemeProvider theme={mdTheme}>
          <CssBaseline />
          <Root />
          <Toaster />
        </ThemeProvider>
      </ReactKeycloakProvider>
    </ErrorBoundary>
  );
};

export default App;

我在Keycloak中手动创建了一个用户，并且能够成功连接到该应用程序。但是，我有很多用户，我无法每次都手动创建每个用户。因此，我通过 Keycloak API 创建了用户。

问题是要访问 Keycloak API，我必须将客户端身份验证切换为 ON，如下所示：

启用此功能后，Keycloak 中会出现一个新窗口，用于在“Credentials”下添加密钥：

但是，添加此参数后，我无法通过 React 连接到我的应用程序。

即使我像这样更改 Keycloak Web 配置：

const keycloakConfig = {
  realm: "webapp", // Realm as configured in Keycloak
  url: "http://localhost:8080",
  clientId: "webapp-client", // Client ID as configured in the realm in Keycloak
  credentials: {
    secret: 'hM6oswdupEMFkRzkBuhOfTPhC64s8G9R', // Only include this for confidential clients
  },
};

出现同样的错误，ReactKeycloakWeb包没有在payload中传递客户端密钥：

是否有解决方案，或者当客户端身份验证打开时，ReactKeycloakWeb 包不起作用？

Answer 1

我猜这是因为 http（不是 https）：不能在不安全的环境中使用。