1 00:00:01,160 --> 00:00:04,610 ‫-: Ora è finalmente giunto il momento di utilizzare l'API di 2 00:00:04,610 --> 00:00:06,830 ‫accesso che abbiamo creato nelle sezioni 3 00:00:06,830 --> 00:00:09,100 ‫precedenti e ci sono un sacco di 4 00:00:09,100 --> 00:00:12,880 ‫cose da fare qui per far interagire il front-end con il back-end. 5 00:00:12,880 --> 00:00:15,680 ‫E quindi lo stiamo facendo in lezioni separate. 6 00:00:15,680 --> 00:00:17,833 ‫Comunque, ora cominciamo. 7 00:00:19,740 --> 00:00:21,570 ‫Ed è così che funzionerà. 8 00:00:21,570 --> 00:00:25,180 ‫Quindi, consentiremo agli utenti di accedere al nostro sito 9 00:00:25,180 --> 00:00:28,990 ‫Web eseguendo una richiesta HTTP o una chiamata ATEX, come 10 00:00:28,990 --> 00:00:31,580 ‫piace anche a molte persone. 11 00:00:31,580 --> 00:00:35,890 ‫E stiamo facendo quella richiesta HTTP all'endpoint dell'API di accesso che abbiamo 12 00:00:35,890 --> 00:00:38,340 ‫implementato prima di utilizzare i dati 13 00:00:38,340 --> 00:00:41,820 ‫che l'utente fornisce in questo modulo che abbiamo qui. 14 00:00:41,820 --> 00:00:45,614 ‫Quindi, ricorda che la nostra API invierà quindi un 15 00:00:45,614 --> 00:00:49,010 ‫cookie che viene automaticamente memorizzato nel browser. 16 00:00:49,010 --> 00:00:51,650 ‫E viene anche automaticamente rispedito 17 00:00:51,650 --> 00:00:53,990 ‫ad ogni richiesta successiva. 18 00:00:53,990 --> 00:00:56,950 ‫E come vedrai, questa è una chiave 19 00:00:56,950 --> 00:01:00,040 ‫fondamentale per far funzionare il nostro sistema di autenticazione. 20 00:01:00,040 --> 00:01:01,940 ‫Comunque, dal momento 21 00:01:01,940 --> 00:01:04,518 ‫che stiamo eseguendo questa richiesta 22 00:01:04,518 --> 00:01:09,220 ‫HTTP nel browser, lavoreremo ancora una volta sul lato client. 23 00:01:09,220 --> 00:01:10,900 ‫Ma comunque, poiché stiamo 24 00:01:10,900 --> 00:01:13,570 ‫eseguendo una richiesta HTTP nel browser, lavoreremo 25 00:01:13,570 --> 00:01:17,010 ‫ancora sul codice dello script dei processi lato client. 26 00:01:17,010 --> 00:01:20,410 ‫Proprio come abbiamo fatto con l'implementazione di Mapbox. 27 00:01:20,410 --> 00:01:21,570 ‫Bene? 28 00:01:21,570 --> 00:01:24,430 ‫Quindi ora andiamo avanti e creiamo un nuovo file qui. 29 00:01:24,430 --> 00:01:29,063 ‫E quindi questo è in public, js e un nuovo file, 30 00:01:30,190 --> 00:01:33,030 ‫che chiamerò login. js e nel 31 00:01:33,960 --> 00:01:36,380 ‫prossimo video, in realtà raggrupperemo tutti 32 00:01:36,380 --> 00:01:38,260 ‫questi file JavaScript separati 33 00:01:38,260 --> 00:01:40,630 ‫che stiamo creando qui per il 34 00:01:40,630 --> 00:01:42,970 ‫front-end in un unico grande pacchetto. 35 00:01:42,970 --> 00:01:43,820 ‫Bene? 36 00:01:43,820 --> 00:01:47,240 ‫Ma per ora, concentriamoci solo sul funzionamento di 37 00:01:47,240 --> 00:01:49,510 ‫questa funzionalità di accesso. 38 00:01:49,510 --> 00:01:52,820 ‫Ma comunque, iniziamo ora aggiungendo un ascoltatore di 39 00:01:52,820 --> 00:01:57,139 ‫eventi, ascoltando l'evento di invio sul nostro modulo di accesso, ok? 40 00:01:57,139 --> 00:02:01,260 ‫Quindi, il nostro modulo di accesso ha questa classe di modulo qui. 41 00:02:01,260 --> 00:02:04,307 ‫Ok, ora selezioniamo questo come elemento 42 00:02:04,307 --> 00:02:07,820 ‫e poi lì, ascoltiamo l'evento di invio. 43 00:02:07,820 --> 00:02:10,430 ‫Spero che tu abbia familiarità con questo tipo 44 00:02:10,430 --> 00:02:12,510 ‫di logica nel JavaScript lato client. 45 00:02:12,510 --> 00:02:14,810 ‫E quindi, si spera, questo non è niente di nuovo per te. 46 00:02:15,810 --> 00:02:19,193 ‫Quindi, documento. querySelector, che usiamo 47 00:02:20,260 --> 00:02:23,063 ‫per selezionare in base alla classe. 48 00:02:24,940 --> 00:02:27,040 ‫Aggiungi quindi il nome 49 00:02:27,040 --> 00:02:32,040 ‫del selettore e ora aggiungi EventListener, in ascolto dell'evento di invio. 50 00:02:32,940 --> 00:02:35,740 ‫Quindi, in pratica, un evento che il browser si attiva 51 00:02:35,740 --> 00:02:39,363 ‫ogni volta che un utente fa clic sul pulsante di invio nel modulo. 52 00:02:40,220 --> 00:02:41,810 ‫Aggiungi poi nella 53 00:02:41,810 --> 00:02:46,123 ‫funzione di raccolta, avremo accesso a quell'evento stesso, ok? 54 00:02:47,680 --> 00:02:49,500 ‫E quindi la terza cosa che 55 00:02:49,500 --> 00:02:52,843 ‫effettivamente facciamo è dire evento. preventDefault. 56 00:02:56,770 --> 00:02:57,750 ‫Va bene? 57 00:02:57,750 --> 00:03:01,580 ‫Quindi questo impedisce al modulo di caricare qualsiasi altra pagina. 58 00:03:01,580 --> 00:03:03,925 ‫Successivamente, prendiamo effettivamente l'e-mail e 59 00:03:03,925 --> 00:03:06,740 ‫il valore della password che l'utente inserisce. 60 00:03:06,740 --> 00:03:10,485 ‫E quindi questi sono, in questo elemento, con l'e-mail 61 00:03:10,485 --> 00:03:13,310 ‫ID e la password ID, ok? 62 00:03:13,310 --> 00:03:15,020 ‫Quindi questi due 63 00:03:15,020 --> 00:03:18,114 ‫campi di input e prendiamo anche questi dati. 64 00:03:18,114 --> 00:03:21,364 ‫(digitando su una tastiera) Quindi document, 65 00:03:24,933 --> 00:03:26,440 ‫ottieni elemento per 66 00:03:26,440 --> 00:03:27,933 ‫ID. 67 00:03:29,310 --> 00:03:32,230 ‫E-mail, quindi utilizziamo la proprietà value per 68 00:03:32,230 --> 00:03:34,670 ‫raggiungere quel valore là fuori. 69 00:03:34,670 --> 00:03:37,893 ‫Non nodeValue, solo value. 70 00:03:39,520 --> 00:03:42,930 ‫Duplichiamo questa riga, ok? 71 00:03:42,930 --> 00:03:45,330 ‫E quindi ora eseguiamo l'effettivo 72 00:03:45,330 --> 00:03:47,940 ‫accesso in una funzione separata, ok? 73 00:03:47,940 --> 00:03:49,880 ‫Ora arriviamo qui, questo 74 00:03:49,880 --> 00:03:53,040 ‫errore di eslint e questo è di nuovo perché 75 00:03:53,040 --> 00:03:56,450 ‫abbiamo configurato eslint solo per il codice non JS. 76 00:03:56,450 --> 00:03:59,963 ‫E quindi disabilitiamolo proprio come abbiamo fatto qui. 77 00:04:01,340 --> 00:04:03,233 ‫Quindi prendi questo pezzo di codice. 78 00:04:07,790 --> 00:04:08,630 ‫Bene? 79 00:04:08,630 --> 00:04:09,910 ‫E ora come stavo 80 00:04:09,910 --> 00:04:12,123 ‫dicendo, ora creiamo quella funzione di accesso. 81 00:04:15,270 --> 00:04:16,370 ‫Quindi, proprio 82 00:04:17,380 --> 00:04:19,120 ‫così, e questa funzione accetterà 83 00:04:19,120 --> 00:04:20,520 ‫un'e-mail e una password. 84 00:04:24,840 --> 00:04:25,770 ‫E prima 85 00:04:25,770 --> 00:04:29,080 ‫di tutto, vediamo se questo codice funziona davvero. 86 00:04:29,080 --> 00:04:30,533 ‫Quindi avviseremo, quindi 87 00:04:31,560 --> 00:04:33,740 ‫fondamentalmente creeremo una finestra di avviso. 88 00:04:33,740 --> 00:04:36,563 ‫E con questa email e password. 89 00:04:38,910 --> 00:04:39,743 ‫Bene? 90 00:04:42,920 --> 00:04:45,710 ‫Ora, ovviamente, dobbiamo anche 91 00:04:45,710 --> 00:04:49,300 ‫richiamare questa funzione con e-mail e password. 92 00:04:49,300 --> 00:04:54,300 ‫E infine, dobbiamo includere anche questo file di accesso 93 00:04:54,600 --> 00:04:58,370 ‫nel nostro modello di base, ok? 94 00:04:58,370 --> 00:05:00,600 ‫E ancora, come stavo dicendo all'inizio, 95 00:05:00,600 --> 00:05:02,340 ‫nel prossimo video, raggrupperemo 96 00:05:02,340 --> 00:05:04,640 ‫tutto questo codice front-end qui insieme in 97 00:05:04,640 --> 00:05:06,423 ‫un unico grande file JavaScript. 98 00:05:07,820 --> 00:05:08,653 ‫Bene? 99 00:05:08,653 --> 00:05:10,810 ‫Quindi è molto meglio per le prestazioni 100 00:05:10,810 --> 00:05:14,143 ‫ed è anche una migliore esperienza di sviluppo per noi stessi. 101 00:05:15,250 --> 00:05:18,330 ‫Ad ogni modo, ora dovrebbe funzionare. 102 00:05:18,330 --> 00:05:20,093 ‫Ricarichiamo solo questa pagina qui. 103 00:05:25,783 --> 00:05:27,620 ‫Quindi devo compilare, convalidare qui, 104 00:05:27,620 --> 00:05:30,563 ‫comunque Chrome non mi permetterà nemmeno di inviare il modulo. 105 00:05:32,920 --> 00:05:35,100 ‫Bene, quindi qui riceviamo il nostro 106 00:05:35,100 --> 00:05:37,020 ‫avviso con l'e-mail che abbiamo appena 107 00:05:37,020 --> 00:05:38,860 ‫inserito e quindi la password, 108 00:05:38,860 --> 00:05:40,080 ‫immagino, non 109 00:05:40,080 --> 00:05:42,983 ‫viene visualizzata perché abbiamo specificato due valori lì. 110 00:05:46,140 --> 00:05:50,470 ‫Quindi, invece, specifichiamo un oggetto qui e vediamo se 111 00:05:50,470 --> 00:05:52,020 ‫funziona di nuovo. 112 00:05:54,072 --> 00:05:57,322 ‫(digitando su una tastiera) Bene, immagino che qui 113 00:06:03,770 --> 00:06:05,410 ‫tenti di convertire 114 00:06:05,410 --> 00:06:07,473 ‫quell'oggetto in una stringa. 115 00:06:08,400 --> 00:06:11,530 ‫Ok, ma non importa qui. 116 00:06:11,530 --> 00:06:15,573 ‫Di solito sono più abituato a usare Console. log invece di alert. 117 00:06:16,530 --> 00:06:17,900 ‫Bene? 118 00:06:17,900 --> 00:06:20,960 ‫Ma comunque, sono sicuro che ora funziona qui. 119 00:06:20,960 --> 00:06:23,783 ‫E quindi ora andiamo avanti e creiamo questa funzione. 120 00:06:24,640 --> 00:06:28,910 ‫Quindi, per eseguire queste richieste HTTP per l'accesso, 121 00:06:28,910 --> 00:06:29,890 ‫utilizzeremo 122 00:06:29,890 --> 00:06:34,130 ‫una libreria molto popolare chiamata Axios, ok? 123 00:06:34,130 --> 00:06:36,430 ‫E nel prossimo video scaricheremo questa 124 00:06:36,430 --> 00:06:39,460 ‫libreria da NPM e la raggrupperemo insieme a tutti 125 00:06:39,460 --> 00:06:41,000 ‫gli altri nostri 126 00:06:41,000 --> 00:06:43,713 ‫script, ma per ora usiamola da un CDN. 127 00:06:45,240 --> 00:06:48,860 ‫Quindi, facciamo solo Google Axios 128 00:06:48,860 --> 00:06:52,260 ‫CDN, va bene? 129 00:06:52,260 --> 00:06:55,513 ‫Quindi, vai avanti e copia questo qui, e 130 00:06:57,650 --> 00:06:59,403 ‫poi, nel nostro 131 00:07:00,610 --> 00:07:04,583 ‫script di base, mettiamolo qui al primo, va bene? 132 00:07:06,230 --> 00:07:07,300 ‫Quindi questo 133 00:07:07,300 --> 00:07:10,080 ‫esporrà un oggetto Axios all'ambito globale, 134 00:07:10,080 --> 00:07:14,500 ‫che possiamo quindi utilizzare nella nostra funzione di accesso, ok? 135 00:07:14,500 --> 00:07:17,123 ‫E quindi ora possiamo dire Axios 136 00:07:18,000 --> 00:07:21,003 ‫e quindi passare le opzioni per la nostra richiesta. 137 00:07:22,320 --> 00:07:26,380 ‫Quindi, prima di tutto, diciamo che stiamo facendo una richiesta successiva. 138 00:07:26,380 --> 00:07:28,593 ‫Quindi, abbiamo bisogno di un URL. 139 00:07:29,770 --> 00:07:31,140 ‫Bene? 140 00:07:31,140 --> 00:07:33,313 ‫Quindi prendiamolo da Postman. 141 00:07:39,530 --> 00:07:41,543 ‫Quindi, questo è il nostro URL qui. 142 00:07:43,250 --> 00:07:45,040 ‫E poi, 143 00:07:45,040 --> 00:07:47,853 ‫ovviamente, aggiungeremo anche l'host. 144 00:07:49,400 --> 00:07:52,910 ‫Quindi qui, ovviamente, è fondamentalmente http e 145 00:07:55,440 --> 00:07:57,093 ‫quindi host locale. 146 00:08:01,250 --> 00:08:02,530 ‫E quindi 147 00:08:02,530 --> 00:08:05,260 ‫questo è il nostro input di accesso, 148 00:08:05,260 --> 00:08:07,490 ‫e ora dobbiamo specificare i dati 149 00:08:07,490 --> 00:08:10,473 ‫che stiamo inviando insieme alla richiesta nel corpo. 150 00:08:13,040 --> 00:08:13,873 ‫Bene? 151 00:08:13,873 --> 00:08:17,870 ‫E quindi questa è l'e-mail: e-mail. 152 00:08:17,870 --> 00:08:21,600 ‫E quindi, come già saprai, possiamo rimuovere questa email. 153 00:08:21,600 --> 00:08:22,433 ‫Va bene? 154 00:08:22,433 --> 00:08:24,810 ‫Quindi qui si chiama e-mail, perché 155 00:08:24,810 --> 00:08:29,210 ‫il nostro punto finale si aspetta che i dati vengano chiamati e-mail, giusto? 156 00:08:29,210 --> 00:08:31,250 ‫Quindi questo è quello che abbiamo qui nel corpo. 157 00:08:31,250 --> 00:08:33,997 ‫Dobbiamo specificare una proprietà chiamata email e 158 00:08:33,997 --> 00:08:35,790 ‫una chiamata password. 159 00:08:35,790 --> 00:08:37,830 ‫E quindi è esattamente quello che 160 00:08:37,830 --> 00:08:41,630 ‫stiamo facendo qui, ma ha lo stesso nome di questo parametro qui. 161 00:08:41,630 --> 00:08:44,030 ‫E quindi basta dire e-mail 162 00:08:45,000 --> 00:08:48,123 ‫e lo stesso vale per la password. 163 00:08:49,720 --> 00:08:50,760 ‫Va bene? 164 00:08:50,760 --> 00:08:53,350 ‫Ora, Axios qui restituisce una promessa 165 00:08:53,350 --> 00:08:55,890 ‫e quindi usiamo effettivamente un 166 00:08:55,890 --> 00:08:59,210 ‫singolo wait per aspettare che quel valore ritorni. 167 00:08:59,210 --> 00:09:04,210 ‫Quindi aspetta qui e poi asincrono qui. 168 00:09:05,110 --> 00:09:07,950 ‫Ora, tieni presente che si tratta di codice rivolto al 169 00:09:07,950 --> 00:09:09,750 ‫client e solo i browser 170 00:09:09,750 --> 00:09:12,290 ‫più moderni possono effettivamente eseguire una singola funzione di 171 00:09:12,290 --> 00:09:15,573 ‫attesa, ma in questo corso non ho intenzione di approfondire questo aspetto. 172 00:09:17,130 --> 00:09:18,310 ‫Va bene? 173 00:09:18,310 --> 00:09:22,510 ‫Ad ogni modo, salviamo il risultato di questo in 174 00:09:22,510 --> 00:09:25,640 ‫attesa della promessa nella variabile risultato. 175 00:09:25,640 --> 00:09:28,623 ‫E poi basta, per dare un'occhiata al 176 00:09:30,000 --> 00:09:33,453 ‫risultato, diciamo console. risultato del registro. 177 00:09:34,500 --> 00:09:35,333 ‫Va bene? 178 00:09:35,333 --> 00:09:37,870 ‫Una cosa che mi piace davvero di Axios 179 00:09:37,870 --> 00:09:40,240 ‫è il fatto che genererà un 180 00:09:40,240 --> 00:09:43,780 ‫errore ogni volta che riceviamo un errore dal nostro input API. 181 00:09:43,780 --> 00:09:46,480 ‫Quindi diciamo che c'è una password errata e 182 00:09:46,480 --> 00:09:48,980 ‫quindi il server invierà un 403 e 183 00:09:48,980 --> 00:09:50,610 ‫quindi fondamentalmente un errore. 184 00:09:50,610 --> 00:09:52,768 ‫Quindi, ogni volta che si 185 00:09:52,768 --> 00:09:55,290 ‫verifica un errore, anche Axios ne attiverà. 186 00:09:55,290 --> 00:09:58,680 ‫E quindi, è molto utile perché, con quello, ora possiamo 187 00:09:58,680 --> 00:10:00,763 ‫usare un blocco try catch. 188 00:10:02,660 --> 00:10:03,493 ‫Va bene? 189 00:10:03,493 --> 00:10:05,840 ‫Quindi, fondamentalmente, per fare un po' di gestione degli 190 00:10:05,840 --> 00:10:07,173 ‫errori qui sul lato client. 191 00:10:08,750 --> 00:10:09,770 ‫Quindi, per esempio, 192 00:10:09,770 --> 00:10:12,090 ‫quando l'utente ha effettuato l'accesso correttamente, 193 00:10:12,090 --> 00:10:14,375 ‫allora vuoi visualizzare un messaggio che 194 00:10:14,375 --> 00:10:16,470 ‫lo dice, e forse qualche altra 195 00:10:16,470 --> 00:10:19,540 ‫logica, ma in caso contrario, beh, allora inseriamo il 196 00:10:19,540 --> 00:10:20,543 ‫blocco 197 00:10:21,770 --> 00:10:26,093 ‫catch e possiamo quindi , esegui qualche altra azione in base all'errore. 198 00:10:27,022 --> 00:10:30,272 ‫(digitando su una tastiera) Quindi, diamo 199 00:10:31,670 --> 00:10:34,023 ‫un'occhiata anche all'errore. 200 00:10:37,480 --> 00:10:42,120 ‫E solo per essere sicuro, voglio anche registrare l'e-mail e 201 00:10:43,200 --> 00:10:45,253 ‫la password nella console. 202 00:10:49,130 --> 00:10:51,583 ‫Quindi, proviamolo qui. 203 00:10:52,430 --> 00:10:53,663 ‫Ricarica la 204 00:10:55,249 --> 00:10:58,499 ‫nostra pagina, (digitando su una tastiera) E sto 205 00:11:02,240 --> 00:11:05,160 ‫inserendo una password sbagliata ora, ok? 206 00:11:05,160 --> 00:11:06,993 ‫Prova uno, due, tre, quattro, cinque. 207 00:11:09,100 --> 00:11:12,070 ‫Diamo un'occhiata anche alla nostra console qui. 208 00:11:12,070 --> 00:11:15,740 ‫E qui riceviamo questo errore da mapbox, js, 209 00:11:15,740 --> 00:11:17,330 ‫ma non preoccuparti. 210 00:11:17,330 --> 00:11:19,430 ‫Lo ripareremo un po' più tardi. 211 00:11:21,848 --> 00:11:24,890 ‫Ma per ora, diamo un'occhiata a cosa succede qui. 212 00:11:24,890 --> 00:11:28,900 ‫E qui abbiamo qualche bell'errore, va bene? 213 00:11:28,900 --> 00:11:32,670 ‫E così, in realtà, quando dobbiamo dare un'occhiata qui c'è 214 00:11:32,670 --> 00:11:34,253 ‫un errore. risposta. 215 00:11:36,630 --> 00:11:38,910 ‫E poi i dati dei punti. 216 00:11:38,910 --> 00:11:42,550 ‫Ok, lo troverai qui nella documentazione di Axios nel caso 217 00:11:42,550 --> 00:11:45,113 ‫ti stia chiedendo da dove viene. 218 00:11:46,660 --> 00:11:47,493 ‫Bene? 219 00:11:49,290 --> 00:11:52,140 ‫Lasciami andare avanti e copiare questa 220 00:11:53,450 --> 00:11:56,713 ‫email perché non è così bello scriverla sempre manualmente. 221 00:12:00,200 --> 00:12:04,263 ‫E ora otteniamo effettivamente un errore ben formattato qui. 222 00:12:05,440 --> 00:12:06,273 ‫Va bene? 223 00:12:06,273 --> 00:12:08,810 ‫E quindi questo è fondamentalmente esattamente il jsencode 224 00:12:08,810 --> 00:12:11,310 ‫che abbiamo inviato dal nostro server. 225 00:12:11,310 --> 00:12:12,143 ‫Destra? 226 00:12:12,143 --> 00:12:13,320 ‫Quindi, questo è esattamente 227 00:12:13,320 --> 00:12:15,220 ‫lo stesso che abbiamo visto in Postman. 228 00:12:15,220 --> 00:12:20,220 ‫Quindi otteniamo il nostro intero errore, il messaggio e anche lo stack. 229 00:12:20,270 --> 00:12:23,420 ‫E così vediamo che probabilmente non abbiamo fornito l'e-mail 230 00:12:23,420 --> 00:12:26,523 ‫e la password correttamente per qualche motivo. 231 00:12:27,550 --> 00:12:30,330 ‫Allora torniamo indietro, diamo un'occhiata. 232 00:12:30,330 --> 00:12:34,230 ‫Oh, quindi ho fatto qualcosa di strano qui dove ho passato 233 00:12:34,230 --> 00:12:36,230 ‫un oggetto sia con l'e-mail 234 00:12:36,230 --> 00:12:38,003 ‫che con la password. 235 00:12:38,980 --> 00:12:41,060 ‫E quindi penso che sia di prima 236 00:12:41,060 --> 00:12:42,900 ‫quando ha provato a fare 237 00:12:42,900 --> 00:12:45,670 ‫quell'avviso e immagino di averlo fatto nel posto sbagliato. 238 00:12:45,670 --> 00:12:49,570 ‫E quindi, ecco perché qui abbiamo visto indefinito. 239 00:12:49,570 --> 00:12:51,260 ‫E qui abbiamo questo oggetto. 240 00:12:51,260 --> 00:12:53,820 ‫Quindi, in pratica, l'e-mail era l'intero oggetto 241 00:12:53,820 --> 00:12:56,023 ‫e la password era quindi indefinita. 242 00:12:58,290 --> 00:12:59,123 ‫Va bene? 243 00:12:59,123 --> 00:13:01,400 ‫Quindi ora, questo dovrebbe 244 00:13:01,400 --> 00:13:02,613 ‫risolverlo, ricaricalo. 245 00:13:07,930 --> 00:13:10,760 ‫Ah, ora otteniamo questo errore corretto che 246 00:13:10,760 --> 00:13:12,500 ‫in realtà ci aspettavamo. 247 00:13:12,500 --> 00:13:15,580 ‫Quindi ora è un'e-mail o una password 248 00:13:15,580 --> 00:13:18,880 ‫errata perché ho specificato una password errata, ok? 249 00:13:18,880 --> 00:13:21,441 ‫Ma ora, rimuoviamo effettivamente i cinque e 250 00:13:21,441 --> 00:13:24,973 ‫quindi i test uno, due, tre, quattro dovrebbero essere corretti. 251 00:13:25,860 --> 00:13:28,010 ‫Quindi, accediamo e 252 00:13:28,010 --> 00:13:31,810 ‫ora otteniamo una risposta di 200. 253 00:13:31,810 --> 00:13:33,253 ‫Quindi, un successo. 254 00:13:34,290 --> 00:13:35,890 ‫Quindi apriamo questo e 255 00:13:35,890 --> 00:13:39,410 ‫ciò che in realtà ci interessa sono i dati. 256 00:13:39,410 --> 00:13:42,030 ‫Quindi sostanzialmente risposta. data perché questo 257 00:13:42,030 --> 00:13:43,260 ‫è quindi 258 00:13:43,260 --> 00:13:46,960 ‫effettivamente dove si trova la nostra risposta jsen. 259 00:13:46,960 --> 00:13:48,653 ‫Quindi qui, otteniamo 260 00:13:50,210 --> 00:13:55,210 ‫questi dati qui e otteniamo anche lo stato e il token. 261 00:13:55,410 --> 00:13:59,030 ‫E quindi, questo è qui il nostro token web jsen 262 00:13:59,030 --> 00:14:01,550 ‫corretto corrispondente a questo utente connesso. 263 00:14:01,550 --> 00:14:03,170 ‫Ora, ciò che è veramente 264 00:14:03,170 --> 00:14:05,400 ‫interessante è dare un'occhiata ai nostri cookie. 265 00:14:05,400 --> 00:14:07,540 ‫E lo facciamo almeno in Google Chrome 266 00:14:07,540 --> 00:14:09,560 ‫facendo clic su questa icona 267 00:14:09,560 --> 00:14:12,180 ‫qui e poi qui in basso, hai i cookie. 268 00:14:12,180 --> 00:14:14,900 ‫E dice anche che la nostra connessione non è 269 00:14:14,900 --> 00:14:15,940 ‫sicura ed 270 00:14:15,940 --> 00:14:19,330 ‫è semplicemente perché non stiamo usando HTTPS a questo punto, ma 271 00:14:19,330 --> 00:14:20,920 ‫non importa a questo proposito. 272 00:14:20,920 --> 00:14:23,530 ‫Ciò che conta qui è che ora 273 00:14:24,630 --> 00:14:27,620 ‫abbiamo questo cookie e in effetti si chiama token 274 00:14:27,620 --> 00:14:31,060 ‫web jsen e ha esattamente il token web jsen che 275 00:14:31,060 --> 00:14:32,203 ‫vediamo qui sotto. 276 00:14:33,360 --> 00:14:36,620 ‫Quindi, questa è solo la fine, fondamentalmente, della 277 00:14:36,620 --> 00:14:40,710 ‫stringa, quindi vedi che è uguale a quello che abbiamo quaggiù. 278 00:14:40,710 --> 00:14:43,560 ‫Ed è proprio questo cookie che ci 279 00:14:43,560 --> 00:14:46,030 ‫consentirà di costruire l'intera autenticazione. 280 00:14:46,030 --> 00:14:49,000 ‫Anche in questo caso, perché il browser non invierà 281 00:14:49,000 --> 00:14:51,470 ‫questo cookie insieme ad ogni nuova richiesta. 282 00:14:51,470 --> 00:14:55,070 ‫E lascia che te lo mostri davvero nel nostro back-end. 283 00:14:55,070 --> 00:14:59,930 ‫Quindi torniamo lì e andiamo su app. js. 284 00:14:59,930 --> 00:15:02,320 ‫E così ora siamo di nuovo nella nostra nota, o 285 00:15:02,320 --> 00:15:03,943 ‫in realtà nel nostro codice Express. 286 00:15:05,320 --> 00:15:07,360 ‫Ora, per ottenere effettivamente l'accesso 287 00:15:07,360 --> 00:15:09,690 ‫ai cookie che sono nella nostra richiesta. 288 00:15:09,690 --> 00:15:13,050 ‫In Express, è necessario installare un determinato middleware. 289 00:15:13,050 --> 00:15:16,630 ‫E quindi dobbiamo installarlo da un pacchetto NPM. 290 00:15:16,630 --> 00:15:19,960 ‫E così è di nuovo, vieni al nostro 291 00:15:19,960 --> 00:15:21,550 ‫altro terminale e 292 00:15:22,660 --> 00:15:25,313 ‫poi NPM installa il parser dei cookie. 293 00:15:26,210 --> 00:15:27,043 ‫Va bene? 294 00:15:27,043 --> 00:15:29,380 ‫Quindi, in pratica, questo pacchetto analizzerà tutti 295 00:15:29,380 --> 00:15:31,653 ‫i cookie dalla richiesta in arrivo. 296 00:15:37,360 --> 00:15:38,193 ‫cookieParser. 297 00:15:44,600 --> 00:15:45,680 ‫Bene? 298 00:15:45,680 --> 00:15:50,377 ‫E ora usiamolo vicino a questo parser del corpo. 299 00:15:54,770 --> 00:15:56,003 ‫Va bene? 300 00:15:56,003 --> 00:15:57,050 ‫Quindi questi due sono molto simili. 301 00:15:57,050 --> 00:15:59,750 ‫Questo primo analizza i dati dal 302 00:15:59,750 --> 00:16:03,070 ‫corpo e il secondo analizza i dati dai cookie. 303 00:16:03,070 --> 00:16:06,600 ‫E così ora, se in questo middleware qui, 304 00:16:06,600 --> 00:16:09,803 ‫possiamo usare request. biscotti. 305 00:16:11,470 --> 00:16:13,080 ‫E così ora per 306 00:16:13,080 --> 00:16:16,593 ‫ogni richiesta, visualizzeremo sempre tutti i cookie nella console. 307 00:16:19,360 --> 00:16:22,440 ‫Quindi, se ora ricarichiamo questa pagina, o davvero 308 00:16:22,440 --> 00:16:24,490 ‫qualsiasi altra pagina, lasciami 309 00:16:24,490 --> 00:16:27,283 ‫aprire questa qui in una nuova scheda. 310 00:16:29,780 --> 00:16:33,420 ‫Quindi, se torniamo indietro, dovremmo vedere quel cookie qui. 311 00:16:33,420 --> 00:16:35,820 ‫E, infatti, eccolo qui. 312 00:16:35,820 --> 00:16:38,810 ‫Quindi questo è il cookie che è 313 00:16:38,810 --> 00:16:42,960 ‫stato appena inviato alla nostra applicazione caricando quella pagina nel browser. 314 00:16:42,960 --> 00:16:44,223 ‫E se 315 00:16:45,710 --> 00:16:49,710 ‫lo faccio di nuovo, ne vedrai un altro, giusto? 316 00:16:49,710 --> 00:16:51,120 ‫Quindi eccolo qui. 317 00:16:51,120 --> 00:16:54,790 ‫E così ora possiamo usarlo per proteggere il nostro percorso. 318 00:16:54,790 --> 00:16:56,863 ‫Va bene, allora proviamolo. 319 00:16:58,860 --> 00:16:59,693 ‫Va bene? 320 00:16:59,693 --> 00:17:01,070 ‫Ma prima di 321 00:17:01,070 --> 00:17:03,080 ‫poterlo fare, abbiamo bisogno che il 322 00:17:03,080 --> 00:17:05,770 ‫nostro controller off lo aggiunga effettivamente anche qui. 323 00:17:05,770 --> 00:17:08,840 ‫Quindi in questo momento stiamo solo leggendo il token web 324 00:17:08,840 --> 00:17:10,503 ‫jsen dall'intestazione di autorizzazione. 325 00:17:11,390 --> 00:17:12,223 ‫Destra? 326 00:17:12,223 --> 00:17:15,230 ‫E solo se iniziano con questo portatore, ok? 327 00:17:15,230 --> 00:17:17,170 ‫Quindi per il token al portatore. 328 00:17:17,170 --> 00:17:19,640 ‫Ma ora, in pratica, vogliamo anche leggere il 329 00:17:19,640 --> 00:17:21,970 ‫token web jsen da un cookie. 330 00:17:21,970 --> 00:17:25,633 ‫E quindi quello che possiamo fare qui è fondamentalmente un altro 331 00:17:27,870 --> 00:17:30,860 ‫se, quindi se non ci fosse alcun token nell'intestazione 332 00:17:30,860 --> 00:17:33,333 ‫dell'autorizzazione, beh, allora diamo un'occhiata ai cookie. 333 00:17:34,170 --> 00:17:36,807 ‫Quindi richiesta. biscotti. token web jsen. 334 00:17:36,807 --> 00:17:39,520 ‫Quindi JWT, che è il nome 335 00:17:39,520 --> 00:17:42,550 ‫del cookie, e quindi, nell'oggetto cookie, ci 336 00:17:42,550 --> 00:17:45,110 ‫sarà una proprietà chiamata JWT. 337 00:17:45,110 --> 00:17:47,137 ‫Quindi questo qui, giusto? 338 00:17:49,120 --> 00:17:51,280 ‫E quindi se questo 339 00:17:51,280 --> 00:17:55,080 ‫esiste, beh, allora il token dovrebbe essere esattamente quello. 340 00:17:55,080 --> 00:17:58,040 ‫Quindi richiesta. biscotti. jwt. 341 00:17:58,040 --> 00:17:58,873 ‫Va bene. 342 00:18:00,117 --> 00:18:00,950 ‫E così ora con questo, 343 00:18:02,085 --> 00:18:03,593 ‫siamo anche in grado di autenticare gli utenti in base ai 344 00:18:05,590 --> 00:18:06,840 ‫token inviati tramite i cookie e non solo all'intestazione dell'autorizzazione. 345 00:18:06,840 --> 00:18:10,400 ‫Grande. 346 00:18:10,400 --> 00:18:13,210 ‫E giusto per testarlo, proteggiamo una delle 347 00:18:13,210 --> 00:18:15,780 ‫nostre vie qui in vista. 348 00:18:15,780 --> 00:18:16,613 ‫E lo farò con questa pagina dei dettagli del tour, ok? 349 00:18:16,613 --> 00:18:18,580 ‫Quindi è solo 350 00:18:18,580 --> 00:18:22,610 ‫per testare perché ovviamente non ha molto senso, 351 00:18:22,610 --> 00:18:27,170 ‫ma volevo solo mostrarti che così com'è adesso, il 352 00:18:27,170 --> 00:18:29,460 ‫nostro login funziona già. 353 00:18:29,460 --> 00:18:31,920 ‫Quindi importiamo qui il authController. 354 00:18:31,920 --> 00:18:33,800 ‫(digitando su una tastiera) E 355 00:18:33,800 --> 00:18:36,723 ‫poi, proprio come prima, modifica qui in questo percorso. 356 00:18:37,860 --> 00:18:39,993 ‫Quindi authController. proteggere. 357 00:18:41,708 --> 00:18:44,958 ‫E quindi questa non è una novità a questo punto. 358 00:18:49,884 --> 00:18:54,860 ‫E poi solo se l'utente ha effettuato l'accesso, possiamo 359 00:18:54,860 --> 00:18:58,770 ‫andare al getTour. 360 00:18:58,770 --> 00:19:00,930 ‫Grande. 361 00:19:00,930 --> 00:19:03,200 ‫Quindi quello che farò ora è sostanzialmente eliminare prima questo cookie 362 00:19:03,200 --> 00:19:04,993 ‫solo per mostrarti cosa succede quando un utente 363 00:19:06,400 --> 00:19:07,233 ‫non connesso tenta 364 00:19:08,460 --> 00:19:09,710 ‫di accedere a quel percorso ora. 365 00:19:09,710 --> 00:19:12,450 ‫E quindi fondamentalmente, se rimuoviamo questo cookie, è 366 00:19:12,450 --> 00:19:13,850 ‫come disconnettere l'utente, giusto? 367 00:19:13,850 --> 00:19:17,293 ‫Quindi, se ora dai un'occhiata ai nostri 368 00:19:18,180 --> 00:19:20,950 ‫tour, allora dovrebbe andare bene. 369 00:19:20,950 --> 00:19:24,563 ‫Ma, se ora proviamo ad accedere a 370 00:19:25,730 --> 00:19:28,970 ‫questa pagina, dovremmo ricevere un errore. 371 00:19:28,970 --> 00:19:30,653 ‫E infatti, eccolo lì, dicendo che non sei loggato. 372 00:19:31,700 --> 00:19:34,090 ‫Abbastanza giusto. 373 00:19:34,090 --> 00:19:35,580 ‫Quindi torniamo indietro e accediamo effettivamente. 374 00:19:35,580 --> 00:19:39,443 ‫Va bene? 375 00:19:40,640 --> 00:19:41,550 ‫Quindi eccoci qui. 376 00:19:41,550 --> 00:19:44,903 ‫E poi in futuro, ovviamente, implementeremo anche alcune finestre di avviso qui 377 00:19:50,833 --> 00:19:51,666 ‫e tutte 378 00:19:51,666 --> 00:19:52,610 ‫quelle cose buone. 379 00:19:52,610 --> 00:19:53,550 ‫Ma per ora, di nuovo, facciamolo funzionare. 380 00:19:53,550 --> 00:19:55,570 ‫E così vedi che siamo 381 00:19:55,570 --> 00:19:58,800 ‫tornati ad avere il nostro bel biscotto qui, ok? 382 00:19:58,800 --> 00:20:02,380 ‫E quindi, proviamo ora ad accedere a questo percorso protetto. 383 00:20:02,380 --> 00:20:04,240 ‫E infatti, ora funziona. 384 00:20:04,240 --> 00:20:08,550 ‫Fantastico, è già davvero fantastico, giusto? 385 00:20:08,550 --> 00:20:12,163 ‫Ora idealmente, quando un utente ha effettuato l'accesso, 386 00:20:13,370 --> 00:20:16,050 ‫non vogliamo visualizzare questi pulsanti 387 00:20:16,050 --> 00:20:20,250 ‫qui, ma invece, come un menu utente o un'immagine dell'utente. 388 00:20:20,250 --> 00:20:22,800 ‫Quindi, in pratica, 389 00:20:22,800 --> 00:20:26,770 ‫mostra che l'utente è effettivamente connesso, giusto? 390 00:20:26,770 --> 00:20:31,240 ‫Quindi facciamolo nel prossimo video, insieme al raggruppamento di tutti 391 00:20:31,240 --> 00:20:32,650 ‫i nostri 392 00:20:32,650 --> 00:20:35,545 ‫file JavaScript nel front-end come spiegavo prima. 393 00:20:35,545 --> 00:20:38,090 ‫Quindi non aspettare, passiamo subito al prossimo. 394 00:20:38,090 --> 00:20:41,220 ‫Ci vediamo lì.