本实例将通过keycloak社区登录实现微信二维码的登录,并且二微码不是keycloak动态生成,而是通过微信提供的js生成的,在页面上直接输出的方式实现的。
动态state
在Keycloak中使用微信二维码登录时,state参数确实是由后端生成的,并且用于确保登录过程的安全性,防止CSRF攻击等。如果你尝试在前端写死state值或者在前端生成,可能会导致一些安全和整合问题,正如你在parseSessionCode方法中遇到的错误。
前端代码,生成keycloak的state
-
格式:session_code.tab_id.client_id
-
js方法生成state
<script src="${url.resourcesPath}/script/wxLogin.js"></script> <script>var client_id = "{client_id!''}"; var redirect_uri = "{redirect_uri!''}";
</script>
if (redirect_uri.indexOf("?") > 0) {
redirect_uri = redirect_uri + "&client_id=" + client_id;
} else {
redirect_uri = redirect_uri + "?client_id=" + client_id;
}
let decodedLoginUrl = '{p.loginUrl}'.replace(/&/g, '&'); var stateValue = getQueryVariable(decodedLoginUrl, "session_code") + "." + getQueryVariable(decodedLoginUrl, "tab_id") + "." + getQueryVariable(decodedLoginUrl, "client_id") new WxLogin({ href: "https://static.test.com/statics/css/wechatimgregister.css", self_redirect: false, id: "wechatImg", appid: "{weixinAppId}",
scope: "snsapi_login",
redirect_uri: "{weixinCallback}?redirect_uri=" + redirect_uri, state: stateValue, style: "black", info: "{msg("weixinPrompt")}"
}); -
当我们使用上面的keycloak认可的state之后,就可以把回调地址也设置成keycloak默认生成的callback地址了,并且keycloak的
第一认证流
和登录后流程
也是可以直接使用的。