Keycloak - 在弹出窗口中登录 window

Question

我在 iframe 中使用 keycloak。我的 keycloak 客户端是 Okta。

使用我当前的配置，keycloak 只是重定向到 okta 登录页面。这意味着它们也在 iframe 中打开。我真的很想改变它，因为它与我的一些主要安全策略相矛盾。

谁能告诉我如何重定向 keycloak 以使用 react/javascript 在弹出的 winodw 中打开 okta 登录。

Answer 1

我完成了:

===========登录按钮组件========

function LoginButton(props) {
 
  window.addEventListener('storage',event => {
   if (event.key === 'logged-user') {
            // update the redux store variable for login successful
  }
  });

  const clickHandler = () => {   
    const x = window.innerWidth / 2;
    const y = window.innerHeight / 2;
    const win=open('/login','Login',`width=500,height=600, left=${x},top=${y}`);
  };



  return (
    <>
      <Button
        onClick={clickHandler}
      > Login </Button>
     </>
   )
}

export default LoginButton

===========登录组件========

const LogIn = props => {
  const { keycloak } = useKeycloak();
  const [isLoginCalled, setIsLoginCalled] = useState(false);
  
  // load the profile and call saga for update login information
  function loadUserInfo() {
    keycloak
      .loadUserProfile()
      .then(function(profile) {
        localStorage.setItem('logged-user', profile.username);
        window.open('', '_self').close();
      })
      .catch(function(err) {
        console.log(`Error while loading progile :${err}`);
      });
  }

  useEffect(() => {
    if(keycloak.authenticated && !isLoginCalled) {
      loadUserInfo();
      setIsLoginCalled(true);
    } else {    
      keycloak.login();      
    }
  }, [1]); 

  return (
    <>
     <h1>Loading please wait...</h1>
    </>
  );
};

export deault LogIn