如何获取Vaadin Flow LoginForm中输入的用户名密码？无法直接获取时如何扩展该组件

标准实现（无需扩展组件） #

Vaadin 官方的 LoginEvent 事件对象本身已经内置了用户名、密码的获取方法，不需要额外扩展组件，直接调用对应方法即可取值，你可以按以下方式实现 authenticate 方法：

private boolean authenticate(LoginEvent e) {
    // 直接从登录事件中获取用户输入的凭证
    String username = e.getUsername();
    String password = e.getPassword();
    
    // 此处替换为你自己的身份校验逻辑，比如调用认证接口、比对数据库存储的用户信息
    // 以下为示例校验逻辑
    return "testUser".equals(username) && "testPasswd".equals(password);
}

这是 Vaadin 官方推荐的标准用法，90% 以上的常规登录场景都可以直接用该方式实现，无需修改 LoginForm 组件本身。

扩展LoginForm组件的实现方案 #

如果你有特殊需求，比如需要在登录表单追加验证码、记住我等自定义字段，才需要扩展 LoginForm 组件，步骤如下：

• 继承LoginForm创建自定义组件，追加你需要的自定义字段
• 编写自定义认证方法，同时获取默认的用户名密码和自定义字段值
• 在登录监听器中调用自定义的认证方法即可
  示例代码如下：

// 自定义登录表单组件
public class CustomLoginForm extends LoginForm {
    // 追加自定义字段：验证码输入框
    private TextField captchaField = new TextField("验证码");
    
    public CustomLoginForm() {
        super();
        // 将自定义字段添加到默认登录表单中
        add(captchaField);
    }
    
    // 自定义认证方法
    public boolean authenticate(LoginEvent e) {
        String username = e.getUsername();
        String password = e.getPassword();
        String captcha = captchaField.getValue();
        
        // 自定义校验逻辑：先校验验证码，再校验账号密码
        if (!"6666".equals(captcha)) {
            return false;
        }
        return "admin".equals(username) && "admin123".equals(password);
    }
}

调用自定义组件的示例：

CustomLoginForm component = new CustomLoginForm();
component.addLoginListener(e -> {
    boolean isAuthenticated = component.authenticate(e);
    if (isAuthenticated) {
        navigateToMainPage();
    } else {
        component.setError(true);
    }
});
add(component);

内容的提问来源于stack exchange，提问作者nick