用于前端开发的可插入Keycloak-JS [英] Pluggable Keycloak-JS for Frontend Development

问题描述

我们正在将 Keycloak 与 keycloak-js 结合使用，以保护生产中的Web应用安全.因此，它已深入集成到我们的前端中.要开始开发，我们总是需要启动一个keycloak容器.

We are using Keycloak with keycloak-js to secure our Webapps in Production. So it is deeply integrated into our Frontends. To start development, we always need to start a keycloak container.

在开发期间是否有任何好的方法绕过keycloak-js并摆脱keycloak容器?
当前的方法是在 NODE_ENV 上启用功能.
您对此有何看法?

Is there any good way to bypass keycloak-js and get rid of the keycloak container during dev?
The current approach is a feature toggle on NODE_ENV.
What do you think about that?

推荐答案

就目前而言，我使用 webpack.DefinePlugin 找到了一个很好的解决方案.我定义一个 MYAPP_PRODUCTION 变量，并在构建过程中通过Webpack替换它.如果 MYAPP_PRODUCTION 为false，则覆盖我的keycloak对象/导出并模拟所需的函数.

For now, i found a quite good solution using the webpack.DefinePlugin. I define a MYAPP_PRODUCTION variable and replace it via Webpack in the build process. If MYAPP_PRODUCTION is false override my keycloak object/export and mock the required functions.

Webpack配置:
更多信息: https://webpack.js.org/plugins/define-plugin/

Webpack config:
more infos: https://webpack.js.org/plugins/define-plugin/

new webpack.DefinePlugin({
  MYAPP_PRODUCTION: JSON.stringify(true),
  ...
}

在应用程序自举之内

// sourcecode
if(!MYAPP_PRODUCTION) {
  // mock keycloak here
}

生产模式下的已编译输出将不包含if子句中的语句. webpack将自动省略条件性内容，因为 if(！true){...} 永远不会是真的.

the compiled output in production mode will not include the statements inside the if-clause. webpack will automatically omit the conditional stuff because if (!true) { ... } will never be true.

这篇关于用于前端开发的可插入Keycloak-JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！