Gatsby Keycloak集成

如何解决Gatsby Keycloak集成

我在尝试将Keycloak与Gatsby静态网站集成时遇到问题。 集成的目的是在网站完全公开的情况下，让登录的用户与网站中的组件进行交互（诸如“喜欢”，“共享”等功能）。

Keycloak实例位于远程服务器上，该服务器具有领域设置，并向客户端添加了此configuration。

我使用this 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

你有给我的小费吗？ 预先感谢，祝你有美好的一天

解决方法

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

,

问题与Keycloak配置有关，有针对我的案例的解决方案：

• 创建领域；
• 添加客户；
• 输入Root URL（您的gatsby网站的根页面）；
• 输入管理员URL（您的gatsby网站的管理页面）；
• 输入网络起源

使用该配置，上面的gatsby浏览器文件对我有用