A login form is used to process user authentication in a web application.Ccontrary to web pages, web applications could be a complex piece of software and the public nature of the Internet make the user authentication a vital part of any web application. In this example I am going to show you how to implement a login form in Vaadin to protect the secure part of a web application.

1. The tools

• Java JDK 8
• Latest Eclipse Mars
• Vaadin 7.6.4
• Tomcat Server 8

2. Introduction

A login is a special form that collects user credentials and communicates with an authentication mechanism to check the validity of the credentials, then if the credentials are valid the user is routed to a secure area else if the credentials are invalid the page keep asking for a valid input, there are a multiples approach to this problem.

You can define the number of times a user can retry for invalid credentials from a single username, a browser user-agent, an IP, a mac address, cookies and other user guessing identification methods, you can use MD5 to hash your credentials but the security of the MD5 hash function is severely compromised. The best approach nowadays is to use the HTTP over SSL (https) protocol that create a secure channel over an insecure network for your web application. Vaadin offers a navigation mechanism to manage your views, using that I constructed the login form, in older versions of Vaadin have a LoginForm class but from version 7 and up LoginForm is deprecated.

3. Prerequisites

• JDK installed
• Eclipse Mars installed and working
• Vaadin 7.6.4 plugin installed
• Tomcat 8 installed and running

4. Set up the project

In the file menu choose File -> New -> Other:

Now from the list choose Vaadin 7 project:

Hit next and name your project then hit finish.

5. Coding the example

5.1 Mockup Authentication class

Lets create a mockup authentication class that handle the backend authentication with only one user, you can change it to any needed mechanism.

Authentication.java

package com.example.vaadinlogin;public class Authentication {private String username;private String password;public Authentication() {setUsername("myuser");setPassword("mypass");}private void setUsername(String username) {this.username = username;}private String getUsername(){return this.username;}private void setPassword(String password) {this.password = password;}private String getPassword(){return this.password;}public Boolean authenticate(String username, String password){if(username.equals(getUsername()) && password.equals(getPassword())){return true;}return false;}}

This class have two privateString fields for the user and the password, also have the boilerplate setter and getter and a methodpublic Boolean authenticate(String username, String password) that receive two strings as parameters and returns true if the credentials correspond with the mockup user created, here you have space to plug a database or whatever backend you choose to store your users credentials.

5.2 Login Page

Let’s build the login page:

Layout

public class LoginPage extends VerticalLayout implements View {private static final long serialVersionUID = 1L;public static final String NAME = "";

The login page extendsVerticalLayout to place our components and implementsView to use aNavigator, more on this later, and have a fieldNAME to use also in the navigation flow of the application.

Login Panel

Panel panel = new Panel("Login");panel.setSizeUndefined();addComponent(panel);

The fields of the login form are inside aPanel so create the panel and add it to the layout.

Login Form

FormLayout content = new FormLayout();TextField username = new TextField("Username");content.addComponent(username);PasswordField password = new PasswordField("Password");content.addComponent(password);

Inside the panel there is a form with aTextField for the username, aPasswordField that is a special kind of text field that allows to hide the user input, the password field is used for the password, I add both fields to theFormLayout content.

Button Send

Button send = new Button("Enter");send.addClickListener(new ClickListener() {private static final long serialVersionUID = 1L;@Overridepublic void buttonClick(ClickEvent event) {if(VaadinloginUI.AUTH.authenticate(username.getValue(), password.getValue())){VaadinSession.getCurrent().setAttribute("user", username.getValue());getUI().getNavigator().addView(SecurePage.NAME, SecurePage.class);getUI().getNavigator().addView(OtherSecurePage.NAME, OtherSecurePage.class);Page.getCurrent().setUriFragment("!"+SecurePage.NAME);}else{Notification.show("Invalid credentials", Notification.Type.ERROR_MESSAGE);}}});

I created aButton to check the credentials against the mockup authentication class. The button have aClickListener() and when the button is pressed, the following things happen:VaadinloginUI.AUTH.authenticate check the credentials, if the credentials are incorrect aNotification is show, is better not to specify what credential is wrong so is a general message with invalid credentials, if the credentials are correct then set the user in the session to keep logged in between page refresh, next add two more views to the navigator. These view are private and you need to be logged to access them and last redirect the page using setting a uri fragment. In this case the uri fragment correspond to the last part of the uri after the “#” character, so I am using the name defined in the page to navigate to that page.

Add components

content.addComponent(send);content.setSizeUndefined();content.setMargin(true);panel.setContent(content);setComponentAlignment(panel, Alignment.MIDDLE_CENTER);

Add the components to the layout and set the panel alignment to the center as is usual in login forms but you can put it on any place of the page.

5.3 Secure page

The secure page is a page to show the private area behavior, in the private area you can have all the pages you need.

The layout

public class SecurePage extends VerticalLayout implements View {private static final long serialVersionUID = 1L;private Label secure;private Label currentUser;private Button otherSecure;private Button logout;public static final String NAME = "Secure";

As before this page use a vertical layout to put the components, it have two labels and two buttons, the labelcurrentUser is used to show the user logged in the application, it have a button to go to the other secure page and a button to logout.

otherSecure Button

otherSecure = new Button("OtherSecure");otherSecure.addClickListener(new ClickListener() {private static final long serialVersionUID = 1L;@Overridepublic void buttonClick(ClickEvent event) {Page.getCurrent().setUriFragment("!"+OtherSecurePage.NAME);}});

TheotherSecure button is used to navigate to the other private page used in this example, the navigation is done usingPage.getCurrent().setUriFragment("!"+OtherSecurePage.NAME); that change the uri fragment as before.

Logout button

logout = new Button("Logout");logout.addClickListener(new ClickListener() {private static final long serialVersionUID = 1L;@Overridepublic void buttonClick(ClickEvent event) {getUI().getNavigator().removeView(SecurePage.NAME);getUI().getNavigator().removeView(OtherSecurePage.NAME);VaadinSession.getCurrent().setAttribute("user", null);Page.getCurrent().setUriFragment("");}});

The logout button first remove the secure page view withgetUI().getNavigator().removeView(SecurePage.NAME);, remove the other secure page withgetUI().getNavigator().removeView(OtherSecurePage.NAME);, clean the session withVaadinSession.getCurrent().setAttribute("user", null); and clean the uri fragment to change the current page to the login page, removing the views prevent it to be accessible from the navigator.

Place the components

secure = new Label("secure");currentUser = new Label("Current User");addComponent(secure);addComponent(currentUser);addComponent(otherSecure);addComponent(logout);

Add the components to the layout to show them.

enter

@Overridepublic void enter(ViewChangeEvent event) {currentUser.setCaption("Current user : " + VaadinSession.getCurrent().getAttribute("user").toString()); }

This event is always called before the view is shown to the screen, here I get the username from the session and show it in the currentUser label.

5.4 OtherSecure page

OtherSecure page

public class OtherSecurePage extends VerticalLayout implements View{private static final long serialVersionUID = 1L;private Label otherSecure;public static final String NAME = "OtherSecure";private Button mainsecure;public OtherSecurePage() {mainsecure = new Button("Main Secure Area");mainsecure.addClickListener(new ClickListener() {private static final long serialVersionUID = 1L;@Overridepublic void buttonClick(ClickEvent event) {Page.getCurrent().setUriFragment("!"+SecurePage.NAME);}});otherSecure = new Label("Other Secure Page ...");addComponent(otherSecure);addComponent(mainsecure);}@Overridepublic void enter(ViewChangeEvent event) {}}

This page only have one button that send the user to the secure page, is made here to the purpose of show how to handle multiples pages inside the secure area, usually is a better idea to make a navigation menu and inside the navigation menu put all your pages, to avoid make a navigation widget for every page but everything here depends on your design, remember if the design is bad the rest is bad too so a solid rock design is the bullet proof foundation of your program.

5.5 The main UI

Init

public static Authentication AUTH;@Overrideprotected void init(VaadinRequest request) {AUTH = new Authentication();new Navigator(this, this);

Ok here I declared an staticAUTH variable to store an instance of theAuthentication class and create aNavigator(this, this), the navigator is a class that tracks the active view using URI fragments, is in charge of show the current view and store a record and change the other views.

Initial page

getNavigator().addView(LoginPage.NAME, LoginPage.class);getNavigator().setErrorView(LoginPage.class);

Using the navigator, add the login page as a view and set the error page, the error view is a page that is redirected when an error occurs in the application. In this case I used the same login page as an error view, just to no create another dummy page and the login page is public and if any error raise in the application I don’t want a user hanging in the private area, the error page is a design topic, where you need it and how.

Uri fragment listener

Page.getCurrent().addUriFragmentChangedListener(new UriFragmentChangedListener() {@Overridepublic void uriFragmentChanged(UriFragmentChangedEvent event) {router(event.getUriFragment());}});router("");

To know when the uri fragment changes we have this listener so every time the uri fragment is modified the router function is called with the new uri fragment as a parameter, and finally I call the router with a empty string to redirect the page to the login page.

router method

private void router(String route){Notification.show(route);if(getSession().getAttribute("user") != null){getNavigator().addView(SecurePage.NAME, SecurePage.class);getNavigator().addView(OtherSecurePage.NAME, OtherSecurePage.class);if(route.equals("!OtherSecure")){getNavigator().navigateTo(OtherSecurePage.NAME);}else{getNavigator().navigateTo(SecurePage.NAME);}}else{getNavigator().navigateTo(LoginPage.NAME);}}

This router method is in charge of the page flow. Every time the uri changes the application call this method and using the navigator change the page to the correct one. If the user is no logged and try to navigate to an in-existent page this router shows the login page and in the case the user is logged in the the router navigate to the secure page by default, so it checks the session withif(getSession().getAttribute("user") != null). If no user is in the session then show the login page and if the user is in the session navigate to the secure area, this can be done because the session is stored server side and because you are handling the user in the server is safe to navigate in this way. You can use cookies for user authentication too but is not recommended because cookies are stored client side and can be forged by malicious users.

Want to master Vaadin?

Subscribe to our newsletter and download theVaadinProgramming Cookbookright now!

In order to get you prepared for your Vaadin development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

Download NOW!

Thank you!

We will contact you soon.

6. The complete source code

VaadinloginUI.java

package com.example.vaadinlogin;import javax.servlet.annotation.WebServlet;import com.vaadin.annotations.Theme;import com.vaadin.annotations.VaadinServletConfiguration;import com.vaadin.navigator.Navigator;import com.vaadin.server.Page;import com.vaadin.server.Page.UriFragmentChangedEvent;import com.vaadin.server.Page.UriFragmentChangedListener;import com.vaadin.server.VaadinRequest;import com.vaadin.server.VaadinServlet;import com.vaadin.ui.Notification;import com.vaadin.ui.UI;@SuppressWarnings("serial")@Theme("vaadinlogin")public class VaadinloginUI extends UI {@WebServlet(value = "/*", asyncSupported = true)@VaadinServletConfiguration(productionMode = false, ui = VaadinloginUI.class)public static class Servlet extends VaadinServlet {}public static Authentication AUTH;@Overrideprotected void init(VaadinRequest request) {AUTH = new Authentication();new Navigator(this, this);getNavigator().addView(LoginPage.NAME, LoginPage.class);getNavigator().setErrorView(LoginPage.class);Page.getCurrent().addUriFragmentChangedListener(new UriFragmentChangedListener() {@Overridepublic void uriFragmentChanged(UriFragmentChangedEvent event) {router(event.getUriFragment());}});router("");}private void router(String route){Notification.show(route);if(getSession().getAttribute("user") != null){getNavigator().addView(SecurePage.NAME, SecurePage.class);getNavigator().addView(OtherSecurePage.NAME, OtherSecurePage.class);if(route.equals("!OtherSecure")){getNavigator().navigateTo(OtherSecurePage.NAME);}else{getNavigator().navigateTo(SecurePage.NAME);}}else{getNavigator().navigateTo(LoginPage.NAME);}}}

LoginPage.java

package com.example.vaadinlogin;import com.vaadin.navigator.View;import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;import com.vaadin.server.Page;import com.vaadin.server.VaadinSession;import com.vaadin.ui.Alignment;import com.vaadin.ui.Button;import com.vaadin.ui.Button.ClickEvent;import com.vaadin.ui.Button.ClickListener;import com.vaadin.ui.FormLayout;import com.vaadin.ui.Notification;import com.vaadin.ui.Panel;import com.vaadin.ui.PasswordField;import com.vaadin.ui.TextField;import com.vaadin.ui.VerticalLayout;public class LoginPage extends VerticalLayout implements View {private static final long serialVersionUID = 1L;public static final String NAME = "";public LoginPage(){Panel panel = new Panel("Login");panel.setSizeUndefined();addComponent(panel);FormLayout content = new FormLayout();TextField username = new TextField("Username");content.addComponent(username);PasswordField password = new PasswordField("Password");content.addComponent(password);Button send = new Button("Enter");send.addClickListener(new ClickListener() {private static final long serialVersionUID = 1L;@Overridepublic void buttonClick(ClickEvent event) {if(VaadinloginUI.AUTH.authenticate(username.getValue(), password.getValue())){VaadinSession.getCurrent().setAttribute("user", username.getValue());getUI().getNavigator().addView(SecurePage.NAME, SecurePage.class);getUI().getNavigator().addView(OtherSecurePage.NAME, OtherSecurePage.class);Page.getCurrent().setUriFragment("!"+SecurePage.NAME);}else{Notification.show("Invalid credentials", Notification.Type.ERROR_MESSAGE);}}});content.addComponent(send);content.setSizeUndefined();content.setMargin(true);panel.setContent(content);setComponentAlignment(panel, Alignment.MIDDLE_CENTER);}@Overridepublic void enter(ViewChangeEvent event) {}}

SecurePage.java

package com.example.vaadinlogin;import com.vaadin.navigator.View;import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;import com.vaadin.server.Page;import com.vaadin.server.VaadinSession;import com.vaadin.ui.Button;import com.vaadin.ui.Button.ClickEvent;import com.vaadin.ui.Button.ClickListener;import com.vaadin.ui.Label;import com.vaadin.ui.VerticalLayout;public class SecurePage extends VerticalLayout implements View {private static final long serialVersionUID = 1L;private Label secure;private Label currentUser;private Button otherSecure;private Button logout;public static final String NAME = "Secure";public SecurePage() {otherSecure = new Button("OtherSecure");otherSecure.addClickListener(new ClickListener() {private static final long serialVersionUID = 1L;@Overridepublic void buttonClick(ClickEvent event) {Page.getCurrent().setUriFragment("!"+OtherSecurePage.NAME);}});logout = new Button("Logout");logout.addClickListener(new ClickListener() {private static final long serialVersionUID = 1L;@Overridepublic void buttonClick(ClickEvent event) {getUI().getNavigator().removeView(SecurePage.NAME);getUI().getNavigator().removeView(OtherSecurePage.NAME);VaadinSession.getCurrent().setAttribute("user", null);Page.getCurrent().setUriFragment("");}});secure = new Label("secure");currentUser = new Label("Current User");addComponent(secure);addComponent(currentUser);addComponent(otherSecure);addComponent(logout);}@Overridepublic void enter(ViewChangeEvent event) {currentUser.setCaption("Current user : " + VaadinSession.getCurrent().getAttribute("user").toString()); }}

OtherSecurePage.java

package com.example.vaadinlogin;import com.vaadin.navigator.View;import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;import com.vaadin.server.Page;import com.vaadin.ui.Button;import com.vaadin.ui.Label;import com.vaadin.ui.VerticalLayout;import com.vaadin.ui.Button.ClickEvent;import com.vaadin.ui.Button.ClickListener;public class OtherSecurePage extends VerticalLayout implements View{private static final long serialVersionUID = 1L;private Label otherSecure;public static final String NAME = "OtherSecure";private Button mainsecure;public OtherSecurePage() {mainsecure = new Button("Main Secure Area");mainsecure.addClickListener(new ClickListener() {private static final long serialVersionUID = 1L;@Overridepublic void buttonClick(ClickEvent event) {Page.getCurrent().setUriFragment("!"+SecurePage.NAME);}});otherSecure = new Label("Other Secure Page ...");addComponent(otherSecure);addComponent(mainsecure);}@Overridepublic void enter(ViewChangeEvent event) {}}

Authentication.java

package com.example.vaadinlogin;public class Authentication {private String username;private String password;public Authentication() {setUsername("myuser");setPassword("mypass");}private void setUsername(String username) {this.username = username;}private String getUsername(){return this.username;}private void setPassword(String password) {this.password = password;}private String getPassword(){return this.password;}public Boolean authenticate(String username, String password){if(username.equals(getUsername()) && password.equals(getPassword())){return true;}return false;}}

7. Running the example

Right click on the project folder and choose Run as -> Run on server choose Tomcat 8 server and hit finish.

8. Results

Failed Login:

Filled Login:

Secure Page:

The Other Secure Page:

9. Download the Source Code

This was an example of Vaadin Login.

Do you want to know how to develop your skillset to become aJava Rockstar?

Subscribe to our newsletter to start Rockingright now!

To get you started we give you our best selling eBooks forFREE!

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

and many more ....

I agree to theTerms andPrivacy Policy

Sign up

Thank you!

We will contact you soon.