Custom Login Page for Returning User – 为返回的用户定制登录页面

最后修改: 2017年 8月 23日

1. Introduction


This article is a continuation of our ongoing registration with Spring Security series.

本文是我们正在进行的使用Spring Security系列注册的延续。

In this article, we are going to have a look at how to develop a custom login page for a user who is returning to our application. The user will be greeted with a standard “Welcome…” message.

在这篇文章中,我们将看看如何为返回我们应用程序的用户开发一个自定义的登录页面。用户将收到一个标准的 “欢迎… “消息。

2. Adding a Long Lived Cookie


One way to identify if the user is returning to our website is to add a long-lived cookie (e.g. 30 days) after the user has successfully logged in. To develop this logic, we need to implement our AuthenticationSuccessHandler which adds the cookie upon successful authentication.


Let’s create our custom MyCustomLoginAuthenticationSuccessHandler and implement the onAuthenticationSuccess() method:


public void onAuthenticationSuccess(final HttpServletRequest request,
  final HttpServletResponse response, final Authentication authentication)
  throws IOException {
    addWelcomeCookie(gerUserName(authentication), response);
    redirectStrategy.sendRedirect(request, response,
    "/homepage.html?user=" + authentication.getName());

The focus here is the call to addWelcomeCookie() method.


Now, let’s have a look at the code to add the cookie:


private String gerUserName(Authentication authentication) {
    return ((User) authentication.getPrincipal()).getFirstName();

private void addWelcomeCookie(String user, HttpServletResponse response) {
    Cookie welcomeCookie = getWelcomeCookie(user);

private Cookie getWelcomeCookie(String user) {
    Cookie welcomeCookie = new Cookie("welcome", user);
    welcomeCookie.setMaxAge(60 * 60 * 24 * 30);
    return welcomeCookie;

We have set a cookie with key “welcome” and a value that is the current user’s firstName. The cookie is set to expire after 30 days.


3. Reading the Cookie on Login Form


The final step is to read the cookie whenever the login form loads and if present, get the value to display the greeting message. We can do this easily with Javascript.


First, let’s add the placeholder “welcometext” to display our message on the login page:


<form name='f' action="login" method='POST' onsubmit="return validate();">
    <span id="welcometext"> </span>
    <br /><br />
    <label class="col-sm-4" th:text="#{label.form.loginEmail}">Email</label>
    <span class="col-sm-8">
      <input class="form-control" type='text' name='username' value=''/>

Now, let’s have a look at the corresponding Javascript:


function getCookie(name) {
    return document.cookie.split('; ').reduce((r, v) => {
        const parts = v.split('=')
        return parts[0] === name ? decodeURIComponent(parts[1]) : r
    }, '')
function display_username() {
    var username = getCookie('welcome');
    if (username) {
        document.getElementById("welcometext").innerHTML = "Welcome " + username + "!";

The first function simply reads the cookie that was set while the user was logged in. The second function manipulates the HTML document to set the welcome message if the cookie is present.


The function display_username() is invoked on the HTML <body> tag’s onload event:

函数display_username()HTML <body>标签的onload事件中被调用。

<body onload="display_username()">

4. Conclusion


In this quick article, we have seen how simple it is to customize the user experience by modifying the default authentication flow in Spring. A lot of complex things can be done based on this simple setup.


The login page for this example can be accessed via /customLogin URL. The complete code for this article can be found over on GitHub.

这个例子的登录页面可以通过/customLogin URL访问。本文的完整代码可以在GitHub上找到over