本實例(li)將通過keycloak社區(qu)登錄實現微(wei)信二維(wei)碼的(de)登錄，并(bing)且(qie)二微(wei)碼不是keycloak動態生成(cheng)，而是通過微(wei)信提供(gong)的(de)js生成(cheng)的(de)，在頁面上直接(jie)輸出的(de)方式實現的(de)。

動態state

在Keycloak中使(shi)用微信二維碼登(deng)錄(lu)時，state參數(shu)確實是由后端生成的(de)，并且(qie)用于確保登(deng)錄(lu)過程的(de)安(an)全(quan)性，防止CSRF攻擊等(deng)。如(ru)果你(ni)嘗試在前(qian)端寫(xie)死state值(zhi)或者在前(qian)端生成，可(ke)能(neng)會(hui)導(dao)致(zhi)一些安(an)全(quan)和整合問題，正如(ru)你(ni)在parseSessionCode方法(fa)中遇到的(de)錯誤。

前端代碼，生成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(/&amp;/g, '&');
var stateValue = getQueryVariable(decodedLoginUrl, "session_code") + "." + getQueryVariable(decodedLoginUrl, "tab_id") + "." + getQueryVariable(decodedLoginUrl, "client_id")
new WxLogin({
    href: "//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的第一認證流和登錄后流程也是可以直接使用的。