如何通过更改Keycloak中的新密码字段值来更改密码确认字段值？答案

【问题标题】：how to change password-confirm field value by changing password-new field value in Keycloak?如何通过更改Keycloak中的新密码字段值来更改密码确认字段值？
【发布时间】：2022-12-23 22:50:04
【问题描述】：

我必须定制登录更新密码.ftl默认情况下它显示两个字段新密码和确认密码字段。要求是仅显示新密码字段。当我删除确认密码字段时，它不起作用，因为后端 api 需要这两个值。现在，我必须隐藏确认密码字段并通过在新密码字段中输入数据来更改它的值。我想知道如何做到这一点。我附上下面的代码：

登录更新密码.ftl

<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('password','password-confirm'); section>
    <#if section = "header">
        ${msg("updatePasswordTitle")}
    <#elseif section = "form">
        <form id="kc-passwd-update-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
            <input type="text" id="username" name="username" value="${username}" autocomplete="username"
                   readonly="readonly" style="display:none;"/>
            <input type="password" id="password" name="password" autocomplete="current-password" style="display:none;"/>

            <div class="${properties.kcFormGroupClass!}">
                <div class="${properties.kcLabelWrapperClass!}">
                    <label for="password-new" class="${properties.kcLabelClass!}">${msg("passwordNew")}</label>
                </div>
                <div class="${properties.kcInputWrapperClass!}">
                    <input type="password" id="password-new" name="password-new" class="${properties.kcInputClass!}"
                           autofocus autocomplete="new-password"
                           aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
                    />

                    <#if messagesPerField.existsError('password')>
                        <span id="input-error-password" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
                            ${kcSanitize(messagesPerField.get('password'))?no_esc}
                        </span>
                    </#if>
                </div>
            </div>

            <div class="${properties.kcFormGroupClass!}">
                <div class="${properties.kcLabelWrapperClass!}">
                    <label for="password-confirm" class="${properties.kcLabelClass!}">${msg("passwordConfirm")}</label>
                </div>
                <div class="${properties.kcInputWrapperClass!}">
                    <input type="password" id="password-confirm" name="password-confirm"
                           class="${properties.kcInputClass!}"
                           autocomplete="new-password"
                           aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
                    />

                    <#if messagesPerField.existsError('password-confirm')>
                        <span id="input-error-password-confirm" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
                            ${kcSanitize(messagesPerField.get('password-confirm'))?no_esc}
                        </span>
                    </#if>

                </div>
            </div>

            <div class="${properties.kcFormGroupClass!}">
                <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
                    <div class="${properties.kcFormOptionsWrapperClass!}">
                        <#if isAppInitiatedAction??>
                            <div class="checkbox">
                                <label><input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" checked> ${msg("logoutOtherSessions")}</label>
                            </div>
                        </#if>
                    </div>
                </div>

                <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
                    <#if isAppInitiatedAction??>
                        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
                        <button class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" type="submit" name="cancel-aia" value="true" />${msg("doCancel")}</button>
                    <#else>
                        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
                    </#if>
                </div>
            </div>
        </form>
    </#if>
</@layout.registrationLayout>

【问题讨论】：

标签： keycloak

【解决方案1】：

这是一种粗略的方法，但您可以简单地通过style="display: none;" 隐藏密码确认的包装 div，并添加一个 javascript 事件处理程序（请参阅https://www.w3schools.com/tags/ev_onblur.asp），将不可见的确认输入设置为与密码输入相同的值。

但是说真的，你应该重新协商这个要求，因为在你有这样的功能的地方你都有一个确认输入的原因是很容易输入密码然后用户被锁定。

【讨论】：

commonly agreed 更好的用户体验是让用户选择密码而不需要确认。对于用户输入密码错误的情况，会出现“忘记密码”流程。

【解决方案2】：

这是 keycloak 20.0.2 的完整解决方法示例。

在您的自定义主题中，将以下内容添加到文件顶部的login/register-user-profile.ftl：

<!--
  * we hide the password-confirm field and fill it together with the password field.
-->
<script type="text/javascript">
  function updatePasswordConfirmField(pw) {
    var confirm = document.getElementById('password-confirm');
    confirm.value = pw;
  }
</script>

在同一文件中搜索 id="password" 以找到密码输入字段并添加 onchange 属性：

<input type="password" id="password"
  <!-- ... -->
  onchange="updatePasswordConfirmField(this.value)"
/>

仍然在同一个文件中搜索 id="password-confirm"。从那里找到包含标签和密码确认字段的div，并将style="display: none;"添加到其中：

<div class="${properties.kcFormGroupClass!}" style="display: none;">

这应该可以修复用户体验——但当然我们更愿意 keycloak 提供开箱即用的用户体验。

【讨论】：