Maschera di Login Personalizzata in Spring Security

Nella serie dedicata a Spring Security (vedi link in calce) abbiamo introdotto i concetti fondamentali per l’utilizzo di tale framework, ed in particolare abbiamo visto come Spring metta a disposizione una maschera di login per l’autenticazione. Naturalmente capita molto raramente, se non mai, di utilizzare tale maschera in progetti reali se non a fini dimostrativi. Molto più probabilmente ogni progetto ha una propria form di login con look and feel allineati con lo stile dell’intera web application.

In questo articolo vediamo come personalizzare la maschera di login per l’autenticazione di Spring Security. Non mi ritengo un esperto di CSS quindi copio spudoratamente una form di login trovata su CodePen  all’url https://codepen.io/g13nn/pen/LhCIg, che ha l’aspetto mostrato nella figura seguente.


Naturalmente il codice sorgente sella form originale sarà opportunamente modificato per adattarlo ad una web application scritta in java.

Struttura del Progetto

La figura seguente mostra la struttura delle cartelle che compongono il progetto di esempio e che sarà di riferimento per la successiva fase di configurazione del framework.

Oltre ai file che già abbiamo visto nei precedenti articoli, nel progetto abbiamo inserito due nuovi file: style.css e login.jsp. Il primo contiene il foglio di stile utilizzato dalla form di login, che ovviamente non descriviamo nel dettaglio, mentre il secondo contiene il codice html per la renderizzazione della maschera, che illustriamo in uno dei paragrafi seguenti.

Configurazione di Spring Security

Innanzitutto configuriamo l’accesso alle risorse (file) del progetto. Il comportamento che vogliamo ottenere è di consentire l’accesso alla pagina login.jsp ed alle risorse ad essa collegate, ovvero il foglio di stile, a tutti gli utenti non autenticati. Diversamente vogliamo restringere l’accesso alla pagina index.jsp e tutte le atre pagine del progetto ai soli utenti autenticati. Per farlo inseriamo i seguenti url interceptor nel file spring-security.xml:

A questo punto siamo pronti ad indicare al framework la pagina da utilizzare per il login. Per farlo è sufficiente utilizzare il tag <form-login>  nel modo seguente:

I significato degli attributi utilizzati, abbastanza intuitivo, è il seguente:

  • login-page specifica la pagina (jsp) utilizzata per la renderizzazione della maschera di login (default /login);
  • default-target-url: indica l’url al quale si è rediretti in caso di login corretto (default root);
  • authentication-failure-url: indica l’url al quale si è rediretti in caso di login fallito (default /login?error);
  • login-processing-url: identifica l’url a cui la form di login sottomessa (POST) e che avvia il processo Spring di autenticazione (default /login). Si noti che in Spring Security 4 il valore di default era /j_spring_security_check.

Altri attributi previsti dal tag sono consultabili nella documentazione ufficiale al seguente url https://docs.spring.io/spring-security/site/docs/5.0.3.RELEASE/reference/htmlsingle/#nsa-form-login.

Si noti che in virtù del primo interceptor-url sia la pagina index.jsp sia l’url a cui è inviata la maschera /login sono accessibili agli utenti non autenticati. In caso contrario avremmo ottenuto un errore HTTP 403 sintomo di un accesso non autorizzato.

Maschera di Login

Innanzitutto configuriamo la welcome page nel descrittore dell’applicazione ovvero nel file web.xml:

Procediamo quindi descrivendo il codice sorgente della maschera di login che è mostrata di seguito. Focalizziamo l’attenzione sul tag form e notiamo innanzitutto che l’action definita è login conformemente alla proprietà login-processing-url.

I campi di input per l’inserimento delle credenziali utente hanno l’attributo name valorizzato con le stringhe username e password che sono i valori di default che si aspetta il framework. Anche in questo caso nella versione 4 di Spring Security tali proprietà assumevano valori differenti ovvero j_username e j_password. Se si desidera è però possibile modificare tali valori configurandoli nelle proprietà username-parameter e password-parameter nel tag <login-form>.

Una attenzione particolare merita l’ultimo campo input del form. Questo serve a “difendere” l’applicazione da attacchi di tipo CSRF (Cross Site Request Forgery) e la cui assenza comporterebbe un errore nella sottomissione della maschera. La variabile _csrf.token, definita dal framework, contiene il token (univoco) generato per la request associata alla pagina e che deve essere restituito al post della form per verificarne la correttezza e certificare l’origine della maschera.

Homepage

Per completezza riportiamo anche il codice della homepage renderizzata dalla pagina index.jsp.

Nella pagina sono evidenti due particolarità. La prima è la visualizzazione dell’utente corrente attraverso l’utilizzo della tag library di Spring Security e del tag <authentication>, che consente di accedere alle proprietà dell’Authentication object contenuto nel security context.

La seconda è la form necessaria per l’esecuzione del logout che esegue un POST verso l’url /logout. Si noti che se avessimo disabilitato la gestione degli attacchi CSRF avremmo potuto eseguire il logout semplicemente con un link del tipo <a href="logout/>.

Il comportamento della procedura di logout è configurabile nel file spring-security.xml utilizzando il tag <logout>:

Le proprietà del tag sono descritte nella documentazione ufficiale all’url https://docs.spring.io/spring-security/site/docs/5.0.3.RELEASE/reference/htmlsingle/#nsa-logout. La sola cosa che ci preme sottolineare è che la proprietà logout-url deve coincidere con l’url cui si esegue il POST della form di logout, mentre la proprietà logout-success-url indica l’url cui redirigere l’utente a seguito di logout, che nel nostro caso torniamo alla pagina di login.

Codice Sorgente

Il codice sorgente completo degli esempi presentati è scaricabile qui spring-security.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!