‫-: Ora è finalmente giunto il momento di utilizzare l'API di
‫accesso che abbiamo creato nelle sezioni
‫precedenti e ci sono un sacco di
‫cose da fare qui per far interagire il front-end con il back-end.
‫E quindi lo stiamo facendo in lezioni separate.
‫Comunque, ora cominciamo.
‫Ed è così che funzionerà.
‫Quindi, consentiremo agli utenti di accedere al nostro sito
‫Web eseguendo una richiesta HTTP o una chiamata ATEX, come
‫piace anche a molte persone.
‫E stiamo facendo quella richiesta HTTP all'endpoint dell'API di accesso che abbiamo
‫implementato prima di utilizzare i dati
‫che l'utente fornisce in questo modulo che abbiamo qui.
‫Quindi, ricorda che la nostra API invierà quindi un
‫cookie che viene automaticamente memorizzato nel browser.
‫E viene anche automaticamente rispedito
‫ad ogni richiesta successiva.
‫E come vedrai, questa è una chiave
‫fondamentale per far funzionare il nostro sistema di autenticazione.
‫Comunque, dal momento
‫che stiamo eseguendo questa richiesta
‫HTTP nel browser, lavoreremo ancora una volta sul lato client.
‫Ma comunque, poiché stiamo
‫eseguendo una richiesta HTTP nel browser, lavoreremo
‫ancora sul codice dello script dei processi lato client.
‫Proprio come abbiamo fatto con l'implementazione di Mapbox.
‫Bene?
‫Quindi ora andiamo avanti e creiamo un nuovo file qui.
‫E quindi questo è in public, js e un nuovo file,
‫che chiamerò login. js e nel
‫prossimo video, in realtà raggrupperemo tutti
‫questi file JavaScript separati
‫che stiamo creando qui per il
‫front-end in un unico grande pacchetto.
‫Bene?
‫Ma per ora, concentriamoci solo sul funzionamento di
‫questa funzionalità di accesso.
‫Ma comunque, iniziamo ora aggiungendo un ascoltatore di
‫eventi, ascoltando l'evento di invio sul nostro modulo di accesso, ok?
‫Quindi, il nostro modulo di accesso ha questa classe di modulo qui.
‫Ok, ora selezioniamo questo come elemento
‫e poi lì, ascoltiamo l'evento di invio.
‫Spero che tu abbia familiarità con questo tipo
‫di logica nel JavaScript lato client.
‫E quindi, si spera, questo non è niente di nuovo per te.
‫Quindi, documento. querySelector, che usiamo
‫per selezionare in base alla classe.
‫Aggiungi quindi il nome
‫del selettore e ora aggiungi EventListener, in ascolto dell'evento di invio.
‫Quindi, in pratica, un evento che il browser si attiva
‫ogni volta che un utente fa clic sul pulsante di invio nel modulo.
‫Aggiungi poi nella
‫funzione di raccolta, avremo accesso a quell'evento stesso, ok?
‫E quindi la terza cosa che
‫effettivamente facciamo è dire evento. preventDefault.
‫Va bene?
‫Quindi questo impedisce al modulo di caricare qualsiasi altra pagina.
‫Successivamente, prendiamo effettivamente l'e-mail e
‫il valore della password che l'utente inserisce.
‫E quindi questi sono, in questo elemento, con l'e-mail
‫ID e la password ID, ok?
‫Quindi questi due
‫campi di input e prendiamo anche questi dati.
‫(digitando su una tastiera) Quindi document,
‫ottieni elemento per
‫ID.
‫E-mail, quindi utilizziamo la proprietà value per
‫raggiungere quel valore là fuori.
‫Non nodeValue, solo value.
‫Duplichiamo questa riga, ok?
‫E quindi ora eseguiamo l'effettivo
‫accesso in una funzione separata, ok?
‫Ora arriviamo qui, questo
‫errore di eslint e questo è di nuovo perché
‫abbiamo configurato eslint solo per il codice non JS.
‫E quindi disabilitiamolo proprio come abbiamo fatto qui.
‫Quindi prendi questo pezzo di codice.
‫Bene?
‫E ora come stavo
‫dicendo, ora creiamo quella funzione di accesso.
‫Quindi, proprio
‫così, e questa funzione accetterà
‫un'e-mail e una password.
‫E prima
‫di tutto, vediamo se questo codice funziona davvero.
‫Quindi avviseremo, quindi
‫fondamentalmente creeremo una finestra di avviso.
‫E con questa email e password.
‫Bene?
‫Ora, ovviamente, dobbiamo anche
‫richiamare questa funzione con e-mail e password.
‫E infine, dobbiamo includere anche questo file di accesso
‫nel nostro modello di base, ok?
‫E ancora, come stavo dicendo all'inizio,
‫nel prossimo video, raggrupperemo
‫tutto questo codice front-end qui insieme in
‫un unico grande file JavaScript.
‫Bene?
‫Quindi è molto meglio per le prestazioni
‫ed è anche una migliore esperienza di sviluppo per noi stessi.
‫Ad ogni modo, ora dovrebbe funzionare.
‫Ricarichiamo solo questa pagina qui.
‫Quindi devo compilare, convalidare qui,
‫comunque Chrome non mi permetterà nemmeno di inviare il modulo.
‫Bene, quindi qui riceviamo il nostro
‫avviso con l'e-mail che abbiamo appena
‫inserito e quindi la password,
‫immagino, non
‫viene visualizzata perché abbiamo specificato due valori lì.
‫Quindi, invece, specifichiamo un oggetto qui e vediamo se
‫funziona di nuovo.
‫(digitando su una tastiera) Bene, immagino che qui
‫tenti di convertire
‫quell'oggetto in una stringa.
‫Ok, ma non importa qui.
‫Di solito sono più abituato a usare Console. log invece di alert.
‫Bene?
‫Ma comunque, sono sicuro che ora funziona qui.
‫E quindi ora andiamo avanti e creiamo questa funzione.
‫Quindi, per eseguire queste richieste HTTP per l'accesso,
‫utilizzeremo
‫una libreria molto popolare chiamata Axios, ok?
‫E nel prossimo video scaricheremo questa
‫libreria da NPM e la raggrupperemo insieme a tutti
‫gli altri nostri
‫script, ma per ora usiamola da un CDN.
‫Quindi, facciamo solo Google Axios
‫CDN, va bene?
‫Quindi, vai avanti e copia questo qui, e
‫poi, nel nostro
‫script di base, mettiamolo qui al primo, va bene?
‫Quindi questo
‫esporrà un oggetto Axios all'ambito globale,
‫che possiamo quindi utilizzare nella nostra funzione di accesso, ok?
‫E quindi ora possiamo dire Axios
‫e quindi passare le opzioni per la nostra richiesta.
‫Quindi, prima di tutto, diciamo che stiamo facendo una richiesta successiva.
‫Quindi, abbiamo bisogno di un URL.
‫Bene?
‫Quindi prendiamolo da Postman.
‫Quindi, questo è il nostro URL qui.
‫E poi,
‫ovviamente, aggiungeremo anche l'host.
‫Quindi qui, ovviamente, è fondamentalmente http e
‫quindi host locale.
‫E quindi
‫questo è il nostro input di accesso,
‫e ora dobbiamo specificare i dati
‫che stiamo inviando insieme alla richiesta nel corpo.
‫Bene?
‫E quindi questa è l'e-mail: e-mail.
‫E quindi, come già saprai, possiamo rimuovere questa email.
‫Va bene?
‫Quindi qui si chiama e-mail, perché
‫il nostro punto finale si aspetta che i dati vengano chiamati e-mail, giusto?
‫Quindi questo è quello che abbiamo qui nel corpo.
‫Dobbiamo specificare una proprietà chiamata email e
‫una chiamata password.
‫E quindi è esattamente quello che
‫stiamo facendo qui, ma ha lo stesso nome di questo parametro qui.
‫E quindi basta dire e-mail
‫e lo stesso vale per la password.
‫Va bene?
‫Ora, Axios qui restituisce una promessa
‫e quindi usiamo effettivamente un
‫singolo wait per aspettare che quel valore ritorni.
‫Quindi aspetta qui e poi asincrono qui.
‫Ora, tieni presente che si tratta di codice rivolto al
‫client e solo i browser
‫più moderni possono effettivamente eseguire una singola funzione di
‫attesa, ma in questo corso non ho intenzione di approfondire questo aspetto.
‫Va bene?
‫Ad ogni modo, salviamo il risultato di questo in
‫attesa della promessa nella variabile risultato.
‫E poi basta, per dare un'occhiata al
‫risultato, diciamo console. risultato del registro.
‫Va bene?
‫Una cosa che mi piace davvero di Axios
‫è il fatto che genererà un
‫errore ogni volta che riceviamo un errore dal nostro input API.
‫Quindi diciamo che c'è una password errata e
‫quindi il server invierà un 403 e
‫quindi fondamentalmente un errore.
‫Quindi, ogni volta che si
‫verifica un errore, anche Axios ne attiverà.
‫E quindi, è molto utile perché, con quello, ora possiamo
‫usare un blocco try catch.
‫Va bene?
‫Quindi, fondamentalmente, per fare un po' di gestione degli
‫errori qui sul lato client.
‫Quindi, per esempio,
‫quando l'utente ha effettuato l'accesso correttamente,
‫allora vuoi visualizzare un messaggio che
‫lo dice, e forse qualche altra
‫logica, ma in caso contrario, beh, allora inseriamo il
‫blocco
‫catch e possiamo quindi , esegui qualche altra azione in base all'errore.
‫(digitando su una tastiera) Quindi, diamo
‫un'occhiata anche all'errore.
‫E solo per essere sicuro, voglio anche registrare l'e-mail e
‫la password nella console.
‫Quindi, proviamolo qui.
‫Ricarica la
‫nostra pagina, (digitando su una tastiera) E sto
‫inserendo una password sbagliata ora, ok?
‫Prova uno, due, tre, quattro, cinque.
‫Diamo un'occhiata anche alla nostra console qui.
‫E qui riceviamo questo errore da mapbox, js,
‫ma non preoccuparti.
‫Lo ripareremo un po' più tardi.
‫Ma per ora, diamo un'occhiata a cosa succede qui.
‫E qui abbiamo qualche bell'errore, va bene?
‫E così, in realtà, quando dobbiamo dare un'occhiata qui c'è
‫un errore. risposta.
‫E poi i dati dei punti.
‫Ok, lo troverai qui nella documentazione di Axios nel caso
‫ti stia chiedendo da dove viene.
‫Bene?
‫Lasciami andare avanti e copiare questa
‫email perché non è così bello scriverla sempre manualmente.
‫E ora otteniamo effettivamente un errore ben formattato qui.
‫Va bene?
‫E quindi questo è fondamentalmente esattamente il jsencode
‫che abbiamo inviato dal nostro server.
‫Destra?
‫Quindi, questo è esattamente
‫lo stesso che abbiamo visto in Postman.
‫Quindi otteniamo il nostro intero errore, il messaggio e anche lo stack.
‫E così vediamo che probabilmente non abbiamo fornito l'e-mail
‫e la password correttamente per qualche motivo.
‫Allora torniamo indietro, diamo un'occhiata.
‫Oh, quindi ho fatto qualcosa di strano qui dove ho passato
‫un oggetto sia con l'e-mail
‫che con la password.
‫E quindi penso che sia di prima
‫quando ha provato a fare
‫quell'avviso e immagino di averlo fatto nel posto sbagliato.
‫E quindi, ecco perché qui abbiamo visto indefinito.
‫E qui abbiamo questo oggetto.
‫Quindi, in pratica, l'e-mail era l'intero oggetto
‫e la password era quindi indefinita.
‫Va bene?
‫Quindi ora, questo dovrebbe
‫risolverlo, ricaricalo.
‫Ah, ora otteniamo questo errore corretto che
‫in realtà ci aspettavamo.
‫Quindi ora è un'e-mail o una password
‫errata perché ho specificato una password errata, ok?
‫Ma ora, rimuoviamo effettivamente i cinque e
‫quindi i test uno, due, tre, quattro dovrebbero essere corretti.
‫Quindi, accediamo e
‫ora otteniamo una risposta di 200.
‫Quindi, un successo.
‫Quindi apriamo questo e
‫ciò che in realtà ci interessa sono i dati.
‫Quindi sostanzialmente risposta. data perché questo
‫è quindi
‫effettivamente dove si trova la nostra risposta jsen.
‫Quindi qui, otteniamo
‫questi dati qui e otteniamo anche lo stato e il token.
‫E quindi, questo è qui il nostro token web jsen
‫corretto corrispondente a questo utente connesso.
‫Ora, ciò che è veramente
‫interessante è dare un'occhiata ai nostri cookie.
‫E lo facciamo almeno in Google Chrome
‫facendo clic su questa icona
‫qui e poi qui in basso, hai i cookie.
‫E dice anche che la nostra connessione non è
‫sicura ed
‫è semplicemente perché non stiamo usando HTTPS a questo punto, ma
‫non importa a questo proposito.
‫Ciò che conta qui è che ora
‫abbiamo questo cookie e in effetti si chiama token
‫web jsen e ha esattamente il token web jsen che
‫vediamo qui sotto.
‫Quindi, questa è solo la fine, fondamentalmente, della
‫stringa, quindi vedi che è uguale a quello che abbiamo quaggiù.
‫Ed è proprio questo cookie che ci
‫consentirà di costruire l'intera autenticazione.
‫Anche in questo caso, perché il browser non invierà
‫questo cookie insieme ad ogni nuova richiesta.
‫E lascia che te lo mostri davvero nel nostro back-end.
‫Quindi torniamo lì e andiamo su app. js.
‫E così ora siamo di nuovo nella nostra nota, o
‫in realtà nel nostro codice Express.
‫Ora, per ottenere effettivamente l'accesso
‫ai cookie che sono nella nostra richiesta.
‫In Express, è necessario installare un determinato middleware.
‫E quindi dobbiamo installarlo da un pacchetto NPM.
‫E così è di nuovo, vieni al nostro
‫altro terminale e
‫poi NPM installa il parser dei cookie.
‫Va bene?
‫Quindi, in pratica, questo pacchetto analizzerà tutti
‫i cookie dalla richiesta in arrivo.
‫cookieParser.
‫Bene?
‫E ora usiamolo vicino a questo parser del corpo.
‫Va bene?
‫Quindi questi due sono molto simili.
‫Questo primo analizza i dati dal
‫corpo e il secondo analizza i dati dai cookie.
‫E così ora, se in questo middleware qui,
‫possiamo usare request. biscotti.
‫E così ora per
‫ogni richiesta, visualizzeremo sempre tutti i cookie nella console.
‫Quindi, se ora ricarichiamo questa pagina, o davvero
‫qualsiasi altra pagina, lasciami
‫aprire questa qui in una nuova scheda.
‫Quindi, se torniamo indietro, dovremmo vedere quel cookie qui.
‫E, infatti, eccolo qui.
‫Quindi questo è il cookie che è
‫stato appena inviato alla nostra applicazione caricando quella pagina nel browser.
‫E se
‫lo faccio di nuovo, ne vedrai un altro, giusto?
‫Quindi eccolo qui.
‫E così ora possiamo usarlo per proteggere il nostro percorso.
‫Va bene, allora proviamolo.
‫Va bene?
‫Ma prima di
‫poterlo fare, abbiamo bisogno che il
‫nostro controller off lo aggiunga effettivamente anche qui.
‫Quindi in questo momento stiamo solo leggendo il token web
‫jsen dall'intestazione di autorizzazione.
‫Destra?
‫E solo se iniziano con questo portatore, ok?
‫Quindi per il token al portatore.
‫Ma ora, in pratica, vogliamo anche leggere il
‫token web jsen da un cookie.
‫E quindi quello che possiamo fare qui è fondamentalmente un altro
‫se, quindi se non ci fosse alcun token nell'intestazione
‫dell'autorizzazione, beh, allora diamo un'occhiata ai cookie.
‫Quindi richiesta. biscotti. token web jsen.
‫Quindi JWT, che è il nome
‫del cookie, e quindi, nell'oggetto cookie, ci
‫sarà una proprietà chiamata JWT.
‫Quindi questo qui, giusto?
‫E quindi se questo
‫esiste, beh, allora il token dovrebbe essere esattamente quello.
‫Quindi richiesta. biscotti. jwt.
‫Va bene.
‫E così ora con questo,
‫siamo anche in grado di autenticare gli utenti in base ai
‫token inviati tramite i cookie e non solo all'intestazione dell'autorizzazione.
‫Grande.
‫E giusto per testarlo, proteggiamo una delle
‫nostre vie qui in vista.
‫E lo farò con questa pagina dei dettagli del tour, ok?
‫Quindi è solo
‫per testare perché ovviamente non ha molto senso,
‫ma volevo solo mostrarti che così com'è adesso, il
‫nostro login funziona già.
‫Quindi importiamo qui il authController.
‫(digitando su una tastiera) E
‫poi, proprio come prima, modifica qui in questo percorso.
‫Quindi authController. proteggere.
‫E quindi questa non è una novità a questo punto.
‫E poi solo se l'utente ha effettuato l'accesso, possiamo
‫andare al getTour.
‫Grande.
‫Quindi quello che farò ora è sostanzialmente eliminare prima questo cookie
‫solo per mostrarti cosa succede quando un utente
‫non connesso tenta
‫di accedere a quel percorso ora.
‫E quindi fondamentalmente, se rimuoviamo questo cookie, è
‫come disconnettere l'utente, giusto?
‫Quindi, se ora dai un'occhiata ai nostri
‫tour, allora dovrebbe andare bene.
‫Ma, se ora proviamo ad accedere a
‫questa pagina, dovremmo ricevere un errore.
‫E infatti, eccolo lì, dicendo che non sei loggato.
‫Abbastanza giusto.
‫Quindi torniamo indietro e accediamo effettivamente.
‫Va bene?
‫Quindi eccoci qui.
‫E poi in futuro, ovviamente, implementeremo anche alcune finestre di avviso qui
‫e tutte
‫quelle cose buone.
‫Ma per ora, di nuovo, facciamolo funzionare.
‫E così vedi che siamo
‫tornati ad avere il nostro bel biscotto qui, ok?
‫E quindi, proviamo ora ad accedere a questo percorso protetto.
‫E infatti, ora funziona.
‫Fantastico, è già davvero fantastico, giusto?
‫Ora idealmente, quando un utente ha effettuato l'accesso,
‫non vogliamo visualizzare questi pulsanti
‫qui, ma invece, come un menu utente o un'immagine dell'utente.
‫Quindi, in pratica,
‫mostra che l'utente è effettivamente connesso, giusto?
‫Quindi facciamolo nel prossimo video, insieme al raggruppamento di tutti
‫i nostri
‫file JavaScript nel front-end come spiegavo prima.
‫Quindi non aspettare, passiamo subito al prossimo.
‫Ci vediamo lì.