SlideShare une entreprise Scribd logo
1  sur  17
Télécharger pour lire hors ligne
Login Social con Node.js Comunidad Mejorando.la
Login social con Node.js
Gestión de usuarios con PassportJS
Login Social con Node.js Comunidad Mejorando.la
¿Qué es PassportJS?
Middleware de autenticación para Node.js, que
facilita la autenticación y registro de
usuarios de una aplicación web.
http://passportjs.org
Login Social con Node.js Comunidad Mejorando.la
¿Qué necesitamos?
● Instalar Node.js
http://nodejs.org/download/
● Instalar MongoDB
https://www.mongodb.org/downloads
Login Social con Node.js Comunidad Mejorando.la
¡Comenzamos!
Creamos una estructura base de aplicación con el
framework Express
Instalamos las dependencias que vamos a utilizar
$ sudo npm install -g express
$ express passport-example
$ cd passport-example
$ npm install
$ npm install --save mongoose
$ npm install --save passport
$ npm install --save passport-twitter
$ npm install --save passport-facebook
Login Social con Node.js Comunidad Mejorando.la
Modelo usuario
models/user.js
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);
Login Social con Node.js Comunidad Mejorando.la
Configuración de Passport
passport.js
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);
});
. . .
Login Social con Node.js Comunidad Mejorando.la
Configuración de Passport
(Twitter)
passport.js
. . .
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);
});
});
}));
Login Social con Node.js Comunidad Mejorando.la
Configuración de Passport
(Facebook)
passport.js
. . .
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);
});
});
}));
Login Social con Node.js Comunidad Mejorando.la
Mantener las API KEYs apartadas
del código fuente
config.js passport.js
. . .
var config = {
twitter: {
key: ‘TWITTER_API_KEY’,
secret: ‘TWITTER_API_SECRET’
},
facebook: {
id: ‘FACEBOOK_APP_ID’,
secret: ‘FACEBOOK_APP_SECRET’
}
};
module.exports = config;
var config = require(‘./config’);
. . .
passport.use(new TwitterStrategy({
consumerKey: 'config.twitter.key',
consumerSecret: 'config.twitter.secret',
callbackURL: '/auth/twitter/callback'
. . .
passport.use(new FacebookStrategy({
clientID: 'config.facebook.id',
clientSecret: 'config.facebook.secret',
callbackURL: '/auth/twitter/callback'
. . .
Login Social con Node.js Comunidad Mejorando.la
Conjuntando todo
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' }));
// Configuración de Passport
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' }));
...
Login Social con Node.js Comunidad Mejorando.la
Registro de App en FB/TW
Acceder a la sección “Desarrolladores” de Facebook y Twitter para registrar
una App y adquirir un API Key y un API Secret
http://dev.twitter.com http://developers.facebook.com
Login Social con Node.js Comunidad Mejorando.la
Obtención de API Keys
(Twitter)
Login Social con Node.js Comunidad Mejorando.la
Obtención de API Keys
(Facebook)
Login Social con Node.js Comunidad Mejorando.la
Controlador de la vista principal
routes/index.js
Le indicamos que variables queremos que se visualicen en el HTML
views/index.jade
exports.index = function(req, res){
res.render('index', {
title: 'Passport-Example',
user: req.user
});
};
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
Login Social con Node.js Comunidad Mejorando.la
¡Y voilá!
Código disponible en:
http://github.com/carlosazaustre/passportjs-example
$ mongod &
$ node app.js
Login Social con Node.js Comunidad Mejorando.la
¡Gracias!
Carlos Azaustre
Desarrollador Web / JavaScript Lover / MOOC Addict / Based in Madrid,Spain
carlosazaustre.es/blog
@carlosazaustre
/carlosazaustre.web
/carlosazaustre
/+CarlosAzaustre
Login Social con Node.js Comunidad Mejorando.la
Preguntas

Contenu connexe

Tendances

Tendances (20)

AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)
AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)
AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)
 
Despegar Tech Talk - AngularJS
Despegar Tech Talk - AngularJSDespegar Tech Talk - AngularJS
Despegar Tech Talk - AngularJS
 
Por qué AngularJS
Por qué AngularJSPor qué AngularJS
Por qué AngularJS
 
Taller de Angular JS: La solución tecnológica perfecta
Taller de Angular JS: La solución tecnológica perfectaTaller de Angular JS: La solución tecnológica perfecta
Taller de Angular JS: La solución tecnológica perfecta
 
Introduccion a AngularJS
Introduccion a AngularJSIntroduccion a AngularJS
Introduccion a AngularJS
 
Introducción a Angular JS
Introducción a Angular JSIntroducción a Angular JS
Introducción a Angular JS
 
Angularjs
AngularjsAngularjs
Angularjs
 
Angular js
Angular jsAngular js
Angular js
 
Angular js
Angular jsAngular js
Angular js
 
Angular js in mobile
Angular js in mobileAngular js in mobile
Angular js in mobile
 
Angular 2 is Coming - GDG DevFest Cordoba 2015
Angular 2 is Coming - GDG DevFest Cordoba 2015Angular 2 is Coming - GDG DevFest Cordoba 2015
Angular 2 is Coming - GDG DevFest Cordoba 2015
 
Angular js Frontenders Valencia
Angular js Frontenders ValenciaAngular js Frontenders Valencia
Angular js Frontenders Valencia
 
Introducción a AngularJS
Introducción a AngularJSIntroducción a AngularJS
Introducción a AngularJS
 
Curso de Responsive Design
Curso de Responsive DesignCurso de Responsive Design
Curso de Responsive Design
 
Angular.js
Angular.jsAngular.js
Angular.js
 
Angular Conceptos Practicos 1
Angular Conceptos Practicos 1Angular Conceptos Practicos 1
Angular Conceptos Practicos 1
 
De HTML a Express
De HTML a ExpressDe HTML a Express
De HTML a Express
 
Workshop 7: Single Page Applications
Workshop 7: Single Page ApplicationsWorkshop 7: Single Page Applications
Workshop 7: Single Page Applications
 
Introducción a AngularJS
Introducción a AngularJS Introducción a AngularJS
Introducción a AngularJS
 
Presentacion diseño web con jquery
Presentacion diseño web con jqueryPresentacion diseño web con jquery
Presentacion diseño web con jquery
 

Similaire à Login social con node.js

"Los Imprescindibles de .NetCore"
"Los Imprescindibles de .NetCore""Los Imprescindibles de .NetCore"
"Los Imprescindibles de .NetCore"www.encamina.com
 
Appcircus Academy: Integración de Social Media en Android
Appcircus Academy: Integración de Social Media en AndroidAppcircus Academy: Integración de Social Media en Android
Appcircus Academy: Integración de Social Media en AndroidAlberto Ruibal
 
Codemotion 2017 - Taller de JHipster
Codemotion 2017 - Taller de JHipsterCodemotion 2017 - Taller de JHipster
Codemotion 2017 - Taller de JHipsterAdolfo Sanz De Diego
 
JSDays Desarrolla tu primera API
JSDays Desarrolla tu primera APIJSDays Desarrolla tu primera API
JSDays Desarrolla tu primera APICloudAppi
 
Taller desarrollo de apis
Taller desarrollo de apisTaller desarrollo de apis
Taller desarrollo de apisCloudAppi
 
Php Bitter Sweet Symfony!
Php Bitter Sweet Symfony!Php Bitter Sweet Symfony!
Php Bitter Sweet Symfony!Ricard Luquero
 
.NET UY Meetup 5 - MVC For Human Beings by Leonardo Botta
.NET UY Meetup 5 - MVC For Human Beings by Leonardo Botta.NET UY Meetup 5 - MVC For Human Beings by Leonardo Botta
.NET UY Meetup 5 - MVC For Human Beings by Leonardo Botta.NET UY Meetup
 
WordPress como back-end de nuestras apps
WordPress como back-end de nuestras appsWordPress como back-end de nuestras apps
WordPress como back-end de nuestras appsJaime Fernández
 
15a. Reunion de SpringHispano.org y grails.org.mx
15a. Reunion de SpringHispano.org y grails.org.mx15a. Reunion de SpringHispano.org y grails.org.mx
15a. Reunion de SpringHispano.org y grails.org.mxJose Juan R. Zuñiga
 
inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+D
inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+DinLab FIB MeteorJS workshop by uLab UPC - Telefonica I+D
inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+DinLabFIB
 
Aplicaciones_Android_JPD.pptx
Aplicaciones_Android_JPD.pptxAplicaciones_Android_JPD.pptx
Aplicaciones_Android_JPD.pptxMarianaRomo28
 
Tallerprogramacion
TallerprogramacionTallerprogramacion
Tallerprogramacionjohanadoria
 

Similaire à Login social con node.js (20)

APIREST LARAVEL Y PHP.pptx
APIREST LARAVEL Y PHP.pptxAPIREST LARAVEL Y PHP.pptx
APIREST LARAVEL Y PHP.pptx
 
"Los Imprescindibles de .NetCore"
"Los Imprescindibles de .NetCore""Los Imprescindibles de .NetCore"
"Los Imprescindibles de .NetCore"
 
Appcircus Academy: Integración de Social Media en Android
Appcircus Academy: Integración de Social Media en AndroidAppcircus Academy: Integración de Social Media en Android
Appcircus Academy: Integración de Social Media en Android
 
Presentacion YII
Presentacion YIIPresentacion YII
Presentacion YII
 
Codemotion 2017 - Taller de JHipster
Codemotion 2017 - Taller de JHipsterCodemotion 2017 - Taller de JHipster
Codemotion 2017 - Taller de JHipster
 
JSDays Desarrolla tu primera API
JSDays Desarrolla tu primera APIJSDays Desarrolla tu primera API
JSDays Desarrolla tu primera API
 
Taller desarrollo de apis
Taller desarrollo de apisTaller desarrollo de apis
Taller desarrollo de apis
 
Php Bitter Sweet Symfony!
Php Bitter Sweet Symfony!Php Bitter Sweet Symfony!
Php Bitter Sweet Symfony!
 
Aplicación abc. asp net mvc 3
Aplicación abc. asp net mvc 3Aplicación abc. asp net mvc 3
Aplicación abc. asp net mvc 3
 
.NET UY Meetup 5 - MVC For Human Beings by Leonardo Botta
.NET UY Meetup 5 - MVC For Human Beings by Leonardo Botta.NET UY Meetup 5 - MVC For Human Beings by Leonardo Botta
.NET UY Meetup 5 - MVC For Human Beings by Leonardo Botta
 
10.desarrollowebconjava
10.desarrollowebconjava10.desarrollowebconjava
10.desarrollowebconjava
 
WordPress como back-end de nuestras apps
WordPress como back-end de nuestras appsWordPress como back-end de nuestras apps
WordPress como back-end de nuestras apps
 
Ebook tutorialspringbootheroku
Ebook tutorialspringbootherokuEbook tutorialspringbootheroku
Ebook tutorialspringbootheroku
 
Servicios web
Servicios webServicios web
Servicios web
 
Cv dennys-jose-marquez-reyes-desarrollador-web
Cv dennys-jose-marquez-reyes-desarrollador-webCv dennys-jose-marquez-reyes-desarrollador-web
Cv dennys-jose-marquez-reyes-desarrollador-web
 
15a. Reunion de SpringHispano.org y grails.org.mx
15a. Reunion de SpringHispano.org y grails.org.mx15a. Reunion de SpringHispano.org y grails.org.mx
15a. Reunion de SpringHispano.org y grails.org.mx
 
Introducción a AngularJS
Introducción a AngularJSIntroducción a AngularJS
Introducción a AngularJS
 
inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+D
inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+DinLab FIB MeteorJS workshop by uLab UPC - Telefonica I+D
inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+D
 
Aplicaciones_Android_JPD.pptx
Aplicaciones_Android_JPD.pptxAplicaciones_Android_JPD.pptx
Aplicaciones_Android_JPD.pptx
 
Tallerprogramacion
TallerprogramacionTallerprogramacion
Tallerprogramacion
 

Plus de Carlos Azaustre

Introducción al JAMStack - JS Ourense
Introducción al JAMStack - JS OurenseIntroducción al JAMStack - JS Ourense
Introducción al JAMStack - JS OurenseCarlos Azaustre
 
Serverless with Firebase - Launchpad Build Burgos
Serverless with Firebase - Launchpad Build Burgos Serverless with Firebase - Launchpad Build Burgos
Serverless with Firebase - Launchpad Build Burgos Carlos Azaustre
 
Your First Assistant App with DialogFlow + Firebase
Your First Assistant App with DialogFlow + FirebaseYour First Assistant App with DialogFlow + Firebase
Your First Assistant App with DialogFlow + FirebaseCarlos Azaustre
 
PixelsCamp 2017 - Cloud Functions for Firebase and Machine Learning APIs
PixelsCamp 2017 - Cloud Functions for Firebase and Machine Learning APIsPixelsCamp 2017 - Cloud Functions for Firebase and Machine Learning APIs
PixelsCamp 2017 - Cloud Functions for Firebase and Machine Learning APIsCarlos Azaustre
 
Prototipado de Aplicaciones web con Firebase #CampusGivers
Prototipado de Aplicaciones web con Firebase #CampusGiversPrototipado de Aplicaciones web con Firebase #CampusGivers
Prototipado de Aplicaciones web con Firebase #CampusGiversCarlos Azaustre
 
Workshop React + Firebase | T3chFest 2017
Workshop React + Firebase | T3chFest 2017Workshop React + Firebase | T3chFest 2017
Workshop React + Firebase | T3chFest 2017Carlos Azaustre
 
Hack2Progress - Consejos para afrontar un Hackathon
Hack2Progress - Consejos para afrontar un HackathonHack2Progress - Consejos para afrontar un Hackathon
Hack2Progress - Consejos para afrontar un HackathonCarlos Azaustre
 
Taller de Seo y Facebook Ads
Taller de Seo y Facebook AdsTaller de Seo y Facebook Ads
Taller de Seo y Facebook AdsCarlos Azaustre
 
Game of Frameworks - GDG Cáceres #CodeCC
Game of Frameworks - GDG Cáceres #CodeCCGame of Frameworks - GDG Cáceres #CodeCC
Game of Frameworks - GDG Cáceres #CodeCCCarlos Azaustre
 
#PlatziConf - El camino para ser un Pro en JavaScript
#PlatziConf - El camino para ser un Pro en JavaScript#PlatziConf - El camino para ser un Pro en JavaScript
#PlatziConf - El camino para ser un Pro en JavaScriptCarlos Azaustre
 
Chefly: Pitch for Tetuan Valley Startup School
Chefly: Pitch for Tetuan Valley Startup SchoolChefly: Pitch for Tetuan Valley Startup School
Chefly: Pitch for Tetuan Valley Startup SchoolCarlos Azaustre
 
Nuestra experiencia emprendedora
Nuestra experiencia emprendedoraNuestra experiencia emprendedora
Nuestra experiencia emprendedoraCarlos Azaustre
 

Plus de Carlos Azaustre (13)

Introducción al JAMStack - JS Ourense
Introducción al JAMStack - JS OurenseIntroducción al JAMStack - JS Ourense
Introducción al JAMStack - JS Ourense
 
Serverless with Firebase - Launchpad Build Burgos
Serverless with Firebase - Launchpad Build Burgos Serverless with Firebase - Launchpad Build Burgos
Serverless with Firebase - Launchpad Build Burgos
 
Your First Assistant App with DialogFlow + Firebase
Your First Assistant App with DialogFlow + FirebaseYour First Assistant App with DialogFlow + Firebase
Your First Assistant App with DialogFlow + Firebase
 
PixelsCamp 2017 - Cloud Functions for Firebase and Machine Learning APIs
PixelsCamp 2017 - Cloud Functions for Firebase and Machine Learning APIsPixelsCamp 2017 - Cloud Functions for Firebase and Machine Learning APIs
PixelsCamp 2017 - Cloud Functions for Firebase and Machine Learning APIs
 
Prototipado de Aplicaciones web con Firebase #CampusGivers
Prototipado de Aplicaciones web con Firebase #CampusGiversPrototipado de Aplicaciones web con Firebase #CampusGivers
Prototipado de Aplicaciones web con Firebase #CampusGivers
 
Workshop React + Firebase | T3chFest 2017
Workshop React + Firebase | T3chFest 2017Workshop React + Firebase | T3chFest 2017
Workshop React + Firebase | T3chFest 2017
 
Hack2Progress - Consejos para afrontar un Hackathon
Hack2Progress - Consejos para afrontar un HackathonHack2Progress - Consejos para afrontar un Hackathon
Hack2Progress - Consejos para afrontar un Hackathon
 
Taller de Seo y Facebook Ads
Taller de Seo y Facebook AdsTaller de Seo y Facebook Ads
Taller de Seo y Facebook Ads
 
Game of Frameworks - GDG Cáceres #CodeCC
Game of Frameworks - GDG Cáceres #CodeCCGame of Frameworks - GDG Cáceres #CodeCC
Game of Frameworks - GDG Cáceres #CodeCC
 
Chefly Keynote at ETSII
Chefly Keynote at ETSIIChefly Keynote at ETSII
Chefly Keynote at ETSII
 
#PlatziConf - El camino para ser un Pro en JavaScript
#PlatziConf - El camino para ser un Pro en JavaScript#PlatziConf - El camino para ser un Pro en JavaScript
#PlatziConf - El camino para ser un Pro en JavaScript
 
Chefly: Pitch for Tetuan Valley Startup School
Chefly: Pitch for Tetuan Valley Startup SchoolChefly: Pitch for Tetuan Valley Startup School
Chefly: Pitch for Tetuan Valley Startup School
 
Nuestra experiencia emprendedora
Nuestra experiencia emprendedoraNuestra experiencia emprendedora
Nuestra experiencia emprendedora
 

Dernier

Los Microcontroladores PIC, Aplicaciones
Los Microcontroladores PIC, AplicacionesLos Microcontroladores PIC, Aplicaciones
Los Microcontroladores PIC, AplicacionesEdomar AR
 
Tecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptxTecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptxGESTECPERUSAC
 
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptLUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptchaverriemily794
 
tarea de exposicion de senati zzzzzzzzzz
tarea de exposicion de senati zzzzzzzzzztarea de exposicion de senati zzzzzzzzzz
tarea de exposicion de senati zzzzzzzzzzAlexandergo5
 
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxEl_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxAlexander López
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA241531640
 
Excel (1) tecnologia.pdf trabajo Excel taller
Excel  (1) tecnologia.pdf trabajo Excel tallerExcel  (1) tecnologia.pdf trabajo Excel taller
Excel (1) tecnologia.pdf trabajo Excel tallerValentinaTabares11
 
Mapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMidwarHenryLOZAFLORE
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfjeondanny1997
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxAlexander López
 
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPOAREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPOnarvaezisabella21
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx241522327
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadMiguelAngelVillanuev48
 
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptTEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptJavierHerrera662252
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx241523733
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxazmysanros90
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxNombre Apellidos
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfedepmariaperez
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxaylincamaho
 
Presentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia ArtificialPresentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia Artificialcynserafini89
 

Dernier (20)

Los Microcontroladores PIC, Aplicaciones
Los Microcontroladores PIC, AplicacionesLos Microcontroladores PIC, Aplicaciones
Los Microcontroladores PIC, Aplicaciones
 
Tecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptxTecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptx
 
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptLUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
 
tarea de exposicion de senati zzzzzzzzzz
tarea de exposicion de senati zzzzzzzzzztarea de exposicion de senati zzzzzzzzzz
tarea de exposicion de senati zzzzzzzzzz
 
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxEl_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
 
Excel (1) tecnologia.pdf trabajo Excel taller
Excel  (1) tecnologia.pdf trabajo Excel tallerExcel  (1) tecnologia.pdf trabajo Excel taller
Excel (1) tecnologia.pdf trabajo Excel taller
 
Mapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptx
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
 
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPOAREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidad
 
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptTEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptx
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdf
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
 
Presentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia ArtificialPresentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia Artificial
 

Login social con node.js

  • 1. Login Social con Node.js Comunidad Mejorando.la Login social con Node.js Gestión de usuarios con PassportJS
  • 2. Login Social con Node.js Comunidad Mejorando.la ¿Qué es PassportJS? Middleware de autenticación para Node.js, que facilita la autenticación y registro de usuarios de una aplicación web. http://passportjs.org
  • 3. Login Social con Node.js Comunidad Mejorando.la ¿Qué necesitamos? ● Instalar Node.js http://nodejs.org/download/ ● Instalar MongoDB https://www.mongodb.org/downloads
  • 4. Login Social con Node.js Comunidad Mejorando.la ¡Comenzamos! Creamos una estructura base de aplicación con el framework Express Instalamos las dependencias que vamos a utilizar $ sudo npm install -g express $ express passport-example $ cd passport-example $ npm install $ npm install --save mongoose $ npm install --save passport $ npm install --save passport-twitter $ npm install --save passport-facebook
  • 5. Login Social con Node.js Comunidad Mejorando.la Modelo usuario models/user.js 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);
  • 6. Login Social con Node.js Comunidad Mejorando.la Configuración de Passport passport.js 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); }); . . .
  • 7. Login Social con Node.js Comunidad Mejorando.la Configuración de Passport (Twitter) passport.js . . . 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); }); }); }));
  • 8. Login Social con Node.js Comunidad Mejorando.la Configuración de Passport (Facebook) passport.js . . . 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); }); }); }));
  • 9. Login Social con Node.js Comunidad Mejorando.la Mantener las API KEYs apartadas del código fuente config.js passport.js . . . var config = { twitter: { key: ‘TWITTER_API_KEY’, secret: ‘TWITTER_API_SECRET’ }, facebook: { id: ‘FACEBOOK_APP_ID’, secret: ‘FACEBOOK_APP_SECRET’ } }; module.exports = config; var config = require(‘./config’); . . . passport.use(new TwitterStrategy({ consumerKey: 'config.twitter.key', consumerSecret: 'config.twitter.secret', callbackURL: '/auth/twitter/callback' . . . passport.use(new FacebookStrategy({ clientID: 'config.facebook.id', clientSecret: 'config.facebook.secret', callbackURL: '/auth/twitter/callback' . . .
  • 10. Login Social con Node.js Comunidad Mejorando.la Conjuntando todo 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' })); // Configuración de Passport 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' })); ...
  • 11. Login Social con Node.js Comunidad Mejorando.la Registro de App en FB/TW Acceder a la sección “Desarrolladores” de Facebook y Twitter para registrar una App y adquirir un API Key y un API Secret http://dev.twitter.com http://developers.facebook.com
  • 12. Login Social con Node.js Comunidad Mejorando.la Obtención de API Keys (Twitter)
  • 13. Login Social con Node.js Comunidad Mejorando.la Obtención de API Keys (Facebook)
  • 14. Login Social con Node.js Comunidad Mejorando.la Controlador de la vista principal routes/index.js Le indicamos que variables queremos que se visualicen en el HTML views/index.jade exports.index = function(req, res){ res.render('index', { title: 'Passport-Example', user: req.user }); }; 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
  • 15. Login Social con Node.js Comunidad Mejorando.la ¡Y voilá! Código disponible en: http://github.com/carlosazaustre/passportjs-example $ mongod & $ node app.js
  • 16. Login Social con Node.js Comunidad Mejorando.la ¡Gracias! Carlos Azaustre Desarrollador Web / JavaScript Lover / MOOC Addict / Based in Madrid,Spain carlosazaustre.es/blog @carlosazaustre /carlosazaustre.web /carlosazaustre /+CarlosAzaustre
  • 17. Login Social con Node.js Comunidad Mejorando.la Preguntas