keycloak~为微信二维码添加动态kc认可的动态state
本实例将通过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!''}";
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")}"
});
</script>
- 当我们使用上面的keycloak认可的state之后,就可以把回调地址也设置成keycloak默认生成的callback地址了,并且keycloak的
第一认证流
和登录后流程
也是可以直接使用的。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2022-07-29 java~ForkJoinPool分而致之处理大数据
2022-07-29 java~Map集合整理
2020-07-29 springcloud~微服务里的oauth2集成总结
2015-07-29 我心中的核心组件(可插拔的AOP)~分布式Session组件
2012-07-29 不说技术~有时,开发者还是应该讲究一点!
2011-07-29 面向对象~程序应该具有可维护性,代码可复用性,可扩展性和灵活性