1. Introduction

1.介绍。

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

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

2.添加一个长寿的饼干。

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.

识别用户是否返回我们的网站的一种方法是在用户成功登录后添加一个长期的cookie（例如30天）。为了开发这个逻辑，我们需要实现我们的AuthenticationSuccessHandler，它在成功认证后添加cookie。

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

让我们创建我们的自定义MyCustomLoginAuthenticationSuccessHandler并实现onAuthenticationSuccess()方法。

@Override
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.

这里的重点是对addWelcomeCookie()方法的调用。

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

现在，让我们看一下添加cookie的代码。

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

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

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.

我们设置了一个cookie，键值为“welcome”，值为当前用户的firstName。该cookie被设置为30天后失效。

3. Reading the Cookie on Login Form

3.读取登录表的Cookie。

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.

最后一步是每当登录表格加载时读取cookie，如果存在，就获得显示问候语的值。我们可以用Javascript轻松做到这一点。

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

首先，让我们添加占位符“welcometext”，在登录页面显示我们的信息。

<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=''/>
    </span>
    ...
</form>

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

现在，让我们看一下相应的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.

第一个函数只是读取用户登录时设置的cookie。第二个函数对HTML文档进行操作，如果cookie存在，则设置欢迎信息。

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

4.结论。

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.

在这篇短文中，我们看到了通过修改Spring中的默认认证流程来定制用户体验是多么简单。在这个简单的设置基础上，可以做很多复杂的事情。

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。