Question

因此，我正在开发一个react-redux应用程序，该应用程序要求一些用户进行身份验证，而我使用keycloak进行身份验证。

基本上有一个公共/不安全的主页，位于：
-本地主机：3000 /

现在，当用户单击链接进入欢迎页面时，密钥库登录页面应弹出并询问身份验证详细信息，我已经设法这样做了：
-本地主机：3000 /欢迎->本地主机：8080 / auth

如上所述，登录页面已经显示并正确验证了注册用户。但是，一旦成功登录，我将被重定向到localhost：3000 / welcome（很好），但没有任何内容（不好）。

所以我继续将keycloak.authenticated的状态记录到控制台。在调用“ keycloak.init”之前，它是不确定的（没关系），成功通过身份验证后，它是错误的（：o？！？！）。

很奇怪。

因此，看来我必须手动更改keycloak.authenticated的状态。

2个问题： -面对无需构造函数等的无状态冗余组件，如何更改keycloak.authenticated -我的问题我什至正确吗？

一些手续：

keycloak.js 欢迎页面包装的高阶组件的代码：

import React from 'react';

const { Consumer, Provider } = React.createContext();
export const KeycloakProvider = Provider;
const withKeycloak = component =>
  function WithKeycloak(props) {
    return React.createElement(Consumer, null, keycloak => {
      console.log('before: ', keycloak.authenticated); -> undefined
      if (keycloak.authenticated) {
        return React.createElement(component, { ...props, keycloak }, null);
      }
      console.log('before init: ', keycloak.authenticated); // -> undefined
      keycloak.init({ onLoad: 'login-required' });
      console.log('after: ', keycloak.authenticated); // -> false!!
      return null;
    });
  };

export default withKeycloak;

main.jsx 定义了keycloak的main.jsx代码：

/** @format */

import lots of stuff....;
import { KeycloakProvider } from './keycloak/provider';
import Keycloak from 'keycloak-js';

const store = ...

const keycloak = Keycloak({
  url: 'http://localhost:8080/auth',
  realm: 'Test-Jannis',
  clientId: 'test-bayron'
});

const Main = () => (
  <Provider store={store}>
    <BrowserRouter>
        <KeycloakProvider value={keycloak}>
          <Route exact path="/" component={Home} />
          <Route exact path="/welcome" component={WelcomePage} />
        </KeycloakProvider>
    </BrowserRouter>
  </Provider>
);

export default Main;

我最好的猜测是在keycloak.js的keycloak.init下执行以下操作：

keycloak.init({ onLoad: 'login-required' });
   .then(authenticated => (keycloak.authenticated = authenticated));

但是...这不会将keycloak.authenticated更改为false。

请帮助:)

更新

为keycloak.js使用以下代码：

const withKeycloak = component =>
  function WithKeycloak(props) {
    return React.createElement(Consumer, null, keycloak => {
      console.log('before: ', keycloak.authenticated);
      keycloak.init({ onLoad: 'login-required'}).success(function() {
        if ( keycloak.authenticated ) {
          console.log("return page: ", keycloak.authenticated);
          console.log(component);
          console.log(React.createElement(component, { ...props, keycloak }, null));
          return React.createElement(component, { ...props, keycloak }, null);
        }
        console.log("return null: ", keycloak.authenticated);
        return null;
      });
    });
  };

现在输出keycloak.authenticated === true！但是，重定向后的localhost：3000 / welcome 仍未显示欢迎组件应该显示的任何html 。

Answer 1

跟随KeyCloak JS adapter documentation：

默认情况下，JavaScript适配器会创建一个隐藏的iframe，该iframe用于检测是否已发生Single-Sign Out。这不需要任何网络流量，而是通过查看特殊的状态cookie来检索状态。可以通过在传递给init方法的选项中设置checkLoginIframe：false来禁用此功能。

您需要将密钥隐藏初始化代码输入为：

keycloak.init({checkLoginIframe: false}).success((authenticated) => {
  // Some stuff
})

Keycloak对象属性“ authenticated”应为true时返回false

1 个答案: