Login Social con Node.js
Normalmente en nuestras aplicaciones web llega un momento en el que necesitamos implementar un sistema de registro y autenticación de usuarios.
Podemos programarlo desde cero, pero llega a ser una tarea bastante tediosa, tenemos que tener en cuenta sesiones, privacidad, encriptación de contraseñas, etc,… Si ha esto le sumamos la implementación de un registro con cuenta de Facebook o Twitter como en el acceso a los cursos de Mejorando.la, la cosa se complica bastante.
Para implementar un registro y autenticación de usuarios en Node.js, tenemos la librería Passport. A continuación veremos como implementarlo.
Necesitamos tener Node.js y MongoDB instalados en nuestro entorno. La instalación es diferente según el sistema operativo. Googlea sobre ello, encontrarás información de sobra
Configurando nuestro entorno
Seguidamente vamos a crear el esqueleto de una aplicación Node con el framework Express
Código :
$ npm install -g express $ express login-social $ cd login-social $ npm install
A continuación instalamos las dependencias que vamos a emplear en la aplicación, lo hacemos con el flag `–save` para guardarlos en el `package.json`
Código :
$ npm install --save mongoose $ npm install --save passport $ npm install --save passport-twitter $ npm install --save passport-facebook
Vamos a crear un modelo para guardar los datos del usuario. El siguiente código corresponde al archivo models/user.js:
Código :
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);
Dando de alta nuestra aplicación en redes sociales
Antes de configuar Passport, vamos a crear una aplicación en Facebook y otra en Twitter para obtener sus claves de API (Key y Secret) y así poder usar esos proveedores en nuestras estrategias de registro.
- Registro en Twitter: http://dev.twitter.com
Registro en Facebook: http://ift.tt/qwEhdy
Estas claves las vamos a indicar en un fichero de configuración ya que es una buena práctica es mantener las API Keys separadas del código fuente que subimos al repositorio, en un archivo `config.js` que luego importamos desde donde lo necesitemos:
Código :
var config = { twitter: { key: TWITTER_API_KEY, secret: TWITTER_API_SECRET }, facebook: { id: FACEBOOK_APP_ID, secret: FACEBOOK_APP_SECRET } }; module.exports = config;
Usando passport.js
Lo siguiente que debemos hacer es configurar Passport, para ello hacemos uso de las funciones `serializeUser` y `deserializeUser` hacemos que el objeto que representa al usuario se almacene en la sesión. Las estrategias `TwitterStrategy` y `FacebookStrategy` utilizamos las estrategias de autenticación que nos proporciona Passport. Necesitamos las claves que hemos indicado antes:
passport.js
Código :
var mongoose = require('mongoose'); var User = mongoose.model('User'); var TwitterStrategy = require('passport-twitter').Strategy; var FacebookStrategy = require('passport-facebook').Strategy; var config = require('./config); 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: config.twitter.key, consumerSecret: config.twitter.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: config.facebook.id, clientSecret: config.facebook.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); }); }); }));
Ya podemos configurar el server express con los middlewares `app.js`:
Código :
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' })); // Configuración de Express app.use(passport.initialize()); app.use(passport.session()); ... // Rutas de Passport app.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' })); ...
Puedes ver el resto del archivo y los demás de la aplicación en el siguiente repositorio de GitHub: http://ift.tt/1qyDM2f
El siguiente controlador, nos renderiza la página `index.html` en la que veremos el enlace al login/registro tanto con facebook como con twitter y en cuando estemos logueados, mostraremos información del usuario:
Código :
exports.index = function(req, res){ res.render('index', { title: 'Passport-Example', user: req.user }); };
Esta sería la plantilla HTML, en la que usamos el engine Jade:
Código :
extends layout block content h1= title p Welcome to #{title} if(user) ul li img(src="#{user.photo}") li Bienvenido #{user.name} li a(href='logout') Salir else ul li a(href='auth/twitter') Login con Twitter li a(href='auth/facebook') Login con Facebook
El flujo de la aplicación sería el siguiente. Primero nos muestra los enlaces para autenticarnos con nuestra cuenta en Twitter o Facebook.
Elegimos Twitter y la apliación nos redirige a la página de Twitter del API para autenticarnos.
Y por último, cuando se finaliza la autenticación, el callback nos devuelve a la URL de inicio donde vemos nuestro nombre, el enlace al `logout` y nuestra foto de twitter.
Tenéis todo el código utilizado disponible y comentado en español en este respositorio de GitHub. Espero que os sirva en vuestros proyectos y desarrollos
via Cristalab http://ift.tt/1qyDNTJ
Recent Comments