我试图在我的react网站上实现一个基本的Keycloak身份验证。在身份验证初始化期间,身份验证失败,并且在react服务器端我收到错误invalid_client_credentials。
一旦我后藤我的react网站,我会被提示一个Keycloak登录页面,在那里我输入用户名和密码,我成功登录。但在init之后不会执行任何代码。
import React from 'react';
import ReactDOM from 'react-dom';
import Keycloak from 'keycloak-js';
const keycloak = Keycloak({
url: 'http://localhost:8080/',
realm: 'reactrealm',
clientId: 'reactclient',
clientSecret: 'xvtYZ5P7ybsjvmAO4YY2Eu6NifsePLBg'
});
keycloak.init({ onLoad: 'login-required' }).then((authenticated) => {
if (authenticated) {
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
} else {
ReactDOM.render(
<h1>Goodbye, world!</h1>,
document.getElementById('root')
);
}
});
2条答案
按热度按时间sqougxex1#
如果你的react应用中有一个后端API,你应该使用代码流,客户端的秘密属于你的API代码,而不是你的react前端代码。如果你没有后端,你必须使用隐式流。在这种情况下,没有客户端的秘密-没有一点,因为客户端没有办法(你的React浏览器代码)不能保密。
keycloak-js@latest
(当前版本为v21.0.1)甚至不支持clientSecret
选项AFAICT,因此不确定您是从哪里获得的(这有点令人困惑,因为clientSecret
在[typings][1]中提到过,但从未在[code][2]中实际使用过。可能是几个版本前的used to be supported?)。假设你没有后台,想使用隐式流,在keycloak管理控制台中设置“Client authentication”选项为 OFF,并为客户端启用隐式流。然后将
flow: "implicit"
选项传递给keycloak.init()
,并删除clientSecret
选项。rxztt3cl2#
一般情况下,当我们在客户端的“能力配置”中启用“客户端身份验证”时,在新的keycloak UI中会出现这个错误。请确保它被禁用,并且只勾选标准流程和直接授权。以下步骤可能会帮助您获得keycloak最新的UI:
1.创造新境界
1.设置主页url、基本url、重定向url、Web源
1.在客户端的高级选项卡中设置“身份验证流覆盖”,将“浏览器流”设置为浏览器,将“直接授予流”设置为“直接授予”
1.创建用户和角色,将角色分配给用户,并确保角色应包含客户端范围,客户端范围应包含Web源,以便您不会遇到CORS和令牌的问题,然后您可以检查