本实例将通过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>code>

<script>

var client_id = "${client_id!''}";

var redirect_uri = "${redirect_uri!''}";

if (redirect_uri.indexOf("?") > 0) {

redirect_uri = redirect_uri + "&client_?client_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",code>

info: "${msg("weixinPrompt")}"

});

</script>

• 当我们使用上面的keycloak认可的state之后，就可以把回调地址也设置成keycloak默认生成的callback地址了，并且keycloak的第一认证流和登录后流程也是可以直接使用的。