Registro y autorizacin de usuarios en Node.js con Twitter y Facebook marzo 22, 2014 DevelopmentTutorials 5 Comments autenticacin,Express,facebook,login,MongoDB,Mongoose,Node,passport,social,twitter,usuarios

inShare10Elpasado viernesme ofrecieron impartir unaclase BONUSen la plataforma de estudiantes de los cursos deMejorando.la.El tema que elegimos fue como implementar unsistema de login de usuarios utilizando plataformas sociales(TwitteryFacebook) y empleandoNode.jsen el Backend.Esta fue la presentacin que utilic en la exposicinLogin social con node.jsfromCarlos AzaustreY a continuacin explico a modo de tutorial los pasos para implementar este sistema en un proyecto que tengamosLo primero de todo, necesitamos tenerNode.jsyMongoDBinstalados en nuestro equipo. Node es el backend que utlizaremos y MongoDB es una base de datos no relacional, basada en documentos JSON. Podemos utlizar cualquier otra base de datos (por ejemplo, MySQL o cualquier otra). Yo lo hago con Mongo porque me parece ms sencillo y porque esta basada en JavaScript del cual soy un talibn http://nodejs.org/download/ https://www.mongodb.org/downloadsA continuacin creamos una estructura base de aplicacin con el frameworkExpress. De esta forma nos crea un esqueleto con archivos y carpetas de una especie de hola mundo con Express.$ sudo npm install -g express$ express passport-example$ cd passport-example$ npm installInstalamos las dependencias que vamos a utilizar.Mongoosees el driver que nos ayuda a conectarnos a MongoDB e implementar esquemas de los modelos que salvemos en la base de datos.Passportes la librera que nos permite agilizar el proceso de autenticado y registro de usuarios con Node.js.Passport-twitteryPassport-facebookson las libreras especficas para el login con Twitter y Facebook ya que podemos utilizar Passport sin redes sociales implementando un mtodo local con Passport-Local.Con el prefijosavelogramos que las dependencias se queden grabadas en elpackage.json$ npm install --save mongoose$ npm install --save passport$ npm install --save passport-twitter$ npm install --save passport-facebookCreamos unmodelo usuario(/models/user.js) donde indicaremos que datos vamos a querer almacenar en la base de datos para nuestros usuarios. En este ejemplovamos a salvar el nombre, el proveedor, un ID, la foto del usuario y un campo donde almacenaremos la fecha en la que el usuario se registr en nuestra aplicacin.var mongoose = require('mongoose');var Schema = mongoose.Schema;

var UserSchema = new Schema({ name: String, provider: String, provider_id: {type: String, unique: true}, photo: String, createdAt: {type: Date, default: Date.now}});

var User = mongoose.model('User', UserSchema);ConfiguramosPassport(/passport.js) importando las libreras que utilizamos y las funciones que nos permiten el login.ConseriealizeUserydeserializeUserlogramos que el objeto usuario quede almacenado en la sesin de la aplicacin y asi poder utilizarlo a lo largo de ella.ConTwitterStrategyyFacebookStrategyutilizamos las estrategias de autenticacin que nos proporciona Passport, les pasamos como parmetros losAPI Key y API secretque nos dan las plataformas cuando registramos una aplicacin en ellas, y nos devuelven varios objetos, entre ellos el objeto profile que contiene toda la informacin del usuario que devuelve Twitter o Facebook y del que podemos sacar los atributos que queramos para nuestra aplicacin (nombre, ID, foto, etc..)var mongoose = require('mongoose');var User = mongoose.model('User');var TwitterStrategy = require('passport-twitter').Strategy;var FacebookStrategy = require('passport-facebook').Strategy;

module.exports = function(passport) {

passport.serializeUser(function(user, done) { done(null, user); });

passport.deserializeUser(function(obj, done) { done(null, obj); }); passport.use(new TwitterStrategy({ consumerKey: 'TWITTER_CONSUMER_KEY', consumerSecret: 'TWITTER_CONSUMER_SECRET', callbackURL: '/auth/twitter/callback' }, function(accessToken, refreshToken, profile, done) { User.findOne({provider_id: profile.id}, function(err, user) { if(err) throw(err); if(!err && user!= null) return done(null, user);

var user = new User({ provider_id: profile.id, provider: profile.provider, name: profile.displayName, photo: profile.photos[0].value }); user.save(function(err) { if(err) throw err; done(null, user); }); }); })); passport.use(new FacebookStrategy({ clientID: 'FACEBOOK_APP_CLIENT_ID', clientSecret: 'FACEBOOK_APP_SECRET_ID', callbackURL: '/auth/twitter/callback' }, function(accessToken, refreshToken, profile, done) { User.findOne({provider_id: profile.id}, function(err, user) { if(err) throw(err); if(!err && user!= null) return done(null, user);

var user = new User({ provider_id: profile.id, provider: profile.provider, name: profile.displayName, photo: profile.photos[0].value }); user.save(function(err) { if(err) throw err; done(null, user); }); }); }));Una buena prctica esmantener las API Keys separadas del cdigo fuente que subimos al repositorio, en un archivoconfig.jsque luego importamos desde donde lo necesitemos.var config = { twitter: { key: TWITTER_API_KEY, secret: TWITTER_API_SECRET }, facebook: { id: FACEBOOK_APP_ID, secret: FACEBOOK_APP_SECRET }};

module.exports = config;El archivo principal de la aplicacin Express y por tanto del servidor quedara mas o menos as (app.js)var mongoose = require('mongoose');var passport = require('passport');require('./models/user');require('./passport')(passport);

mongoose.connect('mongodb://localhost/passport-example', function(err, res) { if(err) throw err; console.log('Conectado con xito a la BD');});app.use(express.cookieParser());app.use(express.urlencoded());app.use(express.json());app.use(express.methodOverride());app.use(express.session({ secret: 'secretkey' }));

// Configuracin de Expressapp.use(passport.initialize());app.use(passport.session());...// Rutas de Passportapp.get('/logout', function(req, res) { req.logout(); res.redirect('/');});app.get('/auth/twitter', passport.authenticate('twitter'));app.get('/auth/facebook', passport.authenticate('facebook'));app.get('/auth/twitter/callback', passport.authenticate('twitter', { successRedirect: '/', failureRedirect: '/login' }));app.get('/auth/facebook/callback', passport.authenticate('facebook', { successRedirect: '/', failureRedirect: '/login' }));...exports.index = function(req, res){ res.render('index', { title: 'Passport-Example', user: req.user });};Esta sera la plantilla Jade que renderiza el index: (/views/index.jade). Como veis le aplicamos una lgica dentro de la plantilla. Si existe el objeto usuario es que estamos logueados en la aplicacin y por tanto le pedimos que nos muestre la foto y el nombre y un enlace a salir. En caso de que no exista el objeto usuario es que no estamos logueados, por tanto indicamos que nos muestre los enlaces al registro/login con Twitter y Facebookif(user) ul li img(src="#{user.photo}") li Bienvenido #{user.name} li a(href='logout') Salirelse ul li a(href='auth/twitter') Login con Twitter li a(href='auth/facebook') Login con FacebookPara crear una aplicacin en Twitter podemos ir ahttp://dev.twitter.comy registrar una nueva aplicacin. Indicamos el nombre y en los campos website y callback URL le ponemos example.com ya que no nos permite poner Localhost. Con facebook es similar, la URL eshttp://developers.facebook.comy en este caso si podemos indicarle que nuestra aplicacin funciona en localhost.Aqu estn las capturas para ambas plataformas:

Y ya est, el flujo de la aplicacin sera el siguiente: Primero nos pide autenticarnos con Twitter o Facebook

Si elegimos Twitter nos redirige a la pgina de autenticacin con Twitter. En el caso de no estar logueados nos pedira el usuario y la contrasea de Twitter

Y si todo sale correctamente, nos redirige a nuestra aplicacin con el usuario logueado, mostrndonos el nombre de usuario y la foto de perfil

Tenistodo el cdigo utilizado disponible y comentado en espaolenesterespositorio de GitHub. Espero que os sirva en vuestros proyectos y desarrollos