带有令牌的Keycloak javascript适配器初始化不起作用？答案

【问题标题】：Keycloak javascript adapter init with tokens not working?带有令牌的Keycloak javascript适配器初始化不起作用？
【发布时间】：2021-10-26 12:41:34
【问题描述】：

我正在尝试通过使用 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 对象，令牌只是未定义的。也许我误解了如何使用它？也许是 react 包装器改变了它的使用方式。我看着这个https://keycloak.discourse.group/t/automatic-login-to-javascript-client-adapter-with-inital-access-and-refresh-token/1331，我似乎也在做同样的事情。我试过没有访问令牌，也没有刷新令牌，看看它是否有所作为。我尝试了 promiseType=legacy，但结果相同。

【问题讨论】：

标签： reactjs keycloak

【解决方案1】：

除非您希望使用一些高级功能，否则您实际上不需要使用 react-keycloak 库。您可以直接使用与您通话的服务器提供的官方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");
});

【讨论】：