问题描述
我在尝试将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浏览器文件对我有用