Benutzerdefinierte Anmeldeseite für wiederkehrende Benutzer

Benutzerdefinierte Anmeldeseite für wiederkehrende Benutzer

1. Einführung

Dieser Artikel ist eine Fortsetzung unserer laufendenregistration 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. Der Benutzer wird mit einer Standardnachricht „Willkommen…“ begrüßt.

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. Um diese Logik zu entwickeln, müssen wir unsereAuthenticationSuccessHandler implementieren, die nach erfolgreicher Authentifizierung das Cookie hinzufügen.

Erstellen wir unsere benutzerdefiniertenMyCustomLoginAuthenticationSuccessHandler und implementieren dieonAuthenticationSuccess()-Methode:

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

Der Fokus liegt hier auf dem Aufruf der MethodeaddWelcomeCookie().

Schauen wir uns nun den Code zum Hinzufügen des Cookies an:

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;
}

Wir haben ein Cookie mit dem Schlüssel“welcome” und einem Wert gesetzt, der demfirstNamedes aktuellen Benutzers entspricht. Der Cookie läuft nach 30 Tagen ab.

Der letzte Schritt besteht darin, das Cookie beim Laden des Anmeldeformulars zu lesen und, falls vorhanden, den Wert zum Anzeigen der Begrüßungsnachricht abzurufen. Wir können dies leicht mitJavascript. tun

Fügen wir zunächst den Platzhalter“welcometext” hinzu, um unsere Nachricht auf der Anmeldeseite anzuzeigen:



...

Schauen wir uns nun die entsprechendenJavascriptan:

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

Die erste Funktion liest einfach das Cookie, das gesetzt wurde, als der Benutzer angemeldet war. Die zweite Funktion bearbeitet das HTML-Dokument, um die Begrüßungsnachricht festzulegen, wenn das Cookie vorhanden ist.

Die Funktiondisplay_username() wird beimonload-Ereignis desHTML <body>-Tags aufgerufen:

4. Fazit

In diesem kurzen Artikel haben wir gesehen, wie einfach es ist, die Benutzererfahrung anzupassen, indem der Standardauthentifizierungsfluss in Spring geändert wird. Mit diesem einfachen Setup können viele komplexe Dinge erledigt werden.

Auf die Anmeldeseite für dieses Beispiel kann über die URL von/customLoginzugegriffen werden. Den vollständigen Code für diesen Artikel finden Sie unterover on GitHub.