未定义的 Keycloak 属性 Authenticated 和 UserInfo答案

【问题标题】：Undefined Keycloak Properties Authenticated and UserInfo未定义的 Keycloak 属性 Authenticated 和 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

和我的几乎一模一样。

【问题讨论】：

标签： javascript reactjs keycloak

【解决方案1】：

我找到了解决办法。

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

【讨论】：