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

Question

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

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

Answer 1

这是我的示例，我如何链接 freemarker 并做出反应：input.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')
);

Answer 2

您可以使用Keycloakify，

披露：我是作者

Answer 3

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

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

并且您无法login.ftl使用需要在 keycloak/theme 文件夹中创建自定义主题的反应组件进行修改。

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

您还可以查看此博客以获得更好的理解链接。