Gatsby Keycloak集成

Question

我有一些问题，试图将Keycloak与盖茨比静态网站集成起来。集成的目的是让登录的用户与网站中的组件交互(比如:喜欢、共享等)，而网站是完全公开的。

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

我正在使用这个回购作为参考，但我想，由于模块版本的不同，这里有一些不同之处。我在用：

"@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

你有什么给我的小费吗？提前谢谢，祝你今天愉快

Answer 1

这个问题与Keycloak配置有关，我为我的案例找到了解决方案：

• 创造境界；
• 增加客户；
• 输入根URL ( gatsby网站的根页面)；
• 输入Admin ( gatsby网站的管理页面)；
• 输入Web源文件

有了这种配置，上面的gatsby浏览器文件就适合我了。

Answer 2

最新的keycloak-js版本似乎与较旧的密钥披风服务器不兼容。尝试降低keycloak-js的评级，如建议的这里。10.0.2版本为我做了这个技巧。