如何使用React组件替代Keycloak的ftl模板？

• 调整页面结构或新增元素确实需要修改 ftl 模板。Keycloak 使用 FreeMarker 模板（.ftl文件）做服务端页面渲染，它除了定义页面结构外，还承载了服务端参数注入、流程逻辑绑定等核心功能，只改CSS无法满足结构调整需求。
• 要判断ftl内容能否删除，先认准几类绝对不能动的核心内容：
  • 所有用${}包裹的服务端注入变量，比如${url.loginAction}表单提交地址、${error}报错信息输出位、${state}授权流程参数等，删除会直接导致功能失效
  • 表单内的所有隐藏字段，这类是OIDC授权、用户校验流程的核心参数，删除会直接打断登录、注册等核心流程
  • ID前缀为kc-的元素，Keycloak内置的JS逻辑、校验规则大多依赖这些ID绑定事件，除非你自行重写对应逻辑，否则不要删除或修改ID属性
    可以放心调整的内容包括纯静态装饰元素、不需要的功能模块代码，比如你不需要第三方登录就可以删掉遍历第三方登录配置的整块代码，不需要记住密码功能就删掉对应复选框的代码块，调整前建议先备份原模板，每次小范围修改后测试功能是否正常，避免出错。
• 学习ftl模板修改的路径很清晰：先熟悉Keycloak主题的目录结构，搞清楚登录、账号页、管理控制台等不同场景对应的模板文件作用，再学习FreeMarker的基础语法，看懂<#if>、<#list>这类常用控制标签的作用，就能轻松读懂绝大多数模板逻辑。
• 可以用JavaScript/React替代ftl的渲染能力，常用的有两种方案：
  • 轻量改造方案：保留ftl作为入口文件，在ftl中将需要用到的服务端参数挂载到window全局对象上，比如<script>window.KC_CONFIG = { loginAction: '${url.loginAction}', state: '${state}' }</script>，之后引入你打包好的React/JS bundle，所有页面渲染、交互逻辑都交给前端框架处理即可，改造成本很低
  • 完全替换方案：自己开发独立的前端应用，所有登录、注册、忘记密码等逻辑都直接调用Keycloak的开放API实现，完全不用依赖Keycloak自带的ftl页面，这种方案自定义程度最高，但开发量更大，需要自行实现所有Keycloak自带的前端交互逻辑。

内容的提问来源于stack exchange，提问作者João Sá