LIBRERIAMO PARTE 2: AGGIUNTA SPRING SECURITY E PAGINAZIONE DEI RISULTATI
Nell'articolo precedente avevamo dato vita allo scheletro del progetto, definendone le librerie portanti e le configurazioni iniziali necessarie alla gestione delle operazioni CRUD.
In questo nuovo post introdurremo la libreria DataTables, la quale ci consentirà di gestire in modo semplice ed intuitivo i libri appartenenti alla nostra collezione paginando il result-set e facilitando ordinamento e ricerca all'interno del catalogo.
Esploreremo le basi di Spring Security, con l'aggiunta di una maschera di login alla nostra applicazione per schermare le actions da utenti malintenzionati pronti ad effettuare azioni di delete e aggiornamento sui nostri dati.
Ma bando alle chiacchiere ed iniziamo...
1. Integrazione di DataTablesDataTables è una libreria JavaScript che permette di gestire tabelle HTML in modo dinamico, con funzionalità come paginazione, ordinamento e ricerca. Per integrarla nel nostro progetto, seguiamo questi passi:
Includiamo i file CSS e JavaScript di DataTables nel nostro file HTML (ad esempio index.html):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Lista Libri</title>
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
</head>
<body>
<h1>Lista Libri</h1>
<table id="bookTable" class="display">
<thead>
<tr>
<th>ID</th>
<th>Titolo</th>
<th>Autore</th>
<th>Anno</th>
<th>Azioni</th>
</tr>
</thead>
<tbody>
<tr th:each="book : ${books}">
<td th:text="${book.id}"></td>
<td th:text="${book.title}"></td>
<td th:text="${book.author}"></td>
<td th:text="${book.year}"></td>
<td>
<a th:href="@{/books/edit/{id}(id=${book.id})}">Modifica</a>
<a th:href="@{/books/delete/{id}(id=${book.id})}">Elimina</a>
</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#bookTable').DataTable();
});
</script>
</body>
</html>
In questo modo, la tabella dei libri sarà gestita da DataTables, con paginazione, ordinamento e ricerca automatici. Tuttavia, trattasi di operazioni lato client che per un piccolo set di dati può anche andar bene ma che al crescere della nostra collezione personale potrebbe determinare problemi di performance.
2. Introduzione di Spring Security
Aggiungiamo la dipendenza di Spring Security nel file pom.xml:
In questa configurazione:
Per proteggere le operazioni CRUD, implementiamo Spring Security. Questo ci permetterà di aggiungere un sistema di autenticazione e autorizzazione.
Aggiungiamo la dipendenza di Spring Security nel file pom.xml:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.provisioning.InMemoryUserDetailsManager;
import org.springframework.security.web.SecurityFilterChain;
@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
http
.authorizeHttpRequests((requests) -> requests
.requestMatchers("/", "/books").permitAll() // Accesso pubblico
.requestMatchers("/books/edit/**", "/books/delete/**").authenticated() // Protezione delle operazioni CRUD
)
.formLogin((form) -> form
.loginPage("/login") // Pagina di login personalizzata
.permitAll()
)
.logout((logout) -> logout.permitAll());
return http.build();
}
@Bean
public UserDetailsService userDetailsService() {
UserDetails user = User.withDefaultPasswordEncoder()
.username("user")
.password("password")
.roles("USER")
.build();
return new InMemoryUserDetailsManager(user);
}
}
In questa configurazione:
- Le richieste alle pagine di modifica e cancellazione sono protette.
- La pagina di login è accessibile a tutti.
- Utilizziamo un utente in memoria con username user e password password.
Fatto ciò, creiamo una pagina di login (login.html) utilizzando Thymeleaf:
3. Conclusione
Di seguito il link al Github del codice esposto nell'articolo e nella seria dedicata a "Libreriamo":
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<h1>Login</h1>
<form th:action="@{/login}" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<button type="submit">Login</button>
</div>
</form>
</body>
</html>
3. Conclusione
Con l'integrazione di DataTables, abbiamo migliorato l'esperienza utente nella gestione della tabella dei libri. Inoltre, con Spring Security, abbiamo aggiunto un livello di protezione per le operazioni sensibili come la modifica e la cancellazione dei dati.
Nel prossimo articolo, esploreremo come automatizzare il processo di CI/CD utilizzando le GitHub Actions al fine di rendere il deployment dell'applicazione più efficiente e sicuro. Inoltre, aggiungeremo le funzionalità di logout, cancellazione e messa in prestito del libro ed inizieremo la migrazione a Spring Boot 3.
Di seguito il link al Github del codice esposto nell'articolo e nella seria dedicata a "Libreriamo":
Comments
Post a Comment