TOC

Page de connexion personnalisée pour l’utilisateur précédent

Page de connexion personnalisée pour l'utilisateur précédent

1. introduction

Cet article est une continuation de nosregistration with Spring Security series en cours.

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. L'utilisateur sera accueilli par un message standard «Bienvenue…».

2. Ajout d'un cookie de longue durée

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. Pour développer cette logique, nous devons implémenter notreAuthenticationSuccessHandler qui ajoute le cookie lors de l'authentification réussie.

Créons nosMyCustomLoginAuthenticationSuccessHandler personnalisés et implémentons la méthodeonAuthenticationSuccess(): 

@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());
}

Le focus ici est l'appel à la méthodeaddWelcomeCookie().

Voyons maintenant le code pour ajouter le 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;
}

Nous avons défini un cookie avec la clé“welcome” et une valeur correspondant auxfirstName de l'utilisateur actuel. Le cookie est configuré pour expirer après 30 jours.

3. Lire le cookie sur le formulaire de connexion

La dernière étape consiste à lire le cookie à chaque chargement du formulaire de connexion et, le cas échéant, à obtenir la valeur permettant d'afficher le message d'accueil. Nous pouvons le faire facilement avecJavascript.

Tout d'abord, ajoutons l'espace réservé“welcometext” pour afficher notre message sur la page de connexion: 


     

    


    
    
      
    
    ...

Voyons maintenant lesJavascript correspondants: 

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 + "!";
    }
}

La première fonction lit simplement le cookie défini pendant que l'utilisateur était connecté. La deuxième fonction manipule le document HTML pour définir le message de bienvenue si le cookie est présent.

La fonctiondisplay_username() est appelée sur l’événementonload de la baliseHTML <body>:

4. Conclusion

Dans cet article rapide, nous avons vu à quel point il est simple de personnaliser l'expérience utilisateur en modifiant le flux d'authentification par défaut dans Spring. Beaucoup de choses complexes peuvent être faites sur la base de cette configuration simple.

La page de connexion de cet exemple est accessible via l'URL de/customLogin. Le code complet de cet article se trouveover on GitHub.

Related