未定义的Key斗篷属性Authenticated和UserInfo

Question

我正在尝试获取登录用户的用户名和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);
...

问题：由于某些原因，以下日志输出未定义

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

和我的几乎一模一样。

Answer 1

我找到了解决方案。

我不得不更改Keycloft中的设置。所以我做的是：选择我的领域，然后在客户下->Acess Type，并将其从机密更改为公共。

Answer 2

KeyCloak与公开和机密客户端的区别在于客户端机密。使用"public"，您不需要秘密来启动登录协议，这意味着理论上每个人都可以注册/登录到您的KeyCloak。对于机密类型，KeyCloak为您的客户端生成一个唯一的客户端机密，您必须在选项中传递该机密才能启动登录过程。这样，你就可以确保只有你的应用程序(你传递秘密的地方(才能通过你的KeyCloak客户端进行身份验证。