如何在Keycloak自定义注册表单中提取URL自定义参数？

这个需求完全可以实现，下面提供两种可靠的解决方法：

方法一：利用Keycloak主题上下文直接获取（推荐） #

Keycloak会自动将注册URL中的查询参数传递到主题模板的上下文里，不需要写任何JavaScript，直接在FTL文件中通过url.queryParam对象获取参数值。

示例代码（register.ftl） #

<!-- 方式1：添加隐藏字段，提交注册时将参数带回Keycloak -->
<input type="hidden" name="custom_param" value="${url.queryParam['custom_param']!''}" />

<!-- 方式2：在表单中显示参数值（比如只读输入框） -->
<div class="form-group">
    <label for="customParam">自定义参数</label>
    <input type="text" id="customParam" class="form-control" readonly value="${url.queryParam['custom_param']!''}" />
</div>

• ${url.queryParam['custom_param']!''} 中的!''是Freemarker的默认值语法，确保当参数不存在时不会抛出异常，而是显示空字符串。
• 这种方法是服务器端传递参数，比前端JS更安全，也不需要依赖客户端环境。

方法二：前端JavaScript提取参数 #

如果需要用前端逻辑处理参数，你之前的写法有误——Freemarker不会阻止你在<script>标签中写JS，但不能在脚本内部混用Freemarker指令（比如<#assign>）。正确的写法如下：

示例代码（register.ftl） #

<!-- 先定义表单字段 -->
<div class="form-group">
    <label for="customParam">自定义参数</label>
    <input type="text" id="customParam" name="custom_param" class="form-control" />
</div>

<!-- 编写JS脚本提取参数并赋值 -->
<script>
  // 解析URL查询参数
  const urlParams = new URLSearchParams(window.location.search);
  const customParamValue = urlParams.get('custom_param');
  
  // 将参数值设置到表单字段中
  if (customParamValue) {
    document.getElementById('customParam').value = customParamValue;
  }
</script>

• 脚本要放在表单字段之后，确保DOM元素已经加载完成；或者用DOMContentLoaded事件包裹逻辑。
• 这种方法适合需要对参数做前端处理（比如格式转换、条件显示）的场景。

额外说明 #

• 确保你的自定义登录主题已经正确配置到Keycloak的Realm中，修改FTL文件后需要清理Keycloak缓存（或重启服务）才能生效。
• 如果需要将这个参数保存到用户属性中，还需要在Keycloak后台配置对应的用户属性，并在表单中确保字段name属性和配置的属性名一致。

内容的提问来源于stack exchange，提问作者Vaibhav Kumar