时间戳

首页 > 解决方案 > Gatsby Keycloak 集成

reactjs - Gatsby Keycloak 集成

问题描述

我在尝试将 Keycloak 与 Gatsby 静态网站集成时遇到问题。集成的目的是让登录用户与网站中的组件进行交互（例如：点赞、分享等功能），而网站是完全公开的。

Keycloak 实例位于远程服务器上，设置了领域，并使用此配置添加了客户端。

我使用这个 repo作为参考，但我想由于模块版本的不同而存在一些差异。我正在使用：

"@react-keycloak/web": "^2.1.3",
"keycloak-js": "^11.0.0",

这是我的 gatsby-browser.js：

import React from 'react'
import { node } from 'prop-types'
import Keycloak from 'keycloak-js'
import { KeycloakProvider } from '@react-keycloak/web'

const keycloak = new Keycloak({
  realm: 'myRealm',
  url: 'https://myKeycloak.com/auth',
  clientId: 'myClientId'
})

const Loading = () => <div>getting ready...</div>

const wrapRootElement = ({ element }) => {
  return (
    <KeycloakProvider
      keycloak={keycloak}
      initConfig={{
        promiseType: 'native',
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri:
          window.location.origin + '/silent-check-sso.xhtml'
      }}
      LoadingComponent={<Loading />}
    >
      {element}
    </KeycloakProvider>
  )
}

wrapRootElement.propTypes = {
  element: node
}

const _wrapRootElement = wrapRootElement
export { _wrapRootElement as wrapRootElement }

我被困在getting ready...页面中，而在我得到的网络工具上：

GET https://myKeycloak.com/auth/realms/myRealm/protocol/openid-connect/3p-cookies/step1.html
Status 404
Not Found

你有什么建议给我吗？提前感谢，祝你有美好的一天

标签： reactjsgatsbykeycloak

解决方案

似乎最新keycloak-js版本与旧的 Keycloak 服务器不兼容。尝试按照此处keycloak-js的建议进行降级。版本对我有用。10.0.2

推荐阅读