Authentification des applications Node.js avec passeport

Dans ce didacticiel, nous développerons une application Node.js à partir de zéro et utiliserons le Popultication Middleware Passport pour prendre soin de nos problèmes d'authentification.

La documentation de Passport le décrit comme un "middleware d'authentification simple et discret pour le nœud" et à juste titre.

En se fournissant en tant que middleware, Passport fait un excellent travail pour séparer les autres préoccupations d'une application Web de ses besoins d'authentification. Il permet à Passport d'être facilement configuré dans n'importe quelle application Web express, tout comme nous configurons d'autres middleware express tels que la journalisation, le pistage de carrosserie, la batterie de cookies et la manipulation de session.

Ce tutoriel suppose une compréhension de base de Node.js et du cadre express pour garder l'accent sur l'authentification, bien que nous créions un exemple d'application express à partir de zéro. Nous allons sécuriser l'application en y ajoutant des itinéraires et en authentifiant certaines de ces itinéraires.

Stratégies d'authentification

Passport nous fournit 500 mécanismes d'authentification à choisir. Vous pouvez vous authentifier par rapport à une instance de base de données locale ou distante ou utiliser la connexion unique à l'aide de fournisseurs OAuth pour Facebook, Twitter, Google, etc. pour s'authentifier avec vos comptes de médias sociaux.

Mais ne vous inquiétez pas: vous n'avez pas besoin d'inclure de stratégie dont votre application n'a pas besoin. Toutes ces stratégies sont indépendantes les unes des autres et emballées en tant que modules de nœuds distincts qui ne sont pas inclus par défaut lorsque vous installez le middleware de Passport: NPM Install Express - Savec

Vous pouvez également installer le Generator express avec l'extrait de code suivant:

serializeUser function is used to persist a user's data into the session after successful authentication, while a passport , and create a file init.js with the following code snippets:

 var user = require ('../ Modèles / utilisateur');<br><br> module.exports = fonction (passeport) {<br><br> // Passeport doit être en mesure de sérialiser et de désérialiser les utilisateurs pour prendre en charge les séances de connexion persistantes<br> Passport.SerializeUser (fonction (utilisateur, fait) {<br> Console.log ('Sérializant l'utilisateur:', utilisateur);<br> fait (null, user._id);<br> });<br><br> Passport.deserializeUser (fonction (id, fait) {<br> User.findById (id, fonction (err, utilisateur) {<br> Console.log («désérialisation de l'utilisateur:», utilisateur);<br> fait (err, utilisateur);<br> });<br> });<br> }<br>

Utilisation de stratégies de passeport

We will now define Passport's strategies for handling login and signup . Each of them would be an instance of the Local Authentication Strategy of Passport and would be created using the npm i connect-flash .

Stratégie de connexion

Create a login.js file in the bcryptjs by executing the command passport.use() function.

 var bcrypt = require ('bcrypt-nodejs');<br><br> module.exports = fonction (passeport) {<br><br> Passport.use ('Login', ...)<br> ));<br><br> var isvalidpassword = fonction (utilisateur, mot de passe) {<br> return bcrypt.comParesync (mot de passe, user.password);<br> }<br> }<br>

Si vous vous sentez mal à l'aise avec les extraits de code et que vous préférez voir le code complet en action, n'hésitez pas à parcourir le code ici.

Stratégie d'enregistrement

Now, we create a signup.js file in the views folder of our application, we should see .jade files. Jade est un moteur de modèles, principalement utilisé pour les modèles côté serveur dans Node.js. C'est une façon puissante d'écrire des pages de balisage et de rendu dynamiquement à l'aide d'express. Il donne beaucoup plus de flexibilité par rapport à l'utilisation d'un fichier HTML statique. Pour en savoir plus sur Jade et comment cela fonctionne, vous pouvez consulter la documentation.

Ensuite, nous créons les quatre vues suivantes pour notre application:

1. layout.jade contains the basic layout and styling information.
2. index.jade contains the login page providing the login form and giving the option to create a new account.
3. register.jade contains the registration form.
4. home.jade says hello and shows the logged-in user's details.

 doctype html<br> html<br> tête<br> titre = titre<br> lien (rel = 'Stylesheet', href = '/ stylesheets / style.css')<br> lien (rel = 'Stylesheet', href = 'http: //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css')<br> corps<br> bloquer le contenu<br>

In the index.jade file, we will include the following code snippets:

 étend la disposition<br><br> bloquer le contenu<br> div.Container<br> div.<br> div.col-sm-6.col-md-4.col-md-offset-4<br> h1.text-center.login-title Connectez-vous à notre application de passeport<br> div.<br> IMG (class = 'Profil-iMg', src = 'https: //lh5.googleusercontent.com/-b0-k99fzlye/aaaaaaaaaai/aaaaaaaaaa/eu7opa4byxi/photo.jpg? sz = 120')<br> form (class = 'form-sign', action = '/ login', méthode = 'post')<br> entrée (type = 'text', name = 'username' class = 'form-control', placeholder = 'email', requis, automatique)<br> entrée (type = 'mot de passe', name = 'mot de passe' class = 'form-control', placeholder = 'mot de passe', requis)<br> bouton (class = 'btn btn-lg btn-primary btn-block', type = 'soumi') connecter<br> span.clearfix<br> a (href = '/ inscription', class = 'text-cent new-compcou') créer un compte<br> #message<br> Si le message<br> H1.Text-Center.Error-Message # {Message}<br>

In the register.jade file, we'll include the following code snippets:

 étend la disposition<br><br> bloquer le contenu<br> div.Container<br> div.<br> div.col-sm-6.col-md-4.col-md-offset-4<br> H1.Text-center.login-title Détails<br> div.<br> form (class = 'form-sign', action = '/ inscription', méthode = 'post')<br> entrée (type = 'text', name = 'username', class = 'form-control', placeholder = 'username', requis, automatique)<br> entrée (type = 'mot de passe', name = 'mot de passe', class = 'form-control nomArgin', placeholder = 'mot de passe', requis)<br> entrée (type = 'email', name = 'e-mail', class = 'form-control', placeholder = 'e-mail', requis)<br> entrée (type = 'text', name = 'firstName', class = 'form-control', placeholder = 'prénom', obligatoire)<br> entrée (type = 'text', name = 'lastname', class = 'form-control', placeholder = 'name', requis)<br> bouton (class = 'btn btn-lg btn-primary btn-block', type = 'soumi') registre<br> span.clearfix<br> #message<br> Si le message<br> H1.Text-Center.Error-Message # {Message}<br>

In the home.jade file, we'll include the following code snippets:

 étend la disposition<br><br> bloquer le contenu<br> div.Container<br> div.<br> div.col-sm-6.col-md-4.col-md-offset-4<br> #utilisateur<br> h1.text-cent.login-title bienvenue # {user.firstname}. Vérifiez vos coordonnées ci-dessous:<br> div.<br> ul.User-deter<br> Nom d'utilisateur Li ---> # {user.username}<br> Li e-mail ---> # {user.email}<br> le prénom li ---> # {user.firstname}<br> Nom de famille Li ---> # {user.lastName}<br> a (href = '/ déconnexion', class = 'text-cent new-compcou') déconnectez-vous<br>

Maintenant, la page d'inscription ressemble à ceci:

La page de connexion ressemble à ceci:

Et la page Détails ressemble à ceci:

Implémentation de la fonctionnalité de déconnexion

Le passeport, étant middleware, permet d'ajouter certaines propriétés et méthodes sur les objets de demande et de réponse. Passport has a very handy request.logout() method which invalidates the user session apart from other properties.

Il est donc facile de définir un itinéraire de déconnexion:

 / * Gérer la déconnexion * /<br> router.get ('/ déconnexion', fonction (req, res, suivant) {<br> req.logout (fonction (err) {<br> if (err) {return next (err); }<br> res.redirect ('/')<br> })<br> });<br>

Protéger les itinéraires

Passport donne également la possibilité de protéger l'accès à un itinéraire jugé impropre à un utilisateur anonyme. Cela signifie que si un utilisateur essaie d'accéder à http: // localhost: 3000 / home sans s'authentifier dans l'application, il sera redirigé vers la page d'accueil.

 / * Obtenez la page d'accueil * /<br> router.get ('/ home', isAuthenticated, fonction (req, res) {<br> res.render ('home', {user: req.user});<br> });<br><br> // Comme pour n'importe quel middleware, il est quintessentiel d'appeler Next ()<br> // Si l'utilisateur est authentifié<br> var isAuthenticated = function (req, res, suivant) {<br> if (req.isAuthenticated ())<br> return next ();<br> res.redirect ('/');<br> }<br>

Conclusion

Passport n'est pas le seul joueur de cette arène lorsqu'il s'agit d'authentifier les applications Node.js, mais la modularité, la flexibilité, le support communautaire et le fait qu'il s'agit simplement de faire du passeport un excellent choix.

Pour une comparaison détaillée de Passport et Every Auth, voici une perspective intéressante et informative du développeur de Passport lui-même.

Vous pouvez trouver le code source complet pour l'exemple de notre dépôt GitHub.

Si vous voulez voir ce que vous pouvez faire d'autre avec Node.js, consultez la gamme des éléments Node.js sur le marché Envato, d'un formulaire de contact AJAX réactif à un raccourcissement d'URL, ou même un générateur de crud à base de données.

Ce message a été mis à jour avec les contributions de Mary Okosun. Mary est un développeur de logiciels basé à Lagos, au Nigéria, avec une expertise dans Node.js, JavaScript, MySQL et NoSQL Technologies.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!