自定义CAS服务器Authy多因素认证流程时，手机号输入页面渲染失败求助

看起来你遇到的是Thymeleaf模板绑定的问题，从报错信息来看，核心是th:field="*{phoneNumber}"这个处理器执行失败了——你试图把输入框绑定到一个String类型变量的phoneNumber属性上，但String本身并没有这个属性，所以Thymeleaf找不到对应字段，直接导致页面渲染出错。

下面给你两种解决方案，你可以根据场景选择：

快速修复：直接调整Thymeleaf模板绑定逻辑 #

你当前在WebFlow里创建的phoneNumber是String类型的Flow变量，但Thymeleaf的th:object+th:field写法是用来绑定对象属性的，不适合直接绑定简单类型。你可以去掉th:object，直接绑定变量值：

修改你的phoneNumberEntry.html表单部分：

<form method="post" id="fm1" th:action="@{/login}">
    <!-- 保留原有隐藏字段，修正事件ID参数 -->
    <input type="hidden" name="_eventId" th:value="${T(org.apereo.cas.web.flow.CasWebflowConstants).TRANSITION_ID_SUBMIT}" />
    <input type="hidden" name="execution" th:value="${flowExecutionKey}" />
    <input type="hidden" name="geolocation" />

    <!-- 错误提示区域保持不变 -->

    <div class="cas-field form-group my-3 mdc-input-group d-flex">
        <div class="mdc-input-group-field mdc-input-group-field-append">
            <div class="d-flex caps-check">
                <label for="phoneNumber"
                       class="mdc-text-field mdc-text-field--outlined control-label mdc-text-field--with-trailing-icon">
                    <!-- label内部结构不变 -->
                    <input class="mdc-text-field__input form-control pwd"
                           type="text"
                           name="phoneNumber"
                           id="phoneNumber"
                           th:value="${phoneNumber}"
                           size="25"
                           autocomplete="off" required />
                </label>
            </div>
        </div>
        <!-- 按钮区域保持不变 -->
    </div>
</form>

这里做了两个关键调整：

1. 去掉th:object="${phoneNumber}"，改用th:value="${phoneNumber}"直接绑定Flow里的String变量
2. 把_eventId_submit改成标准的_eventId，值对应WebFlow里的submit事件（用CAS内置常量更稳妥）

更规范的方案：使用表单DTO对象绑定 #

如果后续需要扩展表单字段，建议创建专门的表单数据传输对象（DTO），这样更符合Spring WebFlow的规范：

1. 创建表单DTO类

package com.your.package; // 替换成你的实际包名

public class PhoneNumberForm {
    private String phoneNumber;

    // 必须提供无参构造方法（Spring WebFlow初始化需要）
    public PhoneNumberForm() {}

    // Getter和Setter
    public String getPhoneNumber() {
        return phoneNumber;
    }

    public void setPhoneNumber(String phoneNumber) {
        this.phoneNumber = phoneNumber;
    }
}

2. 修改WebFlow配置
   在AuthyMultifactorWebflowConfigurer的doInitialize方法里，替换原来的String变量为这个DTO：

// 替换原来的createFlowVariable(flow, "phoneNumber", String.class);
createFlowVariable(flow, "phoneNumberForm", PhoneNumberForm.class);

// 调整视图状态的模型绑定
val phoneNumberProperties = CollectionUtils.wrapList("phoneNumber");
val phoneNumberBinder = createStateBinderConfiguration(phoneNumberProperties);
val phoneNumberEntryState = createViewState(flow, "phoneNumberEntryState", "phoneNumberEntry", phoneNumberBinder);
// 替换原来的createStateModelBinding(phoneNumberEntryState, "phoneNumber", String.class);
createStateModelBinding(phoneNumberEntryState, "phoneNumberForm", PhoneNumberForm.class);

3. 更新Thymeleaf模板
   把表单的th:object指向新的DTO对象：

<form method="post" id="fm1" th:action="@{/login}" th:object="${phoneNumberForm}">
    <!-- 隐藏字段修正事件ID -->
    <input type="hidden" name="_eventId" th:value="${T(org.apereo.cas.web.flow.CasWebflowConstants).TRANSITION_ID_SUBMIT}" />
    <input type="hidden" name="execution" th:value="${flowExecutionKey}" />
    <input type="hidden" name="geolocation" />

    <!-- 错误提示区域保持不变 -->

    <div class="cas-field form-group my-3 mdc-input-group d-flex">
        <div class="mdc-input-group-field mdc-input-group-field-append">
            <div class="d-flex caps-check">
                <label for="phoneNumber"
                       class="mdc-text-field mdc-text-field--outlined control-label mdc-text-field--with-trailing-icon">
                    <!-- label内部结构不变 -->
                    <input class="mdc-text-field__input form-control pwd"
                           type="text"
                           name="phoneNumber"
                           id="phoneNumber"
                           th:field="*{phoneNumber}"
                           size="25"
                           autocomplete="off" required />
                </label>
            </div>
        </div>
        <!-- 按钮区域保持不变 -->
    </div>
</form>

4. 调整你的phoneNumberEntryAction
   确保Action能正确获取DTO对象：

public class PhoneNumberEntryAction implements Action {
    @Override
    public Event execute(RequestContext context) throws Exception {
        PhoneNumberForm form = context.getFlowScope().get("phoneNumberForm", PhoneNumberForm.class);
        String phoneNumber = form.getPhoneNumber();
        
        // 这里写你的手机号验证/发送验证码逻辑
        if (isValidPhoneNumber(phoneNumber)) {
            return new Event(this, CasWebflowConstants.TRANSITION_ID_SUCCESS);
        } else {
            // 添加错误信息到视图
            context.getMessageContext().addMessage(new MessageBuilder().error().code("phoneNumber.invalid").build());
            return new Event(this, CasWebflowConstants.TRANSITION_ID_ERROR);
        }
    }

    private boolean isValidPhoneNumber(String phoneNumber) {
        // 实现你的手机号校验逻辑
        return phoneNumber != null && phoneNumber.matches("^\\+?[0-9]{10,15}$");
    }
}

额外注意点 #

• 确保phoneNumberEntry.html放在CAS能识别的视图路径下（比如src/main/resources/templates/）
• 检查WebFlow里的事件ID和表单_eventId是否完全匹配，CAS内置的TRANSITION_ID_SUBMIT值就是submit，别写错

备注：内容来源于stack exchange，提问作者R3dSh4d0vv