Se provi ad installare l'ultima versione di node usando il gestore di pacchetti apt finirai con l'avere la versione 10.19.0. Questa è l'ultima versione presente nell'app store ubuntu ma non è l'ultima versione rilasciata da NodeJS.

N.d.T.
Le versioni menzionate fanno riferimento al momento della pubblicazione dell'articolo e non sono aggiornate.

Questo succede perché le nuove versioni software rilasciate richiedono mesi prima che il team di Ubuntu le testi e le rilasci nel proprio store ufficiale. Per ottenere l'ultima versione di qualsiasi software dovresti usare pacchetti privati, pubblicati direttamente dagli sviluppatori.

In questo tutorial, quello che vogliamo è ottenere Node v12.18.1 (LTS - con supporto a lungo termine) o v14.4. Per ottenere le ultime versioni possiamo usare nodesource o nvm (node version manager). Ti farò vedere entrambi i modi.

Tutti i comandi saranno eseguiti utilizzando l'interfaccia a riga di comando (CLI) di Ubuntu.

Usare NVM - il mio metodo preferito

Il motivo per cui preferisco nvm è perché permette di muoversi tra diverse versione di node in base al progetto. Capiterà di collaborare a diversi progetti con diverse versioni di node e dunque dover cambiare versione in base a quella richiesta. Per questo nvm è lo strumento migliore.

Installare NVM

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Per controllare l'effettiva installazione di nvm scrivi nel terminale nvm --version. Se la risposta è qualcosa tipo 0.35.3 allora sai che è stato installato correttamente.

Riavvia il tuo terminale per rendere effettivi i cambiamenti.

Installare NodeJS

Installiamo NodeJS versione 14.4.

Semplicemente digita il comando nvm install 14.4.0 e fai invio.

Puoi decidere quale versione installare usando lo stesso comando ma con la versione che desideri. Ad esempio: nvm install 12.18.1.

Eseguendo il comando verrà installata la versione di NodeJS scelta e automaticamente l'ultima versione di npm che potrebbe essere v6.14.5.

Se desideri spostarti su una versione di node specifica puoi semplicemente usare il comando nvm use <numero-versione>, ad esempio nvm use v12.18.1.

Per visualizzare la lista delle diverse versioni di node installate con nvm puoi usare il comando nvm ls.

Installare Nodesource

Esegui questo comando per dire a Ubuntu che vuoi installare il pacchetto di NodeJS da nodesource.

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

N.B., la versione v14.4.0 è l'ultima versione di Node ma non ha il supporto a lungo termine (LTS). Per installare la versione di Node con LTS cambia il numero della versione da 14 a 12 nel comando.

È probabile ti venga chiesto di inserire password per l'utente root. Scrivila e premi invio.

Installare NodeJS

Una volta sistemato Nodesource possiamo installare NodeJS v14.4. Esegui sudo apt-get install -y nodejs.

Una volta fatto, possiamo controllare se effettivamente abbiamo l'ultima versione installata. Possiamo farlo usando il comando nodejs -v che dovrebbe restituire v14.4.0.

Dovresti avere installato npm in automatico. Per controllare che versione hai puoi usare questo comando: npm version. Se non ottieni un oggetto che include l'ultima versione di npm, o qualcosa di simile a 6.14.5 ({ npm: '6.14.5' }), allora puoi aggiornare manualmente npm con il seguente comando:

npm install -g npm@latest.

Se dovessero esserci problemi con npm che non può essere aggiornato perché risulta non installato, puoi prima usare il comando sudo apt-get install -y npm, e poi usare il comando precedente per aggiornare.

Per avviare alcuni pacchetti npm potresti avere bisogno di questo comando:

sudo apt install build-essential.

E questo è tutto.

Hai l'ultima versione di NodeJS e NPM sulla tua macchina Ubuntu.

Buona programmazione:)

In questo tutorial parleremo della funzione parseInt in JavaScript. Questa funzione analizza una stringa e restituisce un numero o NaN (Not a Number).

Come funziona parseInt

Lo scopo principale della funzione parseInt è quello di estrarre un numero da una stringa e restituire l'effettivo valore numerico.

La sintassi:

parseInt(stringa)

Consideriamo questo esempio:

const myNumber = '3';
console.log(2 + myNumber);
// restituisce 23

Nell'esempio qui sopra, 3 è una stringa e non un numero. Quando aggiungiamo 2 otteniamo 23, cioè una concatenazione tra stringhe.

Con la funzione parseInt possiamo estrarre il 3 dalla stringa e trasformarlo in un numero (da '3' a 3). Ecco come:

const myNumber = '3';
console.log(2 + parseInt(myNumber));
// restituisce 5

La funzione parseInt potrebbe restituire un numero o NaN. Quand'è che otteniamo NaN come valore?

Potrebbe succedere se c'è del testo prima del numero. Qualcosa come "age is 50" restituirebbe NaN perché la funzione parseInt tiene conto solo del primo valore della stringa. Se non è un numero restituisce NaN:

const age = 'age is 50';
console.log(parseInt(age));
// restituisce NaN

Riorganizziamo la stringa e vediamo cosa succede.

const age = '50 is the age';
console.log(parseInt(age));
// restituisce 50

Quando il primo valore della stringa è un numero, quel numero viene restituito correttamente.

Ricorda che la funzione parseInt ignora i valori float (con la virgola). Se l'età fosse 50.05 ritornerebbe solo 50 ignorando la parte decimale.

Nel caso in cui la stringa contenesse più di un numero come  "50 100 150 200"  la funzione restituirebbe solo il primo numero, 50. Questo perché parseInt considera solo il primo valore.

Mentre se iniziasse senza spazi, '50istheage', la funzione restituirebbe correttamente la parte iniziale numerica.

Il parametro radice

La funzione parseInt accetta un secondo parametro conosciuto come radice. Questo parametro specifica quale base numerica utilizzare. Se viene omesso, viene usato 10 di default.

La sintassi:

parseInt(stringa, radice)

La base consentita è un numero tra 2 e 36. Se il valore è minore di 2 o maggiore di 36 la funzione restituisce NaN.

Specificare una radice di 12 implica che il numero nella stringa sia convertito dalla base duodecimale a quella decimale.

Ecco un piccolo esempio:

console.log(parseInt("50", 12));

// restituisce 60

Otteniamo 60, che è il valore corrispondente in base 10.

Conclusione

In questo tutorial abbiamo imparato come usare la funzione parseInt per estrarre numeri da stringhe.

Inoltre con l'utilizzo del secondo parametro, radice, possiamo specificare quale base numerica verrà utilizzata per la conversione.

Grazie per aver letto!

L'operatore con tre punti in JavaScript è una delle più importanti novità dell'ES6.

Questo operatore (...) ti aiuterà a ottenere molte cose che altrimenti richiederebbero tante righe di codice, una sintassi difficile e tanto altro.

In questo breve articolo, impererai cos'è e cosa fa questo operatore. Vedremo alcuni esempi per mostrare i possibili casi di utilizzo e ci occuperemo di come usarlo per svolgere delle operazioni. In questo modo, saprai cosa ha da offrire a uno sviluppatore JavaScript.

L'operatore ha due diversi significati in JavaScript. La sintassi è davvero simile ma il contesto di utilizzo ne specifica il tipo. Nei due diversi utilizzi, l'operatore ... prende il nome di operatore spread e operatore rest.

Come usare l'operatore spread in JavaScript

In JavaScript, si utilizza l'operatore spread per espandere un iterabile all'interno di uno specifico ricevitore.

Questo contenitore potrebbe essere qualsiasi cosa: un oggetto, un array e così via. Il ricevitore potrebbe essere qualsiasi cosa su cui iterare, un array, una stringa, un oggetto ecc.

Sintassi operatore spread:

const nuovoArray = ['primoElemento', ...vecchioArray];

Guardiamo alcuni esempi su come usare l'operatore spread.

Come copiare un array con l'operatore spread

Per copiare gli elementi di un particolare array in un altro, senza modificare l'originale, sfruttiamo l'operatore spread.

Ecco un esempio:

let nomiStudenti = ["Daniel", "Jane", "Joe"];

let nomi = [...nomiStudenti];

console.log(nomi); // ["Daniel","Jane","Joe"]

Questo ci risparmia il tempo che avremmo impiegato per scrivere un loop:

let nomiStudenti = ["Daniel", "Jane", "Joe"];

let nomi = [];

nomiStudenti.map((nome) => {
    nomi.push(nome);
});

console.log(nomi); // ["Daniel","Jane","Joe"]

Come copiare un oggetto con l'operatore spread

Nello stesso modo in cui abbiamo fatto per gli array, possiamo utilizzare l'operatore spread per copiare oggetto in un altro.

let utente = { nome: "John Doe", età: 10 };

let copiaUtente = { ...utente };
console.log(copiaUtente); // { nome: "John Doe", età: 10 }

Object.assign() è un modo più vecchio di ottenere lo stesso risultato:

let utente = { nome: "John Doe", età: 10 };

let copiaUtente = Object.assign({}, utente);
console.log(copiaUtente); // { nome: "John Doe", età: 10 }

Come concatenare o unire gli array usando l'operatore spread

Quando abbiamo due o più array da unire in un nuovo array, possiamo utilizzare facilmente l'operatore spread. Copiamo gli elementi da un array:

let nomiMaschili = ["Daniel", "Peter", "Joe"];
let nomiFemminili = ["Sandra", "Lucy", "Jane"];

let tuttiNomi = [...nomiMaschili, ...nomiFemminili];

console.log(tuttiNomi); // ["Daniel","Peter","Joe","Sandra","Lucy","Jane"]

È importante sapere che non conta il numero degli array, possiamo utilizzare sempre lo stesso approccio. Inoltre possiamo anche aggiungere singoli elementi nell'array.

let nomiMaschili = ["Daniel", "Peter", "Joe"];
let nomiFemminili = ["Sandra", "Lucy", "Jane"];
let altriNomi = ["Bill", "Jill"];

let piùNomi = [...altriNomi, ...nomiMaschili, ...nomiFemminili];
let nomi = [...piùNomi, "Ben", "Fred"];

Questo ci evita l'uso della sintassi complessa di un metodo come concat():

let nomiMaschili = ["Daniel", "Peter", "Joe"];
let nomiFemminili = ["Sandra", "Lucy", "Jane"];
let altriNomi = ["Bill", "Jill"];

let tuttiNomi = nomiMaschili.concat(nomiFemminili);
let piùNomi = nomiMaschili.concat(nomiFemminili, altriNomi);

Come concatenare o unire oggetti con l'operatore spread

Possiamo unire oggetti nello stesso modo in cui abbiamo fatto con gli array:

let userName = { nome: "John Doe" };
let userSex = { sesso: "Maschio" };

let user = { ...userName, ...userSex };

console.log(user); // { nome: "John Doe", sesso: "Maschio" }

Nota: in una situazione in cui una chiave ha un'altra proprietà, l'ultima sovrascriverà la precedente:

let userName = { nome: "John Doe" };
let userSex = { sesso: "Femmina", nome: "Jane Doe" };

let user = { ...userName, ...userSex }; // { nome: "Jane Doe", sesso: "Femmina" }

Come recuperare un elemento univoco con il metodo Set()

Una situazione in cui l'operatore spread risulta essere molto utile è quando cerchiamo di recuperare un valore univoco da un array per inserirlo in un altro.

Ad esempio, supponendo di avere un array contenente frutta, vogliamo evitare di avere delle ripetizioni al suo interno. Possiamo creare un nuovo array contente solo frutta non ripetuta. Usando il metodo Set() aiutato dall'operatore spread, possiamo ottenere questo risultato facilmente:

let frutta = ["Mango", "Mela", "Mango", "Banana", "Mango"];

let fruttaNoRip = [...new Set(frutta)];
console.log(fruttaNoRip); // ["Mango","Apple","Banana"]

Come passare gli elementi di un array in chiamate di funzioni con l'operatore spread

Consideriamo una funzione che accetta un numero e questi numeri come elementi di un array:

let punteggi = [12, 33, 6]

const somma = (a, b, c) => {
    console.log(a + b + c);
};

Puoi usare l'operatore spread per passare gli elementi dell'array come argomenti alla funzione:

let punteggi = [12, 33, 6]

const somma = (a, b, c) => {
    console.log(a + b + c);
};

somma(...punteggi); // 51

Un vecchio metodo per svolgere questa operazione è usare il metodo apply():

let punteggi = [12, 33, 6]

const somma = (a, b, c) => {
    console.log(a + b + c);
};

somma.apply(null, punteggi); // 51

Come dividere stringhe in caratteri usando l'operatore spread

Consideriamo di avere una stringa. Possiamo sfruttare l'operatore spread per dividere la stringa in caratteri:

let stringa = "freeCodeCamp";

const dividiStringa = [...stringa];

console.log(dividiStringa); // ["f","r","e","e","C","o","d","e","C","a","m","p"]

È molto simile al metodo split():

let stringa = "freeCodeCamp";

const dividiStringa = stringa.split('');

console.log(dividiStringa); // ["f","r","e","e","C","o","d","e","C","a","m","p"]

Come usare l'operatore rest in JavaScritpt

L'operatore rest ti permette di unire qualsiasi numero di argomenti all'interno di un array e farci quello che vuoi. Sfrutta un array per rappresentare un infinito numero di argomenti.

Sintassi dell'operatore rest

const funzione = (primoElemento, ...resto) => {};

Consideriamo una lista di numeri. Vogliamo usare il primo numero come moltiplicatore per tutti i successivi numeri e poi aggiungere i numeri moltiplicati in un array:

const moltiplicaArg = (moltiplicatore, ...altriArg) => {
    return altriArg.map((numero) => {
    return numero * moltiplicatore;
    });
};

let arrayMoltiplicato = moltiplicaArg(6, 5, 7, 9);

console.log(arrayMoltiplicato); // [30,42,54]

Ecco una buona rappresentazione dell'operatore rest e dei suoi valori:

const moltiplicaArg = (moltiplicatore, ...altriArg) => {
    console.log(moltiplicatore); // 6
    console.log(altriArg); // [5,7,9]
};

moltiplicaArg(6, 5, 7, 9);

Nota: il parametro rest deve essere l'ultimo parametro formale.

const moltiplicaArg = (moltiplicatore, ...altriArg, ultimoNumero) => {
    console.log(ultimoNumero); // Uncaught SyntaxError: Rest parameter must be last formal parameter
};

moltiplicaArg(6, 5, 7, 9);

Differenze tra gli operatori spread e rest in JavaScript

A questo punto potresti essere confuso per quanto i due metodi siano simili. Le denominazioni scelte dal team di JS sono ottime perché riassumono esattamente lo scopo di ognuno.

Usiamo l'operatore spread quando vogliamo distribuire i valori di un array o di un iterabile in un altro array o oggetto.

Mentre usiamo l'operatore rest per raccogliere tutti gli elementi restanti passati a una funzione come array.

const funzione = (nome1, ...resto) => { // operatore rest
    console.log(nome1);
    console.log(resto);
};

let nomi = ["John", "Jane", "John", "Joe", "Joel"];
funzione(...nomi); // operatore spread

In conclusione

In questo articolo, hai imparato cosa si intende con "operatore tre punti" in JavaScript. Hai anche visto i vari casi in cui puoi utilizzarlo, insieme ai significati che assume in contesti diversi.

Divertiti!

Lo scorso mese, ho avuto la possibilità di implementare il sistema di autenticazione JWT per uno dei miei progetti. Ho lavorato precedentemente con JWT in Ruby on Rails, ma questa è stata la mia prima volta con Spring Boot.

In questo tutorial, proverò a spiegare cosa ho imparato e come l'ho applicato all'interno del mio progetto per condividere le mie esperienze, sperando che possano essere d'aiuto.

Inizieremo dando un rapido sguardo alla teoria dietro JWT e il suo funzionamento. Successivamente guarderemo insieme come implementarlo all'interno di una applicazione Spring Boot.

Fondamenti di JWT

JWT, o JSON Web Tokens (RFC 7519), è uno standard comunemente usato per rendere sicure le API REST. Nonostante sia una tecnologia relativamente giovane è diventata rapidamente popolare.

Nel processo di autenticazione JWT, il front end (il client) invia per primo alcune credenziali da utilizzare per l'autenticazione (nel nostro caso, username e password, perché stiamo lavorando su una app web).

Il server (nel nostro caso l'app con Spring Boot) poi, controlla le credenziali ricevute, se sono valide genera il JWT e lo restituisce.

Dopo questo passaggio, il client deve inviare questo il token nell'intestazione di Autorizzazione della richiesta, nel modulo “Bearer TOKEN”. Il back end controllerà la validità del token e autorizzerà o meno la richiesta. Il token potrebbe anche contenere informazioni sull'utente e le relative autorizzazioni in base al suo ruolo.

Implementazione

Adesso vediamo come implementare il meccanismo di login e salvataggio con JWT in una vera applicazione Spring Boot.

Dipendenze

Puoi vedere la lista di dipendenze Maven di cui abbiamo bisogno nel codice qui sotto. Nota che le principali dipendenze, come Spring Boot e Hibernate, non sono incluse nello screenshot.

Salvataggio Utenti

Inizieremo con la creazione dei controller per salvare gli utenti in modo sicuro e autenticarli in base ai loro username e password.

Abbiamo un'entità modello chiamata User. Questa è una semplice classe che mappa la tabella nel database chiamata USER. Puoi usare qualsiasi proprietà di cui hai bisogno a seconda della tua applicazione.

Abbiamo anche una semplice classe UserRepository per salvare gli utenti. Dobbiamo sovrascrivere il metodo findByUsername visto che lo useremo nell'autenticazione.

Creiamo un'interfaccia chiamandola UserRepository e estendiamola con JpaRepository. Questa ci servirà per la gestione degli utenti. Inoltre c'è bisogno di sovrascrivere il metodo findByUsername per l'autenticazione.

public interface UserRepository extends JpaRepository<User, String>{ 
    User findByUsername(String username); 
}

Non dovremmo mai memorizzare le password nel database in testo non crittografato, perché molti utenti tendono ad usare la stessa password per più siti.

Esistono diversi algoritmi di hash, ma il più usato è BCrypt ed è un metodo sicuro per criptare le password. Puoi controllare questo articolo per maggiori informazioni sull'argomento.

Per criptare le password definiamo un bean chiamato BCrypt all'interno della @SpringBootApplication e annotiamo la classe principale in questo modo:

@Bean public BCryptPasswordEncoder bCryptPasswordEncoder() {
    return new BCryptPasswordEncoder(); 
}

Chiameremo i metodi all'interno di questo bean quando avremo bisogno di criptare una password.

Abbiamo anche bisogno di un controller, UserController, per salvare gli utenti. Una volta creato lo annotiamo con @RestController e ne definiamo il corretto mapping.

Nella nostra applicazione, salveremo l'utente attraverso l'oggetto DTO ricevuto dal front end. Puoi anche passare un oggetto User attraverso il body sfruttando l'annotazione @RequestBody.

Dopo aver passato l'oggetto DTO, possiamo criptare il campo della password usando il suo getter passandolo al metodo che abbiamo definito nel bean BCrypt. Potresti farlo anche nel controller, ma è una pratica migliore farlo nella classe service.

@Transactional(rollbackFor = Exception.class) 
public String saveDto(UserDto userDto) { 
    userDto.setPassword(bCryptPasswordEncoder
           .encode(userDto.getPassword())); 
    return save(new User(userDto)).getId(); 
}

Filtro di Autenticazione

Abbiamo bisogno dell'autenticazione per confermare che l'utente sia davvero chi dice di essere. A questo scopo, useremo la classica coppia username/password.

Ecco i passaggi per l'autenticazione:

1. Creare un filtro di autenticazione che estende UsernamePasswordAuthenticationFilter
2. Creare una classe per la configurazione della security che estende WebSecurityConfigurerAdapter e applicare il filtro.

Ecco il codice per il nostro filtro di autenticazione – come puoi immaginare, i filtri sono il fulcro di Spring Security.

public class JWTAuthenticationFilter extends UsernamePasswordAuthenticationFilter {

    private AuthenticationManager authenticationManager;

    public JWTAuthenticationFilter(AuthenticationManager authenticationManager) {
        this.authenticationManager = authenticationManager;

        setFilterProcessesUrl("/api/services/controller/user/login"); 
    }

    @Override
    public Authentication attemptAuthentication(HttpServletRequest req,
                                                HttpServletResponse res) throws AuthenticationException {
        try {
            User creds = new ObjectMapper()
                    .readValue(req.getInputStream(), User.class);

            return authenticationManager.authenticate(
                    new UsernamePasswordAuthenticationToken(
                            creds.getUsername(),
                            creds.getPassword(),
                            new ArrayList<>())
            );
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }

    @Override
    protected void successfulAuthentication(HttpServletRequest req,
                                            HttpServletResponse res,
                                            FilterChain chain,
                                            Authentication auth) throws IOException {
        String token = JWT.create()
                .withSubject(((User) auth.getPrincipal()).getUsername())
                .withExpiresAt(new Date(System.currentTimeMillis() + EXPIRATION_TIME))
                .sign(Algorithm.HMAC512(SECRET.getBytes()));

        String body = ((User) auth.getPrincipal()).getUsername() + " " + token;

        res.getWriter().write(body);
        res.getWriter().flush();
    }
}

Analizziamo ogni step di questo codice.

Questa classe estende UsernamePasswordAuthenticationFilter, che è la classe di default per l'autenticazione con password in Spring Security. L'abbiamo estesa per definire la nostra logica di autenticazione personalizzata.

Chiamiamo il metodo setFilterProcessesUrl nel nostro costruttore. Questo metodo imposta l'URL di login di default al parametro dato.

Se rimuovi questa riga, Spring Security crea un endpoint “/login” di default. Definisce l'endpoint per noi, motivo per cui non definiamo un endpoint di login esplicitamente nel nostro controller.

Dopo questa riga il nostro endpoint per il login sarà /api/services/controller/user/login. Puoi usare questa funzione essere coerente con i tuoi endpoint.

Sovrascriviamo i metodi attemptAuthentication e successfulAuthentication della classe UsernameAuthenticationFilter.

La funzione attemptAuthentication verrà eseguita quando l'utente tenta di effettuare il login nell'applicazione. Legge le credenziali, crea un utente POJO e controlla le credenziali da autenticare.

Passiamo username, password e una lista vuota. La lista vuota rappresenta le autorità (ruoli). In questo caso, la lasciamo vuota perché non abbiamo ancora alcun ruolo nella nostra applicazione.

Se l'autenticazione va a buon fine, il metodo successfulAuthentication viene eseguito. I valori dei parametri sono passati implicitamente da Spring Security.

Il metodo attemptAuthentication restituisce un oggetto Authentication che contiene le autorità passate nel frattempo.

Vogliamo restituire il token all'utente dopo la sua corretta autenticazione, quindi creiamo il token usando lo username, la chiave segreta e la data di scadenza. Definiamo quindi SECRET e EXPIRATION_DATE.

public class SecurityConstants {

  public static final String SECRET = "SECRET_KEY";
  public static final long EXPIRATION_TIME = 900_000; // 15 mins
  public static final String TOKEN_PREFIX = "Bearer ";
  public static final String HEADER_STRING = "Authorization";
  public static final String SIGN_UP_URL = "/api/services/controller/user";
}

Abbiamo creato una classe che contiene le nostre costanti. Puoi definire qualsiasi chiave segreta tu voglia, ma una buona pratica è usare una chiave con una lunghezza uguale al tuo hash. In questo esempio, usiamo l'algoritmo HS256, quindi la chiave segreta è di 256 bit/32 caratteri.

La scadenza è impostata a 15 minuti, questo perché è considerata una buona abitudine per evitare che la nostra chiave sia soggetta ad attacchi di forza bruta. Il tempo è in millisecondi.

Abbiamo preparato il filtro di autenticazione, ma non è ancora attivo. Abbiamo anche bisogno di un filtro di autorizzazione, e li utilizzeremo entrambi attraverso una classe di configurazione.

Questo filtro controllerà l'esistenza e la validità del token nell'intestazione dell'autorizzazione. Specificheremo quali endpoint saranno soggetti a questo filtro nella classe di configurazione.

Filtro di autorizzazione

public class JWTAuthorizationFilter extends BasicAuthenticationFilter {

    public JWTAuthorizationFilter(AuthenticationManager authManager) {
        super(authManager);
    }

    @Override
    protected void doFilterInternal(HttpServletRequest req,
                                    HttpServletResponse res,
                                    FilterChain chain) throws IOException, ServletException {
        String header = req.getHeader(HEADER_STRING);

        if (header == null || !header.startsWith(TOKEN_PREFIX)) {
            chain.doFilter(req, res);
            return;
        }

        UsernamePasswordAuthenticationToken authentication = getAuthentication(req);

        SecurityContextHolder.getContext().setAuthentication(authentication);
        chain.doFilter(req, res);
    }

    // Reads the JWT from the Authorization header, and then uses JWT to validate the token
    private UsernamePasswordAuthenticationToken getAuthentication(HttpServletRequest request) {
        String token = request.getHeader(HEADER_STRING);

        if (token != null) {
            // parse the token.
            String user = JWT.require(Algorithm.HMAC512(SECRET.getBytes()))
                    .build()
                    .verify(token.replace(TOKEN_PREFIX, ""))
                    .getSubject();

            if (user != null) {
                // new arraylist means authorities
                return new UsernamePasswordAuthenticationToken(user, null, new ArrayList<>());
            }

            return null;
        }

        return null;
    }

Il metodo doFilterInternal intercetta la richiesta e controlla l'intestazione di Autorizzazione. Se l'header non è presente o non inizia per "BEARER" procede con la catena di filtri.

Se l'intestazione è presente, verrà invocato il metodo getAuthentication, che verifica il JWT e se il token è valido restituisce un token di accesso che Spring userà internamente.

Questo nuovo token è salvato nel SecurityContext. Se hai bisogno di un tipo di autorizzazione in base al ruolo puoi passare questo token in Authorities.

I nostri filtri sono pronti e dobbiamo farli entrare in azione grazie all'aiuto di una classe di configurazione.

Configurazione

@EnableWebSecurity
public class WebSecurity extends WebSecurityConfigurerAdapter {

    private UserDetailsServiceImpl userDetailsService;
    private BCryptPasswordEncoder bCryptPasswordEncoder;

    public WebSecurity(UserDetailsServiceImpl userService, BCryptPasswordEncoder bCryptPasswordEncoder) {
        this.userDetailsService = userService;
        this.bCryptPasswordEncoder = bCryptPasswordEncoder;
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and().authorizeRequests()
                .antMatchers(HttpMethod.POST, SIGN_UP_URL).permitAll()
                .anyRequest().authenticated()
                .and()
                .addFilter(new JWTAuthenticationFilter(authenticationManager()))
                .addFilter(new JWTAuthorizationFilter(authenticationManager()))
                // this disables session creation on Spring Security
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    }

    @Override
    public void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userDetailsService).passwordEncoder(bCryptPasswordEncoder);
    }

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration corsConfiguration = new CorsConfiguration().applyPermitDefaultValues();
        source.registerCorsConfiguration("/**", corsConfiguration);

        return source;
    }
}

La classe è annotata con @EnableWebSecurity  ed estende WebSecurityConfigureAdapter per implementare la nostra logica per la sicurezza.

Sfruttiamo l'autowire del bean BCrypt che abbiamo definito precedentemente. Facciamo lo stesso con UserDetailsService per trovare l'account dell'utente.

Il metodo più importante è quello che accetta un oggetto HttpSecurity. Qui specifichiamo gli endpoint e i filtri che vogliamo applicare. Configuriamo il filtro CORS e permettiamo tutte le richieste POST al nostro URL di registrazione definito nella classe delle costanti.

Puoi aggiungere altri antMatchers per filtrare gli URL e i ruoli. Puoi leggere questa discussione su StackOverflow per vedere un esempio. L'altro metodo configura l'AuthenticationManager per usare l'oggetto codificatore per poter codificare le password durante il controllo delle credenziali.

Testing

Inviamo qualche richiesta per testare se funziona a dovere.

In questo esempio, abbiamo inviato una richiesta GET per accedere ad una risorsa protetta. Il nostro server risponde con un codice 403. È quello che ci aspettavamo poiché non abbiamo fornito il token nell'intestazione. Adesso, creiamo un utente:

Per la creazione di un utente abbiamo inviato una richiesta POST contenente i dati DTO User. Useremo questo utente per effettuare un login e ottenere il token.

Grande! Abbiamo il token. A questo punto lo useremo per poter accedere a risorse protette.

Abbiamo fornito il token nella chiave di Autorizzazione dell'intestazione e adesso abbiamo il permesso di accedere all'endpoint protetto.

Conclusione

In questo tutorial, ti ho guidato attraverso gli step che ho intrapreso per implementare l'autorizzazione JWT e l'autenticazione con password in Spring Boot. Inoltre abbiamo anche imparato come gestire un utente in modo sicuro.

Grazie per aver letto questo articolo – spero ti sia stato d'aiuto.

Node Package Manager (NPM) offre vari comandi che ti permettono di lavorare con i pacchetti.

Proprio come è possibile installare pacchetti dalla libreria npm, così puoi anche disinstallarli.

Per disinstallare un pacchetto, puoi usare l'apposito comando di npm – npm uninstall.

In realtà, il modo per rimuovere un pacchetto regolare o una dipendenza non è lo stesso con cui rimuovere un pacchetto globale o una dev dependency.

In questo articolo, ti mostrerò come disinstallare un pacchetto regolare, un pacchetto globale e una dev dependency.

Come rimuovere un pacchetto con npm uninstall

Per rimuovere un pacchetto con il comando npm uninstall,  puoi usare questa sintassi npm uninstall nome-pacchetto nella cartella in cui è presente il pacchetto.

Il pacchetto che utilizzerò per dimostrarti come fare è Express – un framework di NodeJS.

Nello screenshot qui sotto, puoi vedere che Express è nella lista come una dipendenza nel file package.json.

Ma dopo aver avviato il comando npm uninstall express, non vedrai più Express nella lista delle dipendenze:

Come puoi vedere Express non è più presente. Non è nemmeno più presente la chiave della dipendenza perché la dipendenza è stata eliminata.

Come rimuovere una Dev Dependency con npm uninstall

Una dev dependency, o dipendenza di sviluppo, è un pacchetto usato esclusivamente durante lo sviluppo.

Per rimuovere una dev dependency, devi aggiungere l'opzione -D o --save-dev all'interno del comando npm uninstall e specificare il nome del pacchetto.

La sintassi base per farlo è npm uninstall -D nome-pacchetto o npm uninstall --save-dev nome-pacchetto.

Devi eseguire il comando all'interno della cartella in cui è presente la dipendenza.

Userò Nodemon per dimostrarti come rimuovere questo tipo di dipendenza.

Nodemon ti permette di ricaricare automaticamente le app con NodeJS ogni volta che viene rilevato un cambiamento nel file o nella cartella durante lo sviluppo.

In questo screenshot puoi vedere Nodemon presente nella lista come dev dependency.

Per rimuoverlo eseguirò npm uninstall –D nodemon.

Come puoi vedere, Nodemon non è più presente nel file package.json.

Come rimuovere un pacchetto globale con npm uninstall

Un pacchetto globale è un pacchetto che è installato globalmente nella tua macchina, quindi non è necessario installarlo ogni volta che ne hai bisogno.

Per rimuovere un pacchetto globale, hai bisogno di aggiungere l'opzione -g a npm uninstall e specificare il nome del pacchetto.

La sintassi base per fare questo è npm uninstall -g nome-pacchetto.

Per mostrarti come rimuovere un pacchetto globale userò un pacchetto chiamato CORS (Cross-Origin Resource Sharing).

CORS blocca la SOP (Same Origin Policy) dei browser, così tu possa fare richieste da un browser a un altro.

Nello screenshot qui sotto, puoi vedere che CORS non è presente come pacchetto nel file package.json.

CORS non è elencato perché è installato globalmente nella macchina, non nella cartella del progetto.

Se vuoi vedere un pacchetto installato globalmente puoi usare questo comando: npm list -g.

Come puoi vedere, adesso CORS è presente nella lista come un pacchetto globale.

Per eliminare CORS globalmente eseguirò questo comando: npm uninstall -g cors.

Dopo averlo eseguito, puoi vedere che non c'è più il pacchetto CORS con npm list –g.

Conclusione

In questo articolo, hai imparato i vari modi per disinstallare diversi tipi di pacchetti NPM, così da avere un maggior controllo del codebase e rimuovere pacchetti non necessari.

Grazie per aver letto questo articolo.

Se lo hai trovato utile, condividilo così che anche altri possano vederlo.