authentication - Vaadin 登录界面

Question

我对 java 和 vaadin 都很陌生。希望能够获得一些关于如何改进我的代码的好建议。 我想重写下面的代码以使用 Vaadin´s -> LoginOverlay 而不是下面的代码。

正如我所说，我正在努力学习，因此我使用了此示例的代码:https://www.youtube.com/watch?v=oMKks5AjaSQ&t=1158s

但是，LoginOverlay 似乎是显示其登录部分的更好方法。如本例所示:https://www.youtube.com/watch?v=pteip-kZm4M

所以我的问题是如何将下面的代码编写为 LoginOverlay。

public class LoginView extends Div {

public LoginView(AuthService authService) {
    setId("login-view");
    var username = new TextField("Username");
    var password = new PasswordField("Password");
    add(
            new H1("Welcome"),
            username,
            password,
            new Button("Login", event -> {
                try {
                    authService.authenticate(username.getValue(), password.getValue());
                    UI.getCurrent().navigate("home");
                } catch (AuthService.AuthException e) {
                    Notification.show("Wrong credentials.");
                }
            }),
             new RouterLink("Register", RegisterView.class)
    );
}

}

我到目前为止只是为了转换代码。

对代码新部分的澄清。该代码不起作用。 loginOverlay.addLoginListener 部分(事件 -> 可能需要以不同的方式编写。 我正在使用 IntelliJ 2020.3.4 如果这有任何帮助的话。

public class LoginView2 extends Composite<LoginOverlay> {

public LoginView2(AuthService authService) {
    setId("login-view");

    LoginOverlay loginOverlay = getContent();
    loginOverlay.setTitle("Welcom");
    loginOverlay.setDescription("Manage your business tasks");
    loginOverlay.setOpened(true);

    loginOverlay.addLoginListener(event -> {try {
        if(authService.authenticate(username.getValue(), password.getValue());
                    UI.getCurrent().navigate("home");
                } catch (AuthService.AuthException e) {
                    Notification.show("Wrong credentials.");
                }
            }),
             new RouterLink("Register", RegisterView.class);
      }
    }
}

}

非常感谢您提供的所有帮助。 非常感谢让 stackoverflow 如此精彩的所有人。

Answer 1

复制粘贴代码片段而不知道代码的作用会导致灾难，尤其是在安全方面。

您的代码中存在各种错误:大括号放错位置、使用不存在的变量以及 RouterLink 远离其所属位置。

我知道你必须从某个地方开始。我建议从实际编译的代码开始，然后逐渐添加内容，在每一步中测试到目前为止所拥有的内容。

以下是针对 LoginView2 的一些提示:

1. 删除整个 loginOverlay.addLoginListener(...) 代码，包括 authService.authenticate 调用和 RouterLink。确保您此时可以运行应用程序，并且可以看到登录界面。
2. 重新添加登录监听器，但现在仅在其中显示通知。测试您是否可以运行该应用程序，并且如果您单击登录，则会显示您的通知。

loginOverlay.addLoginListener(event -> {
    Notification.show("This is working");
});

实现身份验证。您在 if 语句内调用了 authService.authenticate(...)，但该方法不返回任何内容。相反，如果身份验证失败，它会抛出异常，因此会引发 try-catch。这意味着在 try { ... } block 内，您在 authService.authenticate(...) 调用之后放置的任何代码仅在未抛出异常时才会执行异常，即身份验证成功。

没有用户名或密码变量。第一个 YouTube 视频以文本字段的形式定义了这些变量。通过登录覆盖层，它会为您创建这些字段，那么您如何从中获取相应的值？