Bienvenue dans cette leçon, nous allons reprendre là où nous l'avons laissé avec le code d'authentification, pas le code seul.
Vous ne codez jamais seul.
Vous m'avez ici.
Donc codez le long de la partie 3.
Maintenant, nous arrivons à la viande d'authentification.
Nous allons commencer par ajouter ces itinéraires d'inscription, enregistrer les itinéraires et le formulaire d'inscription et s'assurer qu'à la fin de cette vidéo nous devrions être en mesure de vous inscrire à notre application.
Nous ne serons pas en mesure de vous déconnecter.
Nous ne serons pas en mesure de vous connecter mais nous pourrons vous inscrire.
D'ACCORD.
Alors, commençons.
La première chose que nous devons discuter sont les itinéraires que nous devons ajouter.
Et avant que je le fasse je vais juste ajouter un petit diviseur ici parce que nous avons beaucoup de contenu vers le haut de dessus qui dit simplement des itinéraires que je ferai ceci avec des signes un peu égaux.
Juste pour préciser que toutes les routes vont au-dessous de cette ligne.
D'ACCORD.
Donc, nous avons notre slash obtenir et nous avons l'itinéraire secret.
Maintenant ici, nous allons ajouter dans notre Auth. Itinéraires pour revoir les itinéraires dont nous avons besoin.
Je vais vraiment aller à la version de travail de cette page d'accueil étonnante et puis lorsque vous cliquez sur l'avis de registre que l'URL est slash de registre et nous voyons un formulaire.
Donc, nous avons un registre de slash d'itinéraire qui nous montrera le formulaire pour réellement s'inscrire et puis si nous inspectons ce formulaire, vous verrez qu'il est en train d'envoyer une demande de post pour slash register post slash register.
Nous n'avons pas à l'appeler registre slash.
Vous verrez des choses comme inscription ou enregistrement.
Il peut être ce que vous voulez, mais l'enregistrement est bon pour nous.
Donc, nous allons revenir à notre apt.
Oui.
Et nous devons ajouter ces deux routes et je vais commencer par une application ne reçoivent pas de registre slash.
Et encore le point de ceci est juste pour montrer la forme.
Donc, montrer formulaire d'inscription.
D'ACCORD.
Donc apt get slash register et puis notre callback dans ici la demande et la réponse exactement comme ça et nous ferons redstart rendre et nous allons appeler son modèle de registre et la prochaine chose logique à faire serait de créer le formulaire de registre.
Donc, nous allons faire une vue tactile slash registre.
E.J. Oui, puis nous allons ouvrir le même fichier et à l'intérieur d'ici, nous allons commencer par un simple disons simplement signer formulaire et enregistrer et nous allons nous assurer que nous pouvons voir que.
Alors commencez le serveur, alors nous allons aller à notre application ici.
Revenez au chemin racine pour commencer.
Et maintenant, allons à la barre oblique de registre et obtenir l'inscription pour lui.
Génial.
Maintenant, ajoutons dans un forum et notre formulaire doit avoir deux entrées, une pour le nom d'utilisateur un pour le mot de passe.
Nous allons donc commencer par définir un formulaire et nous reviendrons et ajouterons la méthode en action.
Nous commencerons par une contribution.
Les deux sont dactylographiés texte, bien que nous pouvons faire le mot de passe type d'entrée est égale mot de passe qui est en fait une meilleure idée.
Donc, le type d'entrée va texte placeholder équivaut à nom d'utilisateur juste comme ça et puis je vais juste dupliquer cela et je vais faire le type d'entrée parce que mot de passe et espace réservé sera mot de passe et enregistrer.
Et puis nous allons ajouter dans un soumettre et nous pouvons soit faire type d'entrée est égal à soumettre ou.
Ou.
Je préfère un bouton.
L'un ou l'autre fonctionnera tant que le bouton se trouve à la fin du formulaire.
Il soumettra automatiquement le formulaire.
D'ACCORD.
Alors soumettez et puis nous avons notre type d'entrée parce que le type de saisie de texte passe mot de passe et nous pouvons commencer par juste jeter un coup d'oeil à ceci et nous voyons notre forme mais nous manquons deux choses cruciales.
Tout d'abord, le formulaire ne va nulle part et même s'il a envoyé quelque part, il n'enverrait aucun de ces éléments, car nous n'avons pas les attributs de nom.
Donc, nous avons besoin d'ajouter un nom égal au nom d'utilisateur et le nom est égal à mot de passe juste comme ça et nous allons enregistrer.
Maintenant, si nous jetons un coup d'oeil à la forme rien ne devrait sembler différent, mais il est maintenant presque mis en place.
Maintenant nous devons ajouter les informations pour l'étiquette de formulaire.
Ou nous avons action et méthode.
Donc, l'action, il va être caisse enregistreuse aussi.
Mais nous allons l'envoyer comme une demande de poste et nous n'avons pas encore cette route.
Donc, si je suis allé et rempli le formulaire dès maintenant si je rafraîchir et rempli le formulaire, il serait juste accrocher et puis éventuellement temps parce que nous n'avons pas un registre post-road slash et cela peut être appelé tout bien sûr, mais c'est Conventionnelle pour le nommer la même chose que le registre de la barre oblique de l'itinéraire.
Donc, faisons la même chose et cette route serait effectivement responsable de la manipulation des utilisateurs s'inscrire et nous allons faire une application post slash fonction de registre réponse à la demande.
Et ici nous allons ajouter toute la logique pour commencer.
Nous allons juste faire un bon repos et enregistrer post-Trib juste pour s'assurer qu'il est connecté OK.
Et si nous redémarrer le serveur et revenir actualiser la page de remplir des données aléatoires et cliquez sur soumettre.
Nous devrions voir post-draft enregistré.
Voilà.
Donc, cela signifie que notre formulaire se soumet au bon endroit.
Nous frappons ceci maintenant que nous arrivons à la partie amusante qui est où nous réellement manipulez l'utilisateur s'inscrivent environ 10 nouvelles lignes que vous n'avez pas vues la plupart de.
Je vais commencer par écrire la syntaxe, puis je vais faire une pause et aller sur chaque ligne et ce qu'il fait.
Et la première chose que nous avons réellement besoin de faire qui est une revue est que nous devons ajouter l'analyseur dans le corps et le configurer parce que nous prenons des données à partir d'un formulaire.
Ce formulaire est d'envoyer des données dans le corps et nous voulons être en mesure de dire demande de corps.
Utilisez votre nom pour le mot de passe Quest up Vadi.
En ce moment, ceux-ci seront vides.
Donc up top, nous avons juste besoin de faire une application qui utilisent l'économe du corps dot URL codé et puis nous ajoutons dans ce vrai étendu.
Et c'est un autre ces lignes que vous venez de s'habituer à taper.
Nous avons besoin à tout moment que nous allons utiliser un formulaire et d'afficher des données à une demande.
OK, c'est fait maintenant.
Donc, nous devrions être en mesure d'obtenir la demande de corps à ce nom d'utilisateur et mot de passe qui contiendra le nom d'utilisateur et le mot de passe à partir du formulaire que l'utilisateur tente de s'inscrire avec.
Donc, maintenant, nous sommes de retour à la logique et je vais taper quelques lignes que j'ai mentionné et ensuite les expliquer par la suite.
Donc, l'utilisateur ne s'inscrivent pas et ensuite au lieu de l'enregistrement de point d'utilisateur, nous allons passer dans Nouvel utilisateur et dans Nouvel utilisateur.
Nous allons passer en nom d'utilisateur est égal à demander jusqu'à Oddy ce nom d'utilisateur, mais nous n'ajoutons pas de mot de passe dans ce nouvel utilisateur.
Nous allons réellement l'ajouter après que nous ayons créé la nouvelle requête d'utilisateur jusqu'à la virgule de mot de passe de corps et puis nous allons ajouter une fonction de rappel jamais et alors l'utilisateur et alors nous ouvrirons cela.
D'ACCORD.
Alors parlons de ce que nous avons fait jusqu'à présent.
Nous créons un nouvel objet utilisateur qui n'est pas réellement sécurisé pour la base de données mais c'est un nouvel utilisateur et nous ne transmettons que le nom d'utilisateur.
Et la raison pour laquelle nous faisons cela, c'est que nous ne sauvegardons pas le mot de passe dans la base de données.
Ce n'est pas vraiment une bonne idée.
Et je vais vous montrer ce que nous avons réellement économiser à la place.
Une fois que nous obtenons quelque chose dans une base de données, mais ce n'est pas le mot de passe.
Donc, ce que nous faisons, c'est que nous passons le mot de passe comme un deuxième argument à l'utilisateur dot register et utiliser votre point de registre.
Nous allons prendre ce nouvel utilisateur qui a un nom d'utilisateur et nous allons hachage ce mot de passe qui signifie essentiellement qu'il le transforme en cette énorme chaîne de chiffres et de lettres et il stocke dans la base de données.
Donc il passe l'objet utilisateur que nous voulons créer et ensuite nous passons le mot de passe séparément.
Et puis, si tout va bien, il renverra un nouvel utilisateur qui a tout à l'intérieur de celui-ci.
Il a le nom d'utilisateur et puis il a le mot de passe haché aussi bien.
Alors voyons si cela fonctionne.
Et au lieu d'ici, nous allons ajouter notre simple si l'erreur et nous allons faire une erreur de log de la console et puis nous allons aussi faire un point rouge rendre le formulaire à nouveau comme ça.
Et s'il n'y a pas d'erreur alors nous avons une autre ligne à faire qui est Passport dot authentifier local.
Et encore une fois, je vais vous expliquer cela plus tard.
Demande réponse fonction et au lieu d'ici nous allons rediriger vers la page secrète.
Cela se produit une fois que l'utilisateur a été créé et qu'il n'y a pas d'erreur en cas d'erreur.
Nous allons rendre cette page de registre et c'est là que nous avons un retour ici.
Il court tout simplement tout.
Et s'il n'y a pas d'erreur, nous allons exécuter authentification passeport.
Donc, cette ligne ici passeport authentifier va réellement vog l'utilisateur qui prendra soin de tout dans la session.
Il stockera les informations correctes.
Il exécutera la méthode utilisateur sérialisée que nous avons spécifiée ici.
Et puis nous indiquons que nous voulons utiliser la stratégie locale.
Et à l'avenir, si nous voulions utiliser une autre stratégie et nous l'avions installé, nous pourrions changer cela pour être Twitter ou Facebook.
Et il ya d'autres choses que vous devez faire.
Nous devons nous inscrire et obtenir des informations d'identification sur Twitter et Facebook et nous devons enregistrer nos applications.
C'est donc plus compliqué.
Mais en ce qui concerne la logique et le passeport, nous pouvons juste échanger des choses et sortir et il ya quelques petits ajustements que nous devons faire.
Mais généralement le passeport rend vraiment facile pour nous d'échanger des stratégies différentes.
Donc, nous allons utiliser local.
Et ce nouveau est juste va effectivement enregistrer l'utilisateur en.
Et une fois que l'utilisateur a été connecté, nous allons rediriger vers le secret secrets stash et c'est juste un choix personnel.
Nous pourrions revenir à la page d'accueil de l'itinéraire, mais le secret slash est ce que nous sommes tous ici pour.
Donc, une fois que nous nous inscrivons une fois que nous nous inscrivons, nous devrions être ensuite pris pour slash secret à moins qu'il y ait un problème et puis nous reviendrons au formulaire d'inscription.
Donc testons-le, assurez-vous que nous n'avons pas d'erreurs de syntaxe.
Cela semble bon.
Maintenant, allons à notre application et actualisez la page et inscrivez-vous.
Donc, je vais créer un compte en tant que Colt et mon mot de passe sera juste mot de passe et pas de soumettre le coup et nous arrivons à la page secrète qui est de bonnes nouvelles, mais pour vraiment s'assurer qu'il a fonctionné.
Arrêtons le serveur et nous allons ouvrir Mongo et je vais me connecter à ma base de données, donc je ferai voir Digby et la base de données est Auth. Application de démonstration.
Donc, je vais utiliser cela, puis je vais regarder les collections de collections et ensuite nous allons à D.B que les utilisateurs trouvent tous les utilisateurs DB et vous pouvez voir, je veux dire, nous faisons un peu plus grand.
Nous avons un seul utilisateur à partir de quand je viens de signer et il ya beaucoup d'informations ici.
Eh bien il ya vraiment pas beaucoup, il ya seulement quelques morceaux, mais il ressemble beaucoup.
Plus important encore, nous avons un nom d'utilisateur ici.
Votre nom Colts.
C'est la pièce unique que nous avons précisée qui nous paraît normale.
Et puis il ya ces choses sel et hachage et je parle beaucoup plus sur ces dans l'authentification à partir de l'unité de scratch.
Donc nous n'allons pas aller dans beaucoup de détails tout ce que je vais mentionner à ce sujet pour l'instant est que l'avis de notre mot de passe crus le mot mot de passe dans mon cas n'est pas stocké dans la base de données à tous.
Ce que nous stockons est cette version hachée fou.
Et puis cette autre chose appelée sel qui va nous aider à hash cela.
Et en nous aidant, je veux dire que tout est pris en charge par le paquet de passeport manglers local que nous avons installé et reconfiguré comme une prise dans laquelle nous avons fait ici.
Donc, cela prend soin de tout, du hachage au salage à stocker des choses dans la base de données.
Tout ce que nous avions à faire était cette ligne simple ou redimensionner ce nouveau compte utilisateur dot register et nous passons dans un nouvel utilisateur avec un nom d'utilisateur.
Et puis il prend soin de tout le reste.
Nous lui donnons le mot de passe du formulaire mais nous ne le sauvegardons jamais à l'utilisateur.
Au lieu de cela, il gère tout et il ne sauve jamais un mot de passe du tout.
C'est en fait enregistrer la version de hachage.
D'ACCORD.
Alors, sortons de Mongo maintenant.
Et nous avons maintenant l'enregistrement de travail de la dernière chose que nous pourrions faire est d'ouvrir la page d'index ou la page d'accueil, je veux dire récit que rendre à la maison.
Donc, faisons C9 vues sosh maison et nous allons simplement ajouter un lien afin que nous allons ajouter un allié ici et ce lien devrait aller à la page de registre.
Ce sera donc un tag ancré avec un voyage égal à une caisse enregistreuse et nous allons simplement ajouter Sign-Up à l'intérieur du texte.
Donc, maintenant, si nous démarrons le serveur, nous allons effacer tout ce noeud à distance.
Oui et l'application visiteur et allez à la page d'accueil.
Nous avons maintenant un lien d'inscription où nous pouvons aller vous inscrire.
Génial.
Donc, nous avons couvert tout ce que je veux couvrir dans cette vidéo dans la prochaine vidéo.
Nous allons travailler sur les fonctionnalités de connexion.