如何在 keycloak 的 ftl 文件中包含 React js 文件？

Posted 2023-02-19

【中文标题】如何在 keycloak 的 ftl 文件中包含 React js 文件？

【英文标题】：How to include React js file in an ftl file in keycloak?

【发布时间】：2019-08-19 06:26:33

【问题描述】：

我正在尝试使用自定义主题修改 Keycloak 主题的登录页面。我需要重用使用react和Component'设计的主页设计（home.js）。

是否有任何可能的方法将此 js 文件或驻留在另一个 js 文件中的任何其他反应 component 导入我的自定义主题的 Keycloak 的 login.ftl 文件？

【问题讨论】：

如果有正确的答案，请选择一个答案作为解决方案

【参考方案1】：

这是我的示例，我如何链接 freemarker 并做出反应： 输入.ftl

<#assign initialValue ="21/07/2019">

<div class="form-group">
    <div id="flexInput-builder" data-initialValue=$initialValue>
    </div>
</div>

<script type="text/babel" src="/jsx/input-builder.jsx" ></script>

和 input-builder.jsx

class FlexInputBuilder extends React.Component 
  state =  value: '' 

  componentDidMount = () => 
    this.setState(value: this.props.passedValue)
  

  onChangeHandler = (e) => this.setState(value: e.target.value)

  render() 
    const value = this.state;
    return (
      <div>
        <label>
          Pick the date
          <input value=value
                 type='date'
                 className="form-control bg-light"
                 placeholder="pick your date"
                 onChange=this.onChangeHandler
                 id=this.state.id
          />
        </label>
      </div>
    )
  


const elementID = document.getElementById('flexInput-builder');

ReactDOM.render(
  <FlexInputBuilder passedValue=elementID.dataset.initialvalue/>,
  document.getElementById('flexInput-builder')
);

【讨论】：

不要忘记在 root 中包含 react dev lib

能发个教程吗？

@TufisiRadu 有什么不清楚的地方？请多解释

我对 React 不是很熟悉，但是如果我从头开始创建一个 React 项目（使用教程），我最终如何编辑 KC 主题文件？很抱歉不是很清楚，但我不是前端开发人员（我是 Java-DevOps 开发人员）。我只是不知道如何链接文件。

@TufisiRadu 您将您的 react 组件 (jsx) 与 ReactJS 一起添加到您的 ftl 中，就像通常的脚本（如我在回答中所述）一样。在你必须 convert 你的 jsx 到标准 js by webpack 之后（或者你想要的 babel）。之后，您编译了 js 脚本（这是您的 react-component），然后将捆绑包一起提供给客户端

【参考方案2】：

你可以使用Keycloakify，

披露：我是作者

【讨论】：

很高兴看到这个。

【参考方案3】：

对于 keycloak，您需要自定义 keycloak 主题，您可以查看文档链接https://www.keycloak.org/docs/latest/server_development/index.html 我也在做同样的事情，为 react 项目的 keycloack 制作自定义主题我为此制作了主题，你可以查看我仍在研究它，所以现在没有自述文件。

我的 Github 链接仓库： 另一个 Github 链接：https://github.com/Alfresco/alfresco-keycloak-theme

您不能使用 react 组件修改 login.ftl，您需要在 keycloak/theme 文件夹中为其创建自定义主题。

自定义keylock主题有点麻烦，您需要了解第一个免费的制造商模板代码样式。

您也可以查看this blog 以获得更好的理解链接。

【讨论】：

keycloak.org/docs/2.5/server_development/topics/themes.html 不起作用，请更新您的链接