[MUSIC]
Ora che abbiamo compreso la necessità di autenticazione di base nella nostra
applicazione Express, procediamo all'esercizio in cui aggiungeremo
l'autenticazione di base al server Confusione che abbiamo sviluppato finora,
il server API REST Express.
Impareremo, lungo la strada, come possiamo usare l'autenticazione di base all'interno del nostro server.
E poi negli esercizi successivi, amplieremo ulteriormente questa idea
per aggiungere un servizio di autenticazione completo per il nostro server API REST Express.
In questo esercizio, andremo al server Confusione,
quello su cui abbiamo lavorato finora.
Quindi devi aver completato l'implementazione del secondo incarico
ormai, dove avresti sviluppato le promozioni e il modello leader.
E anche aggiornato i percorsi per il router leader e
il router promozionale nella vostra applicazione server Confusione.
Quindi all'interno di questo codice, andiamo a app.js e
quindi aggiungere l'autenticazione di base in app.js.
Quindi in app.js come abbiamo capito il modo in cui
la via di mezzo funziona nell'applicazione Express.
Quindi iniziamo qui nel app.js
importando tutti i vari moduli nodo qui.
E poi, dopo, iniziamo qui dicendo prima app.use logger dev.
Quindi tutti questi saranno applicati alla nostra applicazione.
E poi, questa chiamata qui app.use (express.static)
è ciò che ci consente di servire dati statici dalla cartella pubblica.
Ora, vogliono fare l'autenticazione subito prima di
permettere al client di essere in grado di recuperare i dati dal nostro server.
Quindi, proprio lì, entreremo e aggiungeremo un badge di autenticazione.
Quindi noti che tutto ciò che viene dopo questo,
tutto il middleware che è montato e viene dopo questo particolare punto.
Dovremo passare attraverso la fase di autorizzazione prima
che il middleware possa essere accesso.
Quindi proprio lì, ho intenzione di aggiungere app.use e
quindi aggiungere una funzione chiamata auth, che ho intenzione di implementare in questo momento.
Quindi, facendo questo, ciò che stiamo specificando è il default,
il client può accedere a qualsiasi di questi,
sia le loro risorse statiche nella cartella pubblica, o qualsiasi delle risorse,
piatti, promozioni, o leader, o anche gli utenti come vedremo più avanti.
Il cliente deve essere prima autorizzato.
Quindi, proprio lì, aggiungeremo l'autenticazione.
Quindi lasciami aggiungere la funzione qui chiamata auth proprio lì.
E poi usarlo immediatamente all'interno
della nostra applicazione Express come middleware lì.
Quindi questa funzione, auth prenderà tre parametri,
l'oggetto richiesta, l'oggetto risorsa e l'oggetto successivo, sì.
Quindi all'interno di questa funzione fammi prima,
solo per sapere cosa è contenuto nell'intestazione della richiesta.
Permettetemi di registrare le intestazioni delle richieste proprio lì solo per dimostrarvi,
perché una volta aggiunta l'intestazione di autorizzazione,
vogliamo essere in grado di vederlo proprio lì.
Quindi faremo prima un registro della console,
solo per vedere cosa sta arrivando dal lato client.
Quindi, fammi ottenere la loro
intestazione di autorizzazione dicendo
req.headers .authorization.
Quindi questo è dove entreremo in possesso dell'intestazione di autorizzazione che viene aggiunta
dal nostro lato client.
Se non c'è, ovviamente, dobbiamo agire di conseguenza.
Quindi, se AuthHeader è nullo, il
che significa che non c'è alcuna intestazione di autenticazione nella nostra
richiesta in arrivo, ovviamente, il nostro client non ha incluso il nome utente e
la password nell'intestazione di autenticazione.
Quindi dobbiamo sfidare il nostro cliente a fornire queste informazioni.
Quindi, se l'intestazione di autorizzazione è nullo, allora vedremo,
var err nuovo errore,
quindi non permetteremo alla nostra richiesta client di andare oltre questo punto.
Quindi diremo, non sei autenticato,
e poi sfideremo il cliente lì.
Quindi diremo res.setHeader, quindi
stiamo andando a impostare l'intestazione nel
messaggio di risposta dicendo WWW-Authenticate,
e dalla lezione precedente,
vedrete perché stiamo mettendo questo
nell'intestazione della risposta.
E poi diremo err status.401.
401 è un accesso non autorizzato.
E poi ci sarà semplicemente generare la nostra chiamata dopo con l'intestazione.
Quindi ciò significa che salterà tutto questo e andrà al gestore degli errori,
dove il gestore degli errori costruirà il messaggio di risposta e
rimanderà al mio client lì.
Quindi, se il client non ha incluso l'intestazione di autenticazione o
l'intestazione di autorizzazione, allora ho intenzione di sfidare il client a
chiedergli di fornirmi l'intestazione di autorizzazione lì.
Quindi, se no, allora so che l'intestazione di autorizzazione esiste.
Quindi oltre questo punto, diremo var auth,
e ho intenzione di estrarre l'intestazione di autorizzazione.
E poi dal momento che AuthHeader è una stringa,
ho intenzione di dividere quel valore e
questa intestazione di autorizzazione, ho intenzione di dividere il valore.
Quindi, come puoi vedere, il buffer ti consente di dividere il valore e
quindi diamo anche la codifica del buffer che è la codifica Base64 qui.
Quindi lo convertiremo in un buffer dividendolo in due parti,
usando lo spazio come parte di divisione.
Quindi, quando hai guardato l'intestazione di autorizzazione, hai visto perché lo spazio
separa il valore dicendo basic, e poi ti dà il resto della
stringa codificata Base64 che contiene il nome utente e la password.
E da questo, vogliamo estrarre il nome utente e la password.
Quindi stiamo andando a dividere quel valore, e poi stiamo solo andando a prendere in considerazione Così
quando si divide la stringa utilizzando questo, si dividerà che in un array.
E il primo elemento della matrice contiene Basic.
Il secondo elemento dell'array è dove esiste questa stringa codificata base64.
Ecco perché stiamo guardando solo il secondo elemento di questo array.
Quindi questa suddivisione causerà la divisione della stringa in una matrice di due elementi.
Quindi potremmo, stiamo raccogliendo la stringa codificata base64 da quello.
E poi noi in questo Buffer, e poi stiamo andando a convertirlo in stringa.
E poi di nuovo, dividere la stringa ancora una volta perché la stringa
stessa conterrà il nome utente e la password separati da due punti.
Quindi, ho intenzione di dividerlo usando i due punti come
punto di divisione per questa stringa qui.
Quindi nota che sto caricando due divisioni qui, una sullo spazio e
la seconda, usando i due punti che separano il nome utente e la password.
Quindi alla fine di questa variabile auth dovrebbe essere un array contenente due elementi,
il nome utente e la password che viene estratto dalla stringa base64.
Quindi, a questo punto, quello che farò è,
solo per la tua chiarezza,
dirò semplicemente var
username = auth [0] e poi,
var password = auth [1].
Quindi ora ho estratto il nome utente e la password dalla mia intestazione di autorizzazione.
Ora utilizzerò un valore predefinito per il nome utente e
la password in questa implementazione.
Più tardi, vedremo che possiamo consentire agli utenti di creare il proprio nome utente e
password.
Ma per il momento, ho intenzione di usare,
il nome utente e la password codificati come amministratore.
E la password sarà solo password.
Per questo esercizio di base,
useremo questo come nome utente e password predefiniti.
Se il nome utente che ottengo è admin e la password è la password stringa.
Quindi sto bene per consentire che la
richiesta del client venga passata attraverso il middleware successivo, quindi, dirò il prossimo.
Quindi, quando dico dopo, questo significa che dall'autenticazione la
loro richiesta passerà sul prossimo set di middleware qui e
quindi Express cercherà di abbinare la richiesta specifica a
middleware specifico che servirà quella richiesta.
Quindi questo è dove gli permetteremo di passare attraverso.
In caso contrario, ciò significa che il nome utente e
la password non corrispondono alla richiesta,
il nome utente e la password predefiniti che sto impostando.
Quindi questo significa che c'è un errore.
Quindi, in questo caso, ho intenzione di causare di nuovo un errore qui,
quindi diremo altro, Errore.
Quindi genereremo nuovamente un errore e quindi sfideremo il cliente
a inviare le informazioni di autorizzazione corrette, il nome utente e la password qui.
Quindi questo è tutto.
Questo po 'di middleware che abbiamo appena implementato qui,
middleware di autorizzazione che abbiamo appena implementato qui.
È sufficiente per implementare l'autenticazione di base all'interno dell'applicazione.
Quindi, dopo aver apportato queste modifiche,
salviamo le modifiche e poi vedremo come funziona effettivamente nella pratica.
Salviamo le modifiche.
E poi andremo ad avviare il nostro server.
Ora, andando al terminale, ovviamente,
assicurati che tu sia il server MongoDB sia attivo e funzionante.
In caso contrario, il server Express non verrà avviato.
Quindi ho il tipo di prompt npm start, e
quindi il tuo server Express sarà attivo e funzionante.
Ora, apri nella finestra di navigazione in incognito nel tuo browser.
Il motivo per cui ti sto chiedendo di utilizzare una finestra di navigazione in incognito è che quando digiti
il nome utente e la password, verrà memorizzato nella cache dal tuo browser.
Quindi, se usi una finestra di navigazione in incognito, se riavvii il browser...
Quindi la cache verrà cancellata automaticamente,
quindi queste informazioni non verranno ricordate.
Ora cosa succede se si digita il nome utente e la password, verrà memorizzato nella cache,
quindi successivamente quando si tenta di accedere al server, le informazioni memorizzate nella cache
verranno automaticamente inviate nella richiesta che si genera.
Ecco perché è importante
utilizzare una finestra di navigazione in incognito solo per mostrare che l'autenticazione di base funziona.
Quindi nella barra degli indirizzi del browser digitiamo localhost: 3000 e vediamo cosa succede.
Quindi, quando digiti localhost: 3000 vedi immediatamente che il tuo browser apre
questo dialogo in cima chiedendoti di digitare il nome utente e la password.
Se non lo digiti, fammi digitare un nome utente casuale e poi vedere cosa succede.
Quindi, se digito un nome utente e una password casuali,
vedi che la richiesta viene rifiutata.
Non mi è permesso accedere al server, e
quindi se il server dirà di nuovo che il client non è autorizzato.
E così tornerà e ci sfiderà di nuovo per la corretta autenticazione.
Quindi lasciami digitare l'autenticazione corrente.
Quindi lasciami digitare admin e la password come password.
E poi accedi e vedrai che ora l'
applicazione Express ti consentirà di accedere al valore predefinito,
che in questo caso è il file Index.html da quella cartella pubblica statica.
Ora, la stessa cosa se stai cercando di accedere localhost: piatti
senza l'autorizzazione, allora non funzionerà.
E te lo dimostrero' usando il postino tra un minuto.
Ora dopo aver visto come funziona l'autenticazione, andiamo
a guardare cosa è successo sulla console sul nostro sito server.
Andando alla console sul nostro sito server si vede che un sacco di informazioni
sono state stampate qui, quindi come hai visto,
stavamo disconnettendo le intestazioni delle richieste qui.
Quindi questa è la prima richiesta che è arrivata con l'intestazione della richiesta.
E qui vedi che non c'è alcuna intestazione di autorizzazione nella richiesta.
E così il tuo server lo ha rifiutato con un 401 che chiede al nostro cliente di autorizzarsi.
La seconda volta anche da quando non abbiamo digitato l'autorizzazione corretta che il
server ha rifiutato.
Ovviamente, ora noti che nell'intestazione, proprio lì, l'autorizzazione è
effettivamente inclusa lì, e vedi il modo in cui l'autorizzazione è inclusa.
Dice Basic separato da uno spazio e
separato dalla stringa codificata a 64 bit che contiene il nome utente e la password.
E poi, vediamo che il server
ha rifiutato questo perché l'autorizzazione era sbagliata a quel punto.
Ora più tardi, abbiamo digitato il nome utente e la password corretti.
Quindi proprio lì nella terza richiesta che è arrivata, abbiamo digitato il nome utente e la
password corretti.
E così, questo è il motivo per cui vedi che l'intestazione della richiesta contiene l'autorizzazione
e questa stringa usa la codifica corretta del nome utente e della password.
Come faccio a saperlo?
Bene, ho controllato e so
che, questa è la versione codificata esterna di base della stringa lì.
Vedremo anche che dalla nostra immagine postino o cosa.
Ora, si vede che la richiesta è stata accettata e
ha restituito il valore correttamente.
E poi, naturalmente, successivamente, il cliente ha richiesto una favicon, l'icona.
E dato che non abbiamo la favicon nel nostro lato server, risponde con il 404 e,
naturalmente, la tua icona preferita non viene visualizzata nella barra degli indirizzi.
Quindi va bene, ma nota in particolare.
Quelli particolari richiesti sono arrivati,
dove è stata inclusa l'intestazione di autorizzazione corretta.
E così, ha avuto successo in quel momento.
Proviamo a vedere come potremmo fare la stessa cosa con la postmap.
Quindi qui ho la mia finestra di postmap aperta.
E così nella mia finestra Postman ho intenzione di digitare
un get to localhost: al mio server, e quindi inviare la richiesta e
si noterà immediatamente che sfida dicendo 401 non autorizzato.
Quindi questo è il messaggio di risposta dal lato server,
in modo da notare ciò che salva, 401 Non autorizzato.
E dice che la risposta deve includere un campo di intestazione WWW-Authenticate.
E questo sfiderà il cliente a inviare le informazioni di autorizzazione,
il nome utente e la password.
Quindi, in anteprima, vediamo che la frase non sei autenticato e
quindi il codice 401 qui.
Ora guardando le intestazioni del messaggio di risposta.
Quando guardi l'intestazione del messaggio di risposta, puoi vedere in particolare
questa intestazione inclusa lì, che è www.authenticatebasic.
Ora, come facciamo l'autenticazione o l'autorizzazione in post?
Quindi questo è dove andrebbero a questo proprio sotto questa casella qui,
vedrete questa autorizzazione qui.
E quando fai clic sull'autorizzazione, in questo momento dice NO AUTH..
Usiamo l'autenticazione di base.
Quindi, quando dico autenticazione di base,
mi darà questi due campi qui dove posso digitare il nome utente e la password.
Permettetemi di digitare il nome utente e la password corretti.
Quindi dirò username admin, la password è la password P-A-S-W-O-R-D.
Così potete vedere che, questa è esattamente la password che abbiamo qui.
Quindi, una volta digitato il nome utente e la password, diranno Richiesta di aggiornamento.
Quindi, quando clicco su Richiesta di aggiornamento, vedrai che immediatamente nell'intestazione,
vedrai che
c'è questo campo qui che è stato aggiunto qui dicendo autorizzazione.
E poi, vedrai che cosa questa seconda parte, il valore che puoi prendere.
Dice di base e uno spazio, e poi questa particolare stringa.
Quindi, se controlli questa particolare stringa qui, questa sarà la
stringa esatta che vedrai nell'intestazione del messaggio di richiesta di successo.
Notate cosa dice questa stringa.
Si dice YWR qualcosa, e poi termina con una Q uguale a.
Andando al nostro terminale, vedi che la richiesta di successo
conteneva esattamente quella stringa qui.
Dice YWR e poi termina con Q uguale a lì.
Quindi digitando le informazioni nell'autorizzazione e facendo clic sulla
richiesta di aggiornamento, queste informazioni vengono aggiunte nelle intestazioni di autorizzazione.
Quindi ora questa è una richiesta get,
non ho bisogno del tipo di contenuto lì perché non contiene alcun corpo.
Quindi, ora che l'autorizzazione è stata inclusa,
inviamo la richiesta ora correttamente e poi vedrai che
la risposta proveniente dal sito server conterrà il file di indice come ti aspetti.
Ora, lasciatemi cancellare l'autorizzazione.
Ora questo è il motivo per cui Postmap mi aiuta a controllare queste cose molto più
facilmente, posso cancellare l'autorizzazione e quindi inviare la richiesta.
E conterrà ancora questa autorizzazione,
perché l'ho digitato nel campo di autorizzazione.
Quindi fammi cancellare l'autorizzazione da lì, e poi inviare la richiesta qui.
E poi dice che non sei autenticato.
Allo stesso modo, se invio la richiesta ai piatti.
In precedenza, questo funzionava bene, ma
ora si vede che ci è impedito di accedere anche all'endpoint /piatti.
E la stessa cosa con tutti gli altri endpoint APR resto anche.
Non sarà consentito l'accesso, perché il middleware di autorizzazione viene prima di
ottenere l'accesso a uno di questi endpoint
nell'elenco di middleware per il server express.
Quindi ora se ora includo l'autorizzazione,
E poi aggiorno la mia richiesta e poi invio la richiesta al server,
allora il server risponderà.
Ora ovviamente in questo momento il mio database è vuoto,
quindi sta rispondendo con un array vuoto lì.
Ma ora la richiesta è andata avanti con successo e
sono in grado di recuperare le informazioni dal calzino del server.
Quindi questa è una rapida dimostrazione di
autorizzazione di base nella nostra applicazione APR riposo espresso.
Con questo, completiamo questo esercizio.
Questo è un buon momento per
voi per fare un commento get con il messaggio di autenticazione di base.
[ MUSIC]