[MUSIC]
Maintenant que nous avons compris la nécessité d'une authentification de base dans notre
application Express, passons à l'exercice où nous allons ajouter l'
authentification de base au serveur Confusion que nous avons développé jusqu'à présent,
le serveur API REST Express. En cours de
route, nous
apprendrons comment nous pouvons utiliser l'authentification de base au sein de notre serveur.
Et puis dans les exercices suivants, nous allons approfondir cette idée
pour ajouter un service d'authentification à part entière pour notre serveur d'API REST Express.
Dans cet exercice, nous irons au serveur Confusion,
sur lequel nous avons travaillé jusqu'à présent.
Donc, vous devez avoir terminé la mise en œuvre de la deuxième affectation
maintenant, où vous auriez développé les promotions et le modèle des leaders.
Et également mis à jour les routes pour le routeur leader et
le routeur promo dans votre application serveur Confusion.
Donc, dans ce code, passons à app.js,
puis ajoutons dans l'authentification de base dans app.js.
Donc, dans app.js comme nous l'avons compris sur
la façon dont le milieu fonctionne dans l'application Express.
Donc, nous commençons ici dans le app.js
en important tous les différents modules de noeud ici.
Et puis après cela, nous commençons ici en disant d'abord app.use logger dev.
Donc, tous ces éléments vont être appliqués à notre demande.
Et puis, cet appel ici app.use (express.static)
est ce qui nous permet de servir des données statiques à partir du dossier public.
Maintenant, ils veulent faire l'authentification juste avant de
permettre au client d'être en mesure de récupérer des données de notre serveur.
Donc, juste là, nous allons entrer et ajouter un badge d'authentification.
Donc, vous remarquez que tout ce qui vient après cela,
tout le middleware qui est monté et vient après ce point particulier.
Nous devrons passer par la phase d'autorisation avant
que ce middleware puisse y accéder.
Donc, juste là, je vais ajouter dans app.use,
puis ajouter une fonction appelée auth, que je vais implémenter en ce moment.
Donc, en faisant cela, ce que nous spécifions est la valeur par défaut,
le client peut accéder à n'importe lequel de ceux-ci,
soit à leurs ressources statiques dans le dossier public, soit à l'une des ressources
, plats, promotions, ou leaders, ou même aux utilisateurs comme nous le verrons plus tard.
Le client doit d'abord être autorisé.
Donc, juste là, nous allons ajouter l'authentification.
Alors laissez-moi ajouter la fonction ici appelée auth juste là.
Et puis l'utiliser immédiatement dans notre
application Express comme middleware là-bas.
Donc, cette fonction, auth prendra trois paramètres,
l'objet requête, l'objet ressource, et l'objet suivant, oui.
Donc, au sein de cette fonction, laissez-moi d'abord,
juste pour savoir ce qui est contenu dans l'en-tête de la requête.
Laissez-moi simplement enregistrer les en-têtes de requête juste là pour vous démontrer,
car une fois que vous ajoutez l'en-tête d'autorisation,
alors nous voulons être en mesure de le voir juste là.
Donc, nous allons d'abord faire un journal de console,
juste pour voir ce qui arrive du côté client.
Ensuite, laissez-moi obtenir leur
en-tête d'autorisation en disant
req.headers .authorization.
C' est donc là que nous obtiendrons l'en-tête d'autorisation qui est ajouté
par notre côté client.
Si ce n'est pas là, évidemment, nous devons agir en conséquence.
Donc, si, The AuthHeader est null,
ce qui signifie qu'il n'y a pas d'en-tête d'authentification dans notre
demande entrante alors évidemment, notre client n'a pas inclus le nom d'utilisateur et le mot de
passe dans l'en-tête d'authentification.
Nous devons donc défier notre client de fournir cette information.
Donc, si l'en-tête d'autorisation est nul, alors nous verrons,
var err nouvelle erreur,
donc nous ne permettrons pas à notre demande de client d'aller plus loin au-delà de ce point.
Donc, nous allons dire, vous n'êtes pas authentifié,
et ensuite nous allons défier le client là-bas.
Donc, nous allons dire Res.setHeader, donc
nous allons définir l'en-tête dans
le message de réponse disant WWW-Authenticate,
et à partir de la conférence plus tôt,
vous verrez pourquoi nous mettons cela
dans l'en-tête de réponse.
Et puis nous dirons le statut d'erreur .401.
401 est un accès non autorisé.
Et puis nous allons simplement générer notre appel suivant avec l'en-tête.
Donc, cela signifie qu'il va sauter tout cela et aller au gestionnaire d'erreurs,
où le gestionnaire d'erreurs va construire le message de réponse et
renvoyer à mon client là-bas.
Donc, si le client n'a pas inclus l'en-tête d'authentification ou
l'en-tête d'autorisation, alors je vais défier le client de
lui demander de me fournir l'en-tête d'autorisation là-bas.
Donc, si ce n'est pas le cas, alors je sais que l'en-tête d'autorisation existe.
Donc, au-delà de ce point, nous allons dire var auth,
et je vais extraire l'en-tête d'autorisation.
Et puis puisque l'AuthHeader est une chaîne,
je vais diviser cette valeur et
cet en-tête d'autorisation, je vais diviser la valeur.
Ainsi, comme vous pouvez le voir, le tampon vous permet de diviser la valeur et
ensuite nous donnons également l'encodage du tampon qui est l'encodage Base64 ici.
Donc, nous allons convertir cela en un tampon en divisant cela en deux parties, en
utilisant l'espace comme partie de séparation.
Donc, quand vous avez regardé l'en-tête d'autorisation, vous avez vu pourquoi l'espace
sépare la valeur disant basic, puis il vous donne le reste de
la chaîne codée Base64 qui contient le nom d'utilisateur et le mot de passe.
Et à partir de cela, nous voulons extraire le nom d'utilisateur et le mot de passe.
Donc, nous allons diviser cette valeur, et ensuite nous allons seulement considérer Donc,
lorsque vous divisez la chaîne en utilisant ceci, il divisera cela en un tableau.
Et le premier élément du tableau contient Basic.
Le deuxième élément du tableau est l'endroit où cette chaîne codée base64 existe.
C' est pourquoi nous ne regardons que le deuxième élément de ce tableau.
Donc, ce fractionnement entraînera la scission de la chaîne en un tableau de deux éléments.
Donc nous pourrions, nous ramassons la chaîne codée base64 à partir de cela.
Et puis nous dans ce tampon, et puis nous allons le convertir en chaîne.
Et encore une fois, divisez la chaîne une fois de plus car la chaîne
elle-même contiendra le nom d'utilisateur et le mot de passe séparés par deux points.
Donc, je vais le diviser en utilisant le deux-points comme
point de séparation pour cette chaîne ici.
Notez donc que je charge deux divisions ici, l'un sur l'espace et le
second, en utilisant le deux-points qui sépare le nom d'utilisateur et le mot de passe.
Donc, à la fin de cette variable auth devrait être un tableau contenant deux éléments,
le nom d'utilisateur et le mot de passe qui est extrait de la chaîne base64.
Donc, à ce stade, ce que je vais faire est,
juste pour votre clarté,
je vais simplement dire var
username = auth [0] et ensuite,
var password = auth [1].
Donc maintenant, j'ai extrait le nom d'utilisateur et le mot de passe de mon en-tête d'autorisation.
Maintenant, je vais utiliser une valeur par défaut pour le nom d'utilisateur et le
mot de passe dans cette implémentation.
Plus tard, nous verrons que nous pouvons permettre aux utilisateurs de créer leur propre nom d'utilisateur et
mot de passe.
Mais pour le moment, je vais juste utiliser,
Le nom d'utilisateur encodé et mot de passe en tant qu'administrateur.
Et le mot de passe sera juste mot de passe.
Pour cet exercice de base,
nous allons l'utiliser comme nom d'utilisateur et mot de passe par défaut.
Si le nom d'utilisateur que j'obtiens est admin et que le mot de passe est le mot de passe de chaîne.
Ensuite, je suis tout à fait bien pour permettre que la
demande du client sera transmise au middleware suivant donc, je dirai ensuite.
Donc, quand je dis ensuite, cela signifie que de l'authentification
leur demande sera transmise sur le prochain ensemble de middleware ici et
ensuite Express essaiera de faire correspondre la requête spécifique à était
middleware spécifique qui traitera cette requête.
C' est donc là que nous allons le laisser passer.
Sinon, cela signifie que le nom d'utilisateur et le mot de
passe ne correspondent pas à la demande, le
nom d'utilisateur et le mot de passe par défaut que je suis en train de configurer.
Donc, cela signifie qu'il y a une erreur.
Donc, dans ce cas, je vais à nouveau provoquer une erreur ici,
donc nous allons dire autre, Erreur.
Donc, nous allons à nouveau générer une erreur et ensuite défier le client d'envoyer
les informations d'autorisation correctes, le nom d'utilisateur et le mot de passe ici.
Alors c'est tout.
Ce petit peu de middleware que nous venons d'implémenter ici,
middleware d'autorisation que nous venons d'implémenter ici.
Est suffisant pour implémenter l'authentification de base dans l'application.
Donc, après avoir fait ces changements,
sauvegardons les changements et puis nous verrons comment cela fonctionne réellement dans la pratique.
Sauvegardons les modifications.
Et puis on va démarrer notre serveur.
Maintenant, aller au terminal, bien sûr,
assurez-vous que vous êtes le serveur MongoDB est opérationnel.
Sinon, votre serveur Express ne démarrera pas.
J' ai donc le type d'invite npm start,
puis votre serveur Express sera opérationnel.
Maintenant, ouvrez dans la fenêtre de navigation privée dans votre navigateur.
La raison pour laquelle je vous demande d'utiliser une fenêtre de navigation privée est que lorsque vous tapez
le nom d'utilisateur et le mot de passe, il sera mis en cache par votre navigateur.
Donc, si vous utilisez une fenêtre de navigation privée, si vous redémarrez le navigateur...
Ensuite, le cache sera effacé automatiquement, de
sorte que cette information ne sera pas mémorisée.
Maintenant, que se passe-t-il si vous tapez le nom d'utilisateur et le mot de passe, il sera mis en cache,
donc par la suite, lorsque vous essayez d'accéder au serveur, les informations mises en cache
seront automatiquement envoyées dans la demande que vous générez.
C' est pourquoi il est important
d'utiliser une fenêtre de navigation privée juste pour vous montrer que l'authentification de base fonctionne.
Donc, dans la barre d'adresse de votre navigateur, tapez localhost:3000, et voyons ce qui se passe.
Donc, lorsque vous tapez localhost:3000, vous voyez immédiatement que votre navigateur ouvre
cette boîte de dialogue en haut vous demandant de taper le nom d'utilisateur et le mot de passe.
Si vous ne le tapez pas, laissez-moi taper un nom d'utilisateur aléatoire et puis voir ce qui se passe.
Donc, si je tape un nom d'utilisateur et un mot de passe aléatoires,
alors vous voyez que la demande est rejetée.
Je ne suis pas autorisé à accéder au serveur,
puis si le serveur dira à nouveau que le client n'est pas autorisé.
Et donc il reviendra et nous défiera à nouveau pour l'authentification correcte.
Laissez-moi donc taper l'authentification actuelle.
Alors laissez-moi taper admin et le mot de passe comme mot de passe.
Et puis connectez-vous, et vous verrez que maintenant l'
application Express vous permettra d'entrer et d'accéder à la valeur par défaut,
qui dans ce cas est le fichier Index.html de ce dossier public statique.
Maintenant, la même chose si vous essayez d'accéder à localhost:plats
sans l'autorisation, alors cela ne fonctionnera pas.
Et je vous le montrerai en utilisant le facteur dans une minute.
Maintenant, après avoir vu comment fonctionne l'authentification, allons
regarder ce qui s'est passé sur la console sur notre site serveur. En
allant à la console sur notre site serveur, vous voyez que tout un tas d'informations
a été imprimé ici, donc comme vous l'avez vu,
nous avons déconnecté les en-têtes de requête ici.
C' est donc la première requête qui est arrivée avec l'en-tête de requête.
Et ici, vous voyez qu'il n'y a pas d'en-tête d'autorisation dans la demande.
Et donc votre serveur a rejeté cela avec un 401 demandant à notre client de s'autoriser lui-même.
La deuxième fois aussi depuis que nous n'avons pas tapé l'autorisation correcte que le
serveur a rejetée.
Bien sûr, vous remarquez maintenant que dans l'en-tête, juste là, l'autorisation
y est effectivement incluse, et vous voyez comment l'autorisation est incluse.
Il est dit Basic séparé par un espace, et
séparé par la chaîne encodée 64 bits qui contient le nom d'utilisateur et le mot de passe.
Et puis, nous voyons que le serveur
a rejeté cela parce que l'autorisation était erronée à ce moment-là.
Maintenant, plus tard, nous avons tapé le nom d'utilisateur et le mot de passe corrects.
Donc, juste là, dans la troisième requête qui est arrivée, nous avons tapé le nom d'utilisateur et le mot de
passe corrects.
Et donc, c'est pourquoi vous voyez que l'en-tête de requête contient l'autorisation,
et cette chaîne utilise le codage correct du nom d'utilisateur et du mot de passe.
Comment je le sais ?
Eh bien, j'ai croisé et je sais
que, c'est la version codée étrangère de base de la chaîne là-bas.
Nous verrons aussi cela à partir de notre image de facteur ou quoi.
Maintenant, vous voyez que la requête a été acceptée et
qu'elle a renvoyé la valeur correctement.
Et puis bien sûr, par la suite, le client a demandé un favicon, l'icône.
Et comme nous n'avons pas le favicon côté serveur, il répond avec le 404 et
bien sûr votre icône préférée n'est pas affichée dans la barre d'adresse.
Donc, c'est bien, mais notez en particulier.
Les particuliers demandés sont entrés,
où l'en-tête d'autorisation correct a été inclus.
Et ainsi, il a été couronné de succès à l'époque.
Essayons de voir comment on pourrait faire la même chose avec Postmap.
Donc ici, j'ai ma fenêtre de carte postale ouverte.
Et donc dans ma fenêtre Postman, je vais taper
un get to localhost : à mon serveur, puis envoyer la demande et
vous remarquerez immédiatement qu'il conteste dire 401 non autorisé.
Donc c'est le message de réponse du côté serveur,
alors remarquez ce qu'il enregistre, 401 Non autorisé.
Et il dit que la réponse doit inclure un champ d'en-tête WWW-Authenticate.
Et cela défiera le client d'envoyer les informations d'autorisation, le nom d'
utilisateur et le mot de passe.
Donc, en prévisualisant cela, nous voyons que la phrase que vous n'êtes pas authentifié
, puis le code 401 ici.
Maintenant, en regardant les en-têtes du message de réponse.
Lorsque vous regardez l'en-tête du message de réponse, vous pouvez voir en particulier
cet en-tête qui y est inclus, qui est www.authenticatebasic.
Maintenant, comment pouvons-nous faire l'authentification ou l'autorisation dans la poste ?
Donc c'est là qu'ils allaient à ceci juste en dessous de cette case ici,
vous verrez cette autorisation ici.
Et quand vous cliquez sur l'autorisation, en ce moment, il est dit NON AUTH..
Utilisons l'authentification de base.
Donc, quand je dis l'authentification de base, cela
me donnera ces deux champs ici où je peux taper le nom d'utilisateur et le mot de passe.
Laissez-moi taper le nom d'utilisateur et le mot de passe corrects.
Donc, je vais dire nom d'utilisateur admin, mot de passe est le mot de passe P-A-S-W-O-R-D.
Donc, vous pouvez le voir, c'est exactement le mot de passe que nous avons ici.
Donc, une fois que vous tapez le nom d'utilisateur et le mot de passe, ils diront Demande de mise à jour.
Donc, quand je clique sur Demande de mise à jour, vous verrez que immédiatement dans l'en-tête,
vous verrez qu'
il y a ce champ ici qui a été ajouté ici disant autorisation.
Et puis, vous verrez ce que cette deuxième partie, la valeur que vous pouvez prendre.
Il dit basique et un espace, puis cette chaîne particulière.
Donc, si vous vérifiez cette chaîne particulière ici, ce sera la
chaîne exacte que vous verrez dans l'en-tête du message de demande réussie.
Remarquez ce que cette chaîne dit.
Il dit quelque chose YWR, puis se termine par un Q égal à. En
allant à notre terminal, vous voyez que la requête réussie
contenait exactement cette chaîne ici.
Il dit YWR et se termine par Q égal à là.
Ainsi, en tapant les informations dans l'autorisation, puis en cliquant sur
la demande de mise à jour, ces informations sont ajoutées dans les en-têtes d'autorisation.
Donc maintenant c'est une requête get,
je n'ai pas besoin du type de contenu là car il ne contient aucun corps.
Donc maintenant que l'autorisation a été incluse,
envoyons la requête maintenant correctement et vous verrez que
la réponse venant du site du serveur contiendra le fichier d'index comme vous le souhaitez.
Maintenant, laissez-moi supprimer l'autorisation.
Maintenant, c'est la raison pour laquelle Postmap m'aide à vérifier ces choses beaucoup plus
facilement, je peux supprimer l'autorisation et ensuite envoyer la demande.
Et il contiendra toujours cette autorisation,
parce que j'ai tapé ceci dans le champ d'autorisation.
Donc, laissez-moi effacer l'autorisation à partir de là, et ensuite envoyer la demande ici.
Et puis il dit que vous n'êtes pas authentifié.
De même, si j'envoie la demande à la vaisselle.
Auparavant, cela fonctionnait bien, mais
maintenant vous voyez que nous sommes empêchés d'accéder au point de terminaison /plats également.
Et la même chose avec tous les autres points de terminaison APR repos aussi.
Vous ne serez pas autorisé à accéder, car le middleware d'autorisation vient avant d'
avoir accès à l'un de ces points de terminaison
dans la liste des middleware pour votre serveur express.
Donc maintenant, si j'inclut maintenant l'autorisation,
Et puis mettre à jour ma demande et ensuite envoyer la requête au serveur,
alors le serveur répondra.
Maintenant, évidemment, en ce moment, ma base de données
est vide, donc elle répond avec un tableau vide là-bas.
Mais maintenant, la requête est passée avec succès, et
je suis capable de récupérer les informations de la chaussette du serveur.
Il s'agit donc d'une démonstration rapide de l'
autorisation de base dans notre application APR de repos express.
Avec cela, nous complétons cet exercice.
C' est un bon moment pour
vous de faire un commentaire get avec le message de l'authentification de base.
[ MUSIQUE]