带令牌的 Keycloak javascript 适配器 init 不起作用？

Question

我正在尝试通过使用 Keycloak 给出的令牌来使用 keycloak js 适配器。https://www.npmjs.com/package/@react-keycloak/web 像这样的：

import { ReactKeycloakProvider } from '@react-keycloak/web';
import keycloakClient from './keycloak';
import AuthenticatedApp from './AuthenticatedApp';

const keycloakInitOptions = {
  onLoad: 'check-sso',
  // enableLogging: true,
  token: token,
  refreshToken: refreshToken,
  idToken: idToken,
  checkLoginIframe: false,
  // promiseType: legacy
};

function App() {
  return (
    <ReactKeycloakProvider
      authClient={keycloakClient}
      initOptions={keycloakInitOptions}>
      <AuthenticatedApp />
    </ReactKeycloakProvider>
  );
}

export default App;

但它似乎没有使用令牌。如果我查看 keycloak 对象，就会发现令牌是未定义的。也许我误解了如何使用它？也许是反应包装器改变了它的使用方式。我看了这个https://keycloak.discourse.group/t/automatic-login-to-javascript-client-adapter-with-inital-access-and-refresh-token/1331，我似乎也在做同样的事情。我尝试过不使用访问令牌，也不使用刷新令牌，看看是否有区别。我尝试了promiseType=legacy，但结果相同。

Answer 1

除非您想使用一些高级功能，否则您实际上并不需要使用react-keycloak lib。你可以直接使用你正在通话的服务器提供的官方keycloak.js适配器。它甚至可以给你以后版本更新时带来更少的麻烦。

首先，安装 npm i keycloak-js （重要的是 js 文件的版本应与 keycloak 服务器的版本匹配）

然后在你的index.js（或主反应引导文件）中

import Keycloak from 'keycloak-js';

let initOptions = {
url: 'https://yourkeycloakserver/auth', realm: 'somerealm', clientId: 'someclientid', onLoad: 'login-required'}
let keycloak = Keycloak(initOptions);

然后将整个 React 应用程序包装在 keycloak 的成功块中

keycloak.init({ onLoad: initOptions.onLoad }).success((auth) => {
  if (!auth) {
      window.location.reload();
  } else {
      console.info("Authenticated");
  }

  localStorage.setItem("token", keycloak.token);
  localStorage.setItem("refresh-token", keycloak.refreshToken);
  
  ReactDOM.render(
 //load your app here when logged in
   <MainContainer/>
  );


setTimeout(() => {
      keycloak.updateToken(70).success((refreshed) => {
          if (refreshed) {
              console.debug('Token refreshed' + refreshed);
          } else {
              console.warn('Token not refreshed, valid for '
                  + Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000) + ' seconds');
          }
      }).error(() => {
          console.error('Failed to refresh token');
      });

  }, 60000)

}).error(() => {
  console.error("Authenticated Failed");
});