Question

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

是否可以将这个js文件或驻留在另一个js文件中的其他任何反应login.ftl导入到我的自定义主题的Keycloak的{{1}}文件中？

Answer 1

这是我的示例，我如何链接自由标记并做出反应： 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

对于keycloak，您需要自定义keycloak主题，您可以在此处查看文档链接https://www.keycloak.org/docs/2.5/server_development/topics/themes.html 我也正在做同样的事情，为react project的keycloack创建自定义主题，为此我做了一个主题，您可以检查一下我仍在进行此工作，因此暂时没有自述文件。

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

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

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

您也可以查看此博客以获取更好的理解链接enter link description here

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

2 个答案: