Reactjs KeyClope单点登录不使用react应用程序

如果我的react应用程序使用的KeyClope用户已经通过另一个应用程序登录，那么它不应该再次通过我的react应用程序请求身份验证（因为SSO）。我如何实现这一点？请提供解决方案

我正在使用Key斗篷对react应用程序进行身份验证。Key斗篷身份验证工作正常。尝试了单点登录，但不起作用。我希望react应用程序与Key斗篷单点登录一起工作，即当Key斗篷用户登录时，它不应再次请求登录凭据。react应用程序应与单点登录。我如何实现这一点？请提供解决方案

下面是我的keydeport.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;

`import React，{Component}来自'React'；
从“/UserInfo”导入用户信息；
从“./Logout”导入注销；
从“keydove js”导入keydove；
类安全扩展组件{
建造师（道具）{
超级（道具）；
this.state={keydrope:null，authenticated:false}；
}
componentDidMount（）{
constkeydove=keydove（'/keydove.json'）；
init（{onLoad:'login required'}）。然后（authenticated=>{
this.setState（{keydrope:keydrope，authenticated:authenticated}）
})
}
render（）{
if（this.state.keydrope）{
如果（this.state.authenticated）返回(

这是应用程序的密钥斗篷安全组件。您不应该
除非你已经用KeyClope认证。

)；否则返回（无法验证！）
}
返回(
正在初始化密钥斗篷。。。
);
}
}
出口违约担保；

我遇到了类似的情况。我也使用了相同的keydape js包。您可以尝试从组件中创建服务，而不是在组件中使用它

从“keydove js”导入keydove；
const_kc=newkeydape（'/keydape.json'）；
/**
*初始化KeyClope实例，并在成功验证后调用提供的回调函数。
*
*@param onAuthenticatedCallback
*/
常量initkeydcape=（onAuthenticatedCallback）=>{
_kc.init({
onLoad:“检查sso”，
silentCheckSsoRedirectUri:window.location.origin+'/silentcheck sso.html'，
pkceMethod:'S256'，
})
。然后（（已验证）=>{
如果（已验证）{
onAuthenticatedCallback（）；
}否则{
多洛金（）；
}
})
};
const doLogin=_kc.login；
const doLogout=_kc.logout；
const getToken=（）=>kc.token；
常量isLoggedIn=（）=>_kc.token；
const updateToken=（successCallback）=>
_kc.updateToken（5）
。然后（成功回调）
.捕获（多洛金）；
const getUsername=（）=>\u kc.tokenParsed？。首选\u用户名；
const hasRole=（roles）=>roles.some（（role）=>\u kc.hasRealmRole（role））；
常量用户服务={
这件斗篷，
多洛金，
多洛古特，
伊斯洛格丁，
格托克，
更新技术，
getUsername，
哈斯罗尔，
};
导出默认用户服务