Keycloak自定义登录页如何注入服务端生成的单次登录专属数据

第一步 修改自定义认证器代码 #

在challenge方法中，拿到LoginFormsProvider实例后调用setAttribute方法即可将待签名数据注入模板上下文，同时保留authNote存储用于后续提交校验，修改后的代码如下：

@Override
protected Response challenge(AuthenticationFlowContext context, MultivaluedMap<String, String> formData) {
    LoginFormsProvider forms = context.form(); 
    String signData = "signdatavalue"; // 替换为实际生成的单次待签名数据
    // 存储到authNote用于后续提交校验
    context.getAuthenticationSession().setAuthNote("signdata", signData);
    // 注入到模板上下文，FTL模板可直接读取该变量
    forms.setAttribute("signdata", signData);
    if (!formData.isEmpty()) forms.setFormData(formData);
    return forms.createForm(LOGIN_FTL);
}

第二步 修改FTL模板 #

直接在模板中读取刚才注入的signdata变量，你可以将它放在隐藏域中供给签名JS调用，修改后的表单代码参考：

<div class="${properties.kcFormGroupClass!}" style="display:none"> 
    <label for="rawSignData" class="${properties.kcLabelClass!}">rawSignData</label>
    <!-- 读取注入的待签名数据放在隐藏域，JS可以直接取该input的value做签名 -->
    <input id="rawSignData" class="${properties.kcInputClass!}" value="${signdata}" name="rawSignData" type="hidden"/>
    <label for="signedXML" class="${properties.kcLabelClass!}">signedXML</label>
    <input id="signedXML" class="${properties.kcInputClass!}" value="" name="signedXML" type="hidden"/>
</div>

校验逻辑说明 #

前端JS拿到rawSignData的值完成签名后，将签名结果写入signedXML隐藏域再提交表单，后端validateForm方法中可以直接从formData里拿到签名结果，和之前存在authNote里的signdata做校验即可。

内容的提问来源于stack exchange，提问作者Sultan Zhumatayev