reactjs Keycloak身份验证invalid_client_credentials

zpqajqem  于 2023-04-05  发布在  React
关注(0)|答案(2)|浏览(619)

我试图在我的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')
        );
    }
});
sqougxex

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选项。

rxztt3cl

rxztt3cl2#

一般情况下,当我们在客户端的“能力配置”中启用“客户端身份验证”时,在新的keycloak UI中会出现这个错误。请确保它被禁用,并且只勾选标准流程和直接授权。以下步骤可能会帮助您获得keycloak最新的UI:
1.创造新境界
1.设置主页url、基本url、重定向url、Web源
1.在客户端的高级选项卡中设置“身份验证流覆盖”,将“浏览器流”设置为浏览器,将“直接授予流”设置为“直接授予”
1.创建用户和角色,将角色分配给用户,并确保角色应包含客户端范围,客户端范围应包含Web源,以便您不会遇到CORS和令牌的问题,然后您可以检查

相关问题