- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我创建自定义 keycloak 登录屏幕。
我从keycloak网页下载
Server Standalone server distribution
然后从keycloak-8.0.2\themes\keycloak
复制到C:\xx\configuration\keycloak\theme\my-theme
然后我打开 login
文件夹,然后我有
- theme.properties
- resources
在资源中,我更改了 login.css
一切正常,我可以更改颜色、img 等...
直到现在,在文件夹 login
中我没有 login.ftl
,我从 keycloak
下载的文件中复制了一个。但是现在,当我尝试加载我的页面时,我得到了
This page isn’t working
localhost.test.net is currently unable to handle this request.
HTTP ERROR 500
如果我删除这个文件,一切正常。
我需要这个文件来改变html中的一些东西
这里是theme.properties
文件
parent=base
import=common/keycloak
styles=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/zocial/zocial.css css/login.css
meta=viewport==width=device-width,initial-scale=1
kcHtmlClass=login-pf
kcLoginClass=login-pf-page
kcLogoLink=http://www.keycloak.org
kcLogoClass=login-pf-brand
kcContainerClass=container-fluid
kcContentClass=col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3
kcContentWrapperClass=row
kcHeaderClass=login-pf-page-header
kcFeedbackAreaClass=col-md-12
kcLocaleClass=col-xs-12 col-sm-1
kcAlertIconClasserror=pficon pficon-error-circle-o
kcFormAreaClass=col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2
kcFormCardClass=card-pf
kcFormCardAccountClass=login-pf-accounts
kcFormSocialAccountClass=login-pf-social-section
kcFormSocialAccountContentClass=col-xs-12 col-sm-6
kcFormSocialAccountListClass=login-pf-social list-unstyled login-pf-social-all
kcFormSocialAccountDoubleListClass=login-pf-social-double-col
kcFormSocialAccountListLinkClass=login-pf-social-link
kcFormHeaderClass=login-pf-header
kcFeedbackErrorIcon=pficon pficon-error-circle-o
kcFeedbackWarningIcon=pficon pficon-warning-triangle-o
kcFeedbackSuccessIcon=pficon pficon-ok
kcFeedbackInfoIcon=pficon pficon-info
kcFormClass=form-horizontal
kcFormGroupClass=form-group
kcFormGroupErrorClass=has-error
kcLabelClass=control-label
kcLabelWrapperClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
kcInputClass=form-control
kcInputWrapperClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
kcFormOptionsClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
kcFormButtonsClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
kcFormSettingClass=login-pf-settings
kcTextareaClass=form-control
kcSignUpClass=login-pf-signup
kcInfoAreaClass=col-xs-12 col-sm-4 col-md-4 col-lg-5 details
##### css classes for form buttons
# main class used for all buttons
kcButtonClass=btn
# classes defining priority of the button - primary or default (there is typically only one priority button for the form)
kcButtonPrimaryClass=btn-primary
kcButtonDefaultClass=btn-default
# classes defining size of the button
kcButtonLargeClass=btn-lg
kcButtonBlockClass=btn-block
##### css classes for input
kcInputLargeClass=input-lg
##### css classes for form accessability
kcSrOnlyClass=sr-only
这是login.ftl
<#import "template.ftl" as layout>
<@layout.registrationLayout displayInfo=social.displayInfo displayWide=(realm.password && social.providers??); section>
<#if section = "header">
${msg("doLogIn")}
<#elseif section = "form">
<div id="kc-form" <#if realm.password && social.providers??>class="${properties.kcContentWrapperClass!}"</#if>>
<div id="kc-form-wrapper" <#if realm.password && social.providers??>class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}"</#if>>
<#if realm.password>
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<div class="${properties.kcFormGroupClass!}">
<label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
<#if usernameEditDisabled??>
<input tabindex="1" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" type="text" disabled />
<#else>
<input tabindex="1" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" type="text" autofocus autocomplete="off" />
</#if>
</div>
<div class="${properties.kcFormGroupClass!}">
<label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
<input tabindex="2" id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="off" />
</div>
<div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
<div id="kc-form-options">
<#if realm.rememberMe && !usernameEditDisabled??>
<div class="checkbox">
<label>
<#if login.rememberMe??>
<input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox" checked> ${msg("rememberMe")}
<#else>
<input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox"> ${msg("rememberMe")}
</#if>
</label>
</div>
</#if>
</div>
<div class="${properties.kcFormOptionsWrapperClass!}">
<#if realm.resetPasswordAllowed>
<span><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
</#if>
</div>
</div>
<div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
<input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
<input tabindex="4" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
</div>
</form>
</#if>
</div>
<#if realm.password && social.providers??>
<div id="kc-social-providers" class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}">
<ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 4>${properties.kcFormSocialAccountDoubleListClass!}</#if>">
<#list social.providers as p>
<li class="${properties.kcFormSocialAccountListLinkClass!}"><a href="${p.loginUrl}" id="zocial-${p.alias}" class="zocial ${p.providerId}"> <span>${p.displayName}</span></a></li>
</#list>
</ul>
</div>
</#if>
</div>
<#elseif section = "info" >
<#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
<div id="kc-registration">
<span>${msg("noAccount")} <a tabindex="6" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
</div>
</#if>
</#if>
</@layout.registrationLayout>
最佳答案
Keycloak 的服务器开发人员 guide建议您在创建主题时先扩展现有主题。
所以我为我的新主题创建了一个项目目录:
mkdir serendipity-keycloak-theme
启动 Keycloak Docker 镜像:
cd serendipity-keycloak-theme
docker run -d --name keycloak \
-p 10001:8080 \
-v ~/workspace/Robinyo/serendipity-keycloak-theme:/serendipity-keycloak-theme \
-e KEYCLOAK_USER=admin \
-e KEYCLOAK_PASSWORD=secret \
jboss/keycloak:9.0.2
然后我复制了默认的 Keycloak 主题:
docker cp keycloak:/opt/jboss/keycloak/themes/keycloak ./theme
例如:
├── /serendipity-keycloak-theme
└── /theme
└── /account
└── /admin
└── /common
└── /email
└── /login
└── /resources
└── /css
└── /img
├── theme.properties
└── /welcome
Keycloak 的服务器开发人员 guide还建议您在创建主题时应禁用缓存,以便您可以在进行更改时预览更改。
所以我复制了 Keycloak Docker 镜像的 standalone-ha.xml:
docker cp keycloak:/opt/jboss/keycloak/standalone/configuration/standalone-ha.xml .
并更新如下:
<theme>
<staticMaxAge>-1</staticMaxAge>
<cacheThemes>false</cacheThemes>
<cacheTemplates>false</cacheTemplates>
...
</theme>
Keycloak 使用以 FreeMarker 模板语言 (FTL) 编写的模板来生成 HTML。
Keycloak 的服务器开发人员 guide建议您在创建自定义模板时,从 base theme 中复制模板到您自己的主题,然后应用您需要的修改。
例如:
├── /serendipity-keycloak-theme
└── /theme
└── /account
└── /admin
└── /email
└── /login
└── /messages
└── /resources
└── /css
└── /img
└── /js
├── login.ftl
├── template.ftl
├── theme.properties
└── /welcome
我从基本主题中复制了类别模板 (template.ftl) 和登录模板 (login.ftl) 并更新它们以使用 MDC Web 组件,例如:
<#-- login.ftl -->
...
<div class="${properties.kcFormGroupClass!}">
<div class="mdc-text-field mdc-text-field--with-leading-icon ${properties.kcLabelClass!} <#if usernameEditDisabled??>mdc-text-field--disabled</#if>">
<i class="material-icons mdc-text-field__icon" role="button">person</i>
<input tabindex="0" required id="username" class="mdc-text-field__input ${properties.kcInputClass!}" name="username" value="${(login.username!'')}" type="text" autofocus autocomplete="off" <#if usernameEditDisabled??>disabled</#if>>
<div class="mdc-line-ripple"></div>
<label for="username" class="mdc-floating-label ${properties.kcLabelClass!}">
<#if !realm.loginWithEmailAllowed>
${msg("username")}
<#elseif !realm.registrationEmailAsUsername>
${msg("usernameOrEmail")}
<#else>
${msg("email")}
</#if>
</label>
</div>
</div>
...
登录页面:
引用:
关于Keycloak自定义主题拒绝登录.ftl,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60187945/
我已将 Keycloak 设置为 SAML 代理,身份验证由当局提供的外部 IdP 完成。使用此 IdP 登录的用户都被接受,我们需要从 Keycloak 获得一个 OAuth token 来访问我们
我在 master 有一个服务帐号领域。来自 admin-cli我要分配服务帐号master-realm-client管理员角色。我怎样才能做到这一点。 kcadm.sh add-roles -r m
在 Keycloak 中,是否可以对同一领域中的所有客户端仅进行一次登录?我已经以这种方式配置了服务器(从管理控制台): - 创建一个新领域(我们称之为 MyRealm); - 创建两个不同的客户端(
我们的团队正在开发一个集成到 Keycloak 中的项目。我们创建了一个自定义领域,例如 ProjectX ,并使其上的自定义主题能够应用于 Keycloak 的登录页面。 由于我们的主题应用于领域
Keycloak 是一个很棒的工具,但它缺乏适当的文档。 所以我们有 Realm.roles、Client.roles 和 User.roles 使用特定客户端访问应用程序时,这 3 者如何协同工作?
我们的团队正在开发一个集成到 Keycloak 中的项目。我们创建了一个自定义领域,例如 ProjectX ,并使其上的自定义主题能够应用于 Keycloak 的登录页面。 由于我们的主题应用于领域
有没有办法让所有用户在 keycloak 中创建自定义用户属性(如电话号码)? 最佳答案 您可以创建一个组并向其添加一个属性。 然后将该组设置为默认组。这样,所有用户都可以使用设置为组的属性 关于ke
我还尝试了 Web 来源和有效重定向 URI 的所有不同组合 我通过 keycloak 登录,它不断地在我的本地主机应用程序和这个 url 之间来回重定向我:http://localhost:4200
在 Keycloak's documentation ,据说为了部署提供程序,我可以 copy your provider jar to the Keycloak deploy/ directory,
目前,我使用此端点一次将用户添加到一个组: PUT /{realm}/users/{id}/groups/{groupId} 在我的用例中,批量执行影响是有益的,到目前为止我还没有找到这样做的记录方式
目前,我使用此端点一次将用户添加到一个组: PUT /{realm}/users/{id}/groups/{groupId} 在我的用例中,批量执行影响是有益的,到目前为止我还没有找到这样做的记录方式
我一直在尝试在 docker-compose 文件中使用 jboss/keycloak-mysql 来建立 Keycloak 服务器和 mysql 数据库。我在本地部署期间遇到一个问题,告诉我 WEB
我正在使用 Tomcat 适配器运行 Keycloak。但是,当我尝试获取 KeycloakPrincipal 时,它出错了; java.lang.ClassCastException: org.ke
我正在使用 keycloak 4.5.0 v 并创建了一个领域。我已经设置了登录以启用忘记用户名和验证电子邮件。在我输入的电子邮件选项卡中 host - smtp.gmail.com smtp po
我想让我的客户端应用程序从 keycloak 访问用户信息。因此,我在 keycloak 中创建了另一个领域 (myrealm1),并在该领域内创建了一个新客户端 (myclient1)。 key 斗
正如我在此链接中看到的 https://www.keycloak.org/docs/latest/authorization_services/#_overview ,客户端中应该有一个授权选项卡,如
这些 keycloak 端点有什么用? issuer: "http://localhost:8180/auth/realms/dev", authorization_endpoint: "http:/
我们需要将数百个用户从 csv 文件导入 Keycloak。我还没有找到任何现成的导入功能来做到这一点。 有没有人做过任何导入程序或至少有一些框架来构建? REST API 可能是唯一的方法 - 或者
我已经使用 LDAP 用户联盟配置了 Keycloak。当用户想要登录应用程序时,他会被重定向到 Keycloak 登录页面,输入 uid/pwd 并使用 LDAP 绑定(bind)进行身份验证。 这
有没有人在 Keycloak 中使用过 SCIM?如果是这样,你能指出我的文档吗?我用谷歌搜索过,它似乎不是受支持的配置。 最佳答案 不幸的是,Keycloak 尚不支持 SCIM。他们的 Jira
我是一名优秀的程序员,十分优秀!