如何对Keycloak登录主题使用Vuetify
如何对Keycloak登录主题使用Vuetify
提问于 2020-10-31 01:45:07
我对web开发还是个新手，所以我可能会有一些非常基本的误解。
我想要做的是：
我们使用Keycloak来管理对web应用程序的访问。该应用程序是使用Vuetify的Vue项目。为了实现统一的外观，我还想使用Vuetify来设计登录的Keycloak主题。
下面是屏幕设计：
到目前为止，我所做的是：
我创建了文件夹keycloak/themes/my-theme，并添加了以下文件：
我从基本主题中提取了两个ftl文件，然后尝试用Vuetify类重写登录。
为此，我检查了Vuetify文档中我想要的元素的代码，并将它们处理成login.ftl。虽然这对Log In按钮或多或少有效，但对于输入似乎是完全错误的。
下面是它看起来的样子：
这种错位可能可以通过大量的微调来修复，但有一件事我不知道该怎么做，那就是当我单击文本输入时，它们不会被激活。
我非常确定从开发人员工具中复制代码是错误的。有没有办法用Vuetify设计一个Keycloak主题？而不是复制Vuetify代码？
这是当前的login.ftl
<#import "template.ftl" as layout>
<@layout.registrationLayout displayInfo=social.displayInfo displayWide=(realm.password && social.providers??); section>
<#if section = "header">
${msg("loginWelcomeMessage")}
<#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!}">
<div class="v-input rom__text--darkblue theme--light v-text-field v-text-field--is-booted v-text-field--enclosed v-text-field--outlined v-text-field--placeholder">
<div class="v-input__control">
<div class="v-input__slot">
<div class="v-input__prepend-inner">
<div class="v-input__icon v-input__icon--prepend-inner"><i aria-hidden="true" class="v-icon notranslate fas fa-user-circle theme--light"></i></div>
</div>
<fieldset aria-hidden="true">
<legend style="width: 188.25px;"><span></span></legend>
</fieldset>
<div class="v-text-field__slot">
<label for="username" class="v-label v-label--active" style="left: -28px; right: auto; position: absolute;">
${msg("usernameOrEmail")}
</label>
<#if usernameEditDisabled??>
<input tabindex="1" id="username" placeholder="Ihr Nutzername" type="text" value="${(login.username!'')}" type="text" disabled>
<#else>
<input tabindex="1" id="username" placeholder="Ihr Nutzername" type="text">
</#if>
</div>
</div>
<div class="v-text-field__details">
<div class="v-messages theme--light">
<div class="v-messages__wrapper"></div>
</div>
</div>
</div>
</div>
</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!} align-center justify-center">
<input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
<button tabindex="4" name="login" id="kc-login" type="submit" class=" align-center justify-center v-btn rom__darkblue rom__text--white elevation-2 v-size--large">
<i class="v-icon v-icon--left fas fa-sign-in-alt"></i>
${msg("doLogIn")}
</button>
</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 && !registrationDisabled??>
<div id="kc-registration">
<span>${msg("noAccount")} <a tabindex="6" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
</div>
</#if>
</#if>
</@layout.registrationLayout>回答 1
Stack Overflow用户
发布于 2020-10-31 05:40:24
看起来你只是在使用Vuetify样式。我会尝试使用带有top元素的Vue：
new Vue({
el: "#kc-form",
vuetify: new Vuetify(),
...然后我将使用Vuetify创建所有输入，例如username：
<v-text-field label="Username or email" id="username" />但是你需要模仿那些原始的HTML输入，所以你还需要添加一些参数，例如name -我会使用mounted来表示- naive实现：
mounted() {
document.getElementById("username").setAttribute("name", "username")
}它可能还需要更改布局模板和更多的调整，以具有朴素的Vuetify感觉和完整的Keycloak功能。如果你在GitHub上分享你的结果(即使是不完整的)，那将是很好的。
概念验证：https://github.com/jangaraj/vuetify-keycloak-theme/：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64613405
复制相关文章
相似问题
腾讯云开发者
