KeyCloak React refreshToken 过期令牌答案

【问题标题】：KeyCloak React refreshToken expired tokenKeyCloak React refreshToken 过期令牌
【发布时间】：2021-05-27 14:38:51
【问题描述】：

我想在我的客户端应用程序中实现授权，但我在使用 Keycloak 更新 React 应用程序中的令牌时遇到问题。

App.js

import keycloak from "../../keycloak";

const App = () => {

    const handleOnEvent = async (event,error) => {
        if(event === 'onTokenExpired'){
            
            keycloak.updateToken(300).then(
                (response) => {
                   //I want to update my existing Token
                 alert("response: ", response )
                })
                .catch(error => {
                    console.log("error: ", error)
                })
        }
    }


    return (
        <>
            <ReactKeycloakProvider
                authClient={keycloak}
                onEvent={(event,error) => handleOnEvent(event,error)}>
                <AppRouter/>
            </ReactKeycloakProvider>
        </>)
}
export default App;

标题

const Header = () => {
    const {keycloak,initialized} = useKeycloak()

    useEffect(() => {

        if(keycloak.authenticated){
            alert(JSON.stringify(keycloak))
            localStorage.setItem("keycloakToken", keycloak.token); //set keycloak token to localStorag
            localStorage.setItem("keycloakRefreshToken", keycloak.refreshToken); // set refresh token
            setJWTToken(keycloak.token) //set to axios Authorization Bearer 
        }
    },[keycloak.authenticated])

    return(
        <>
        {
            keycloak && !keycloak.authenticated && <UnloggedHeader keycloak={keycloak}/>
        }
            {
                keycloak && keycloak.authenticated && <LoggedHeader keycloak={keycloak}/>
            }
        </>
    )
}

export default Header

UnloggedHeader

function UnloggedHeader({keycloak}){

    const signIn = () => {
        keycloak.login()
    }

    return (
        <div style={{minWidth: '1100px'}}>
            <AppBar position="sticky" color='transparent'>
                <Toolbar>
                            <Button onClick={signIn} variant="contained" color="primary">Login</Button>
                    <Typography variant="body1" component="h6">Unlogged</Typography>
                </Toolbar>
            </AppBar>
        </div>
    );
}

export default UnloggedHeader

LoggedHeader

function LoggedHeader({keycloak}){
    let history = useHistory()
    const [anchorEl, setAnchorEl] = React.useState(null);
    const isMenuOpen = Boolean(anchorEl);
    const handleProfileMenuOpen = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const [userInfo,setUserInfo] = useState()

    useEffect(() => {
        keycloak.loadUserInfo().then(userInfo => {
            setUserInfo(userInfo)
            localStorage.setItem("username", userInfo.preferred_username); // set username of user
        })
    },[])

    const handleMenuClose = () => {
        setAnchorEl(null);
    };

    const handleUserLogoutClick = () => {
        keycloak.logout()
        history.push("/")
    }

    return (
        <div style={{minWidth: '1100px'}}>
           
            <AppBar position="sticky" color='transparent'>
                <Toolbar>
                
                    <Typography variant="body1" component="h6">{userInfo !== undefined ? userInfo.preferred_username : "EMPTY"}</Typography>
                    <ExpandMoreIcon/>
                    <Button onClick={handleUserLogoutClick} variant="contained" color="primary">Log out</Button>
                </Toolbar>
            </AppBar>
            {renderMenu}
        </div>
    );
}

export default LoggedHeader

keycloak.js

import Keycloak from 'keycloak-js'

const keycloakConfig = {
    url: 'http://10.192.168.72:8080/auth/',
    realm: 'Realm12',
    clientId: 'client',

}
const keycloak = new Keycloak(keycloakConfig);
export default keycloak

我需要提供什么给 ReactKeycloakProvider 以在过期时获取新的 access_token ？如何根据 refreshToken 值获取 accessToken？由于获得此值，我不知道哪个方法或端点。我在网络中找不到这种问题。

请帮帮我！

【问题讨论】：

标签： reactjs react-hooks token keycloak expired-sessions

【解决方案1】：

您可以在 Provider 上使用事件 onTokens

 <ReactKeycloakProvider
   authClient={keycloak}
   onTokens={({ token }) => {
     // dispatch(setToken(token));
     localStorage.setItem("keycloakToken", token);
   }}
   <AppRouter/>
 </ReactKeycloakProvider>

要触发更新方法，你可以像这样在你的应用路由器中监听事件

export default function AppRouter() {
  const { initialized, keycloak } = useKeycloak<KeycloakInstance>();

  useEffect(() => {
    if (keycloak && initialized) {
      keycloak.onTokenExpired = () => keycloak.updateToken(600);
    }
    return () => {
      if (keycloak) keycloak.onTokenExpired = () => {};
    };
  }, [initialized, keycloak]);

  return (
    <MyPreferedRouter>
     <Switch />
    </MyPreferedRouter>
  );
}

正在处理@react-keycloak/ssr，我将此实现与 redux 一起使用以在商店中保存令牌

别忘了适应keycloak.updateToken(600); 600 是您的 minValidity 秒数

【讨论】：

【解决方案2】：

我在这一点上进行了一些调查，因为我无法通过刷新令牌获取新令牌，这对我有用

我使用了 Keycloak 端点：

https://<yourAuthLink>/auth/realms/<relmName>/protocol/openid-connect/token

带有标题对象

headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}

身体会是这样的：

body: "client_id"=<clientId>&"grant_type"="refresh_token"&"refresh_token"=<refreshToken>&"client_secret"=<clientSecret>

这将返回具有您用作令牌的 access_token 和 refresh_token 以在到期时间之前再次使用它的响应

it is useful link for this type of endpoint and headers

【讨论】：

【解决方案3】：

我们使用这个流程

useEffect(() => {
    dispatch(keycloak.token);
    // and then save it to localStorage
}, [keycloak.token]);


useEffect(() => {
    // jast in case
    if(!initialized)
        return;

    if(!keycloak.authenticated)
        return;


    keycloak.onTokenExpired = () => {
        keycloak.updateToken(50);
    };
}, [keycloak.authenticated]);

但是这里我有一个问题：如果用户睡了很长时间，然后需要做一些API请求，那么这里我必须在请求之前要求刷新令牌但是useKeycloak钩子在这种情况下不起作用

【讨论】：