keycloak~為微信二維碼新增動態kc認可的動態state

张占岭發表於2024-07-29

本例項將透過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(/&amp;/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的第一認證流和登入後流程也是可以直接使用的。

相關文章