Блог

Если пользователь keycloak, используемый моим приложением react, уже вошел в систему через другое приложение, тогда он не должен снова запрашивать аутентификацию через мое приложение react (начиная с единого входа). как я могу этого добиться ?? пожалуйста, предоставьте решение для этого.

я использую keycloak для аутентификации приложения react.проверка подлинности с помощью ключа работает нормально. пробовал с помощью единого входа, но он не работает.я хочу, чтобы приложение react работало с одинарным входом keycloak, т.е. Когда пользователь keycloak входит в систему, он не должен повторно запрашивать учетные данные для входа. приложение react должно работать с одним входом.как я могу этого добиться ?? пожалуйста, предоставьте решение для этого.

ниже приведен мой keycloak.json

      {
       "realm": "Google-Auth",
       "auth-server-url": "http://localhost:8180/auth",
       "ssl-required": "external",
       "resource": "googledemo",
       "public-client": true,
       "confidential-port": 0
     }
 

ниже secured.js

     `import React, { Component } from 'react';
      import UserInfo from './UserInfo';
     import Logout from './Logout';
     import Keycloak from 'keycloak-js';

     class Secured extends Component {

       constructor(props) {
         super(props);
         this.state = { keycloak: null, authenticated: false };
       }

       componentDidMount() {
         const keycloak = Keycloak('/keycloak.json');
         keycloak.init({onLoad: 'login-required'}).then(authenticated => {
           this.setState({ keycloak: keycloak, authenticated: authenticated })
         })
       }

       render() {
         if(this.state.keycloak) {
           if(this.state.authenticated) return (
             <div>
               <p>
                 This is a Keycloak-secured component of your application. You shouldn't be able to                   
        unless you've authenticated with Keycloak.
      </p>
      <UserInfo keycloak={this.state.keycloak} />
      <Logout keycloak={this.state.keycloak} />
    </div>
  ); else return (<div>Unable to authenticate!</div>)
}
return (
  <div>Initializing Keycloak...</div>
);
       }
     }

     export default Secured;
 

Я сталкивался с подобным сценарием. Я также использовал тот же пакет keycloak-js. Вместо того, чтобы использовать это в компоненте, вы можете попытаться создать из него службу

 import Keycloak from "keycloak-js";

const _kc = new Keycloak('/keycloak.json');

/**
 * Initializes Keycloak instance and calls the provided callback function if successfully authenticated.
 *
 * @param onAuthenticatedCallback
 */
const initKeycloak = (onAuthenticatedCallback) => {
  _kc.init({
    onLoad: 'check-sso',
    silentCheckSsoRedirectUri: window.location.origin   '/silent-check-sso.html',
    pkceMethod: 'S256',
  })
    .then((authenticated) => {
      if (authenticated) {
      onAuthenticatedCallback();
      } else {
        doLogin();
      }
    })
};

const doLogin = _kc.login;

const doLogout = _kc.logout;

const getToken = () => _kc.token;

const isLoggedIn = () => !!_kc.token;

const updateToken = (successCallback) =>
  _kc.updateToken(5)
    .then(successCallback)
    .catch(doLogin);

const getUsername = () => _kc.tokenParsed?.preferred_username;

const hasRole = (roles) => roles.some((role) => _kc.hasRealmRole(role));

const UserService = {
  initKeycloak,
  doLogin,
  doLogout,
  isLoggedIn,
  getToken,
  updateToken,
  getUsername,
  hasRole,
};

export default UserService; 

А затем используйте индекс, чтобы инициировать эту службу keycloak и передать визуализацию вашего приложения в качестве обратного вызова.

 import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import HttpService from "./services/HttpService";
import UserService from "./services/UserService";

const renderApp = () => ReactDOM.render(<App/>, document.getElementById("app"));

UserService.initKeycloak(renderApp);
HttpService.configure();