未定义的 Keycloak 属性 Authenticated 和 UserInfo

Posted 2023-02-19

【中文标题】未定义的 Keycloak 属性 Authenticated 和 UserInfo

【英文标题】：Undefined Keycloak Properties Authenticated and UserInfo

【发布时间】：2021-07-03 06:21:54

【问题描述】：

我正在尝试获取登录用户的用户名和 uid。

在我的应用程序中，我使用了 ReactKeycloakProvider 和 useKeycloak()

import ReactKeycloakProvider from '@react-keycloak/web';
import keycloak from './keycloak';

const onKeycloakEvent = (event: any, error: any) => 
    console.log('onKeycloakEvent', event, error)


const onKeycloakTokens = (tokens: any) => 
    console.log('onKeycloakTokens', tokens)


const initOptions = 
    onLoad: 'login-required',
    checkLoginIframe: false


ReactDOM.render(
    <React.StrictMode>
        <ReactKeycloakProvider
            authClient=keycloak
            initOptions=initOptions
            onEvent=onKeycloakEvent
            onTokens=onKeycloakTokens
        >
            <Provider store=store>
                <App/>
            </Provider>
        </ReactKeycloakProvider>

    </React.StrictMode>,
    document.getElementById('root')
);

作为测试，我想看看是否可以将 userInfo 提取到我的Header.tsx

import  useKeycloak from "@react-keycloak/web";

const Header = () => 

    const  keycloak, initialized  = useKeycloak();

    console.log(keycloak);
    console.log(keycloak.authenticated);
    console.log(keycloak.userInfo);
    ...

问题：由于某种原因，以下日志输出 undefined

console.log(keycloak.authenticated);
console.log(keycloak.userInfo);

官方文档中的例子是这样的：

https://github.com/react-keycloak/react-keycloak-examples/blob/master/examples/react-router/src/pages/Home.tsx

和我的几乎一模一样。

【参考方案1】：

我找到了解决办法。

我不得不更改 Keycloak 中的设置。所以我所做的是：选择我的 Realm，然后在 Clients -> Acess Type 下并将其从 confidential 更改为 public。