Share
C'est déjà un fait bien établi que les mots de passe sont intrinsèquement faibles. Ainsi, demander aux utilisateurs finaux de créer des mots de passe forts pour chaque application qu'ils utilisent aggrave encore les choses..
Une solution de contournement facile consiste à laisser les utilisateurs s'authentifier via leurs comptes sociaux existants tels que Facebook, Twitter, Google, etc. Dans cet article, nous allons faire exactement cela et ajouter cette capacité de connexion sociale à l'exemple d'application Node développé dans la première partie de cette série d'authentification, afin que nous puissions nous authentifier via nos comptes Facebook et Twitter en utilisant le middleware Passport.
Si vous n'avez pas vérifié le précédent article, je vous recommande de le parcourir, car nous nous baserons sur les fondements de cet article et y ajouterons de nouvelles stratégies, itinéraires et vues..
Pour les non-initiés, la connexion sociale est un type de connexion unique utilisant les informations existantes provenant de sites de réseaux sociaux tels que Facebook, Twitter, etc., où les utilisateurs sont normalement censés avoir des comptes déjà créés..
La connexion sociale repose principalement sur un schéma d'authentification tel que OAuth 2.0. Pour en savoir plus sur les différents flux de connexion pris en charge par OAuth, lisez cet article. Nous avons choisi Passport pour gérer la connexion sociale pour nous, car il fournit différents modules pour une variété de fournisseurs OAuth, que ce soit Facebook, Twitter, Google, GitHub, etc. Dans cet article, nous utiliserons les modules passport-facebook et passport-twitter fournir des fonctionnalités de connexion via des comptes Facebook ou Twitter existants.
Pour activer l'authentification Facebook, nous devons d'abord créer une application Facebook à l'aide du portail de développeur Facebook. Notez l'ID de l'application et le secret de l'application, puis spécifiez l'URL de rappel en allant à Réglages et en spécifiant le URL du site dans le Site Internet section pour l'application. Assurez-vous également de saisir une adresse e-mail valide pour le Email du contact champ. Il est nécessaire de pouvoir rendre cette application publique et accessible au public..
Ensuite, allez au Statut et examen section et tournez le curseur pour Oui pour rendre l'application publique. Nous créons un fichier de configuration, fb.js, pour stocker ces informations de configuration qui seront nécessaires pour se connecter à Facebook..
// paramètres de l'application facebook - fb.js module.exports = 'appID': ''app' secret ':' ',' callbackUrl ':' http: // localhost: 3000 / login / facebook / callback '
De retour dans notre application Node, nous définissons maintenant une stratégie de passeport pour s’authentifier avec Facebook en utilisant le FacebookStratégie module, en utilisant les paramètres ci-dessus pour récupérer le profil Facebook de l'utilisateur et afficher les détails dans la vue.
Accentsconagua
passport.use ('facebook', nouvelle FacebookStrategy (clientID: fbConfig.appID, clientSecret: fbConfig.appSecret, callbackURL: fbConfig.callbackUrl, // facebook renvoie les jetons et la fonction de profil (access_token, refresh_token, profile, done) ) // processus asynchrone.nextTick (function () // recherche l'utilisateur dans la base de données en fonction de son identifiant facebook User.findOne ('id': profile.id, fonction (err, utilisateur) // if il y a une erreur, arrêtez tout et retournez // c'est-à-dire une erreur de connexion à la base de données if (err) return done (err); // si l'utilisateur est trouvé, puis connectez-les si (utilisateur) return done (null , utilisateur); // utilisateur trouvé, renvoie cet utilisateur else // s'il n'y a pas d'utilisateur trouvé avec cet identifiant facebook, créez-les var newUser = new User (); // définissez toutes les informations de facebook dans notre modèle d'utilisateur newUser.fb.id = profile.id; // définit l'identifiant facebook de l'utilisateur newUser.fb.access_token = access_token; // nous allons enregistrer le jeton que facebook fournit à l'utilisateur newUser.fb.firstName = profile.n ame.givenName; newUser.fb.lastName = profile.name.familyName; // examine le profil de l'utilisateur du passeport pour voir comment les noms sont renvoyés newUser.fb.email = profile.emails [0] .value; // facebook peut renvoyer plusieurs courriels, nous allons donc // sauvegarder notre premier utilisateur dans la base de données newUser.save (function (err) if (err)) renvoie err; // en cas de succès, renverra le nouvel utilisateur terminé ( null, newUser);); ); ); ));Nous devons maintenant ajouter certains itinéraires pour permettre la connexion avec Facebook et pour gérer le rappel après que l'utilisateur a autorisé l'application à utiliser son compte Facebook..
// route pour l'authentification et la connexion à facebook // différentes étendues lors de la connexion à router.get ('/ login / facebook', passport.authenticate ('facebook', scope: 'email')); // gère le rappel après que Facebook a authentifié l'utilisateur router.get ('/ login / facebook / callback', passport.authenticate ('facebook', successRedirect: '/ home', failureRedirect: '/'));La page de connexion de notre application de démonstration ressemble à ceci:
Lorsque vous cliquez sur le Se connecter avec Facebook bouton, il va essayer de s'authentifier avec Facebook. Si vous êtes déjà connecté à Facebook, la boîte de dialogue ci-dessous vous demandant votre permission s'affiche. Dans le cas contraire, il vous est demandé de vous connecter à Facebook, puis d'afficher cette boîte de dialogue..
Si vous autorisez l'application à recevoir votre profil public et votre adresse e-mail, notre fonction de rappel enregistrée sera appelée avec les détails de l'utilisateur. Nous pouvons les sauvegarder pour une référence future, les afficher ou simplement choisir de les ignorer, en fonction de ce que vous voulez faire avec les informations. N'hésitez pas à prendre de l'avance et à vérifier le code complet dans ce dépôt git.
Il serait bon de noter que, outre les informations de base fournies par cette application de démonstration, vous pouvez utiliser le même mécanisme d'authentification pour extraire des informations plus utiles sur l'utilisateur, telles que sa liste d'amis, en utilisant l'étendue appropriée et en utilisant les API de Facebook avec. le jeton d'accès reçu avec le profil utilisateur.
Un module d'authentification similaire doit être connecté pour gérer l'authentification via Twitter et des puces Passport pour l'aider avec son module passport-twitter..
Tout d'abord, vous devez créer une nouvelle application Twitter à l'aide de son interface de gestion des applications. Une chose à noter ici est que tout en spécifiant l'URL de rappel, Twitter ne semble pas fonctionner correctement si "localhost" est indiqué dans le champ URL de rappel. Pour surmonter cette limitation lors du développement, vous pouvez utiliser l'adresse de bouclage spéciale ou "127.0.0.1" à la place de "localhost". Après avoir créé l'application, notez la clé d'API et les informations secrètes suivantes dans un fichier de configuration, comme suit:
// paramètres de l'application twitter - twitter.js module.exports = 'apikey': ''apisecret': ' ',' callbackUrl ':' http://127.0.0.1:3000/login/twitter/callback '
La stratégie de connexion pour Twitter est une instance de TwitterStratégieet ça ressemble à ça:
passport.use ('twitter', nouvelle TwitterStrategy (consumerKey: twitterConfig.apikey, consumerSecret: twitterConfig.apisecret, callbackURL: twitterConfig.callbackURL, fonction (jeton, jetonSecret, profil, fait) // rendre le code asynchrone // User.findOne ne se déclenchera pas tant que toutes nos données de Twitter ne seront pas récupérées. Process.nextTick (function () User.findOne ('twitter.id': profile.id, function.err, err il y a une erreur, arrêtez tout et retournez // c'est-à-dire une erreur de connexion à la base de données if (err) return done (err); // si l'utilisateur est trouvé, connectez-les si (user) return done (null, utilisateur); // utilisateur trouvé, renvoie cet utilisateur else // s'il n'y a pas d'utilisateur, créez-les var newUser = new User (); // définit toutes les données utilisateur dont nous avons besoin de newUser.twitter.id = profile .id; newUser.twitter.token = jeton; newUser.twitter.username = profil.username; newUser.twitter.displayName = profile.displayName; newUser.twitter.lastStatus = profile._json.status.text; // enregistrer notre utilisateur dans le base de données newUser.save (function (err) if (err) throw err; return done (null, newUser); ); ); ); ));// route pour l'authentification et la connexion à Twitter // différentes étendues lors de la connexion à router.get ('/ login / twitter', passport.authenticate ('twitter')); // gère le rappel après que Facebook a authentifié l'utilisateur router.get ('/ login / twitter / callback', passport.authenticate ('twitter', successRedirect: '/ twitter', failureRedirect: '/')); / * GET Twitter View Page * / router.get ('/ twitter', isAuthenticated, fonction (req, res) res.render ('twitter', utilisateur: req.user););Maintenant, pour tester cela, assurez-vous d'utiliser http://127.0.0.1:http: // localhost:. Comme nous l'avons déjà mentionné ci-dessus, il semble y avoir un problème lors de l'échange de jetons avec Twitter avec "localhost" comme nom d'hôte. En cliquant sur le Se connecter avec Twitter bouton, comme prévu, il demande le consentement de l'utilisateur pour autoriser cette application à utiliser Twitter.
Lorsque vous autorisez l'application à accéder à votre compte Twitter et à des informations limitées, le gestionnaire de rappel inscrit dans la stratégie de connexion est appelé, qui est ensuite utilisé pour stocker ces informations dans une base de données principale.
Et voila !! Nous avons réussi à ajouter des connexions Facebook et Twitter à notre exemple d'application sans écrire beaucoup de code ni gérer les subtilités impliquées dans le mécanisme d'authentification en laissant Passport se charger de tout. Des stratégies de connexion similaires peuvent être écrites pour divers fournisseurs pris en charge par Passport. Le code de l’application complète se trouve dans ce référentiel git. N'hésitez pas à l'étendre et à l'utiliser dans vos propres projets.
