我在 iframe 中使用 keycloak。我的 keycloak 客户是 Okta。
使用我当前的配置,keycloak 只是重定向到 okta 登录页面。这意味着它们也在 iframe 中打开。我真的很想改变这一点,因为它与我拥有的一些主要安全策略相矛盾。
谁能告诉如何重定向 keycloak 以使用 react/javascript 在弹出的 winodw 中打开 okta 登录。
我在 iframe 中使用 keycloak。我的 keycloak 客户是 Okta。
使用我当前的配置,keycloak 只是重定向到 okta 登录页面。这意味着它们也在 iframe 中打开。我真的很想改变这一点,因为它与我拥有的一些主要安全策略相矛盾。
谁能告诉如何重定向 keycloak 以使用 react/javascript 在弹出的 winodw 中打开 okta 登录。
我在这里完成了:
=========== LoginButton 组件 ========
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