SlideShare ist ein Scribd-Unternehmen logo
1 von 17
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Mehr von 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
 

Mehr von 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
 

Kürzlich hochgeladen

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
 
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del PerúRed Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del PerúCEFERINO DELGADO FLORES
 
CommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersCommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersIván López Martín
 
tarea de exposicion de senati zzzzzzzzzz
tarea de exposicion de senati zzzzzzzzzztarea de exposicion de senati zzzzzzzzzz
tarea de exposicion de senati zzzzzzzzzzAlexandergo5
 
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
 
Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1ivanapaterninar
 
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
 
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
 
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
 
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docxTALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docxobandopaula444
 
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
 
Los Microcontroladores PIC, Aplicaciones
Los Microcontroladores PIC, AplicacionesLos Microcontroladores PIC, Aplicaciones
Los Microcontroladores PIC, AplicacionesEdomar AR
 
Documentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosDocumentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosAlbanyMartinez7
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx241523733
 
certificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfcertificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfFernandoOblitasVivan
 
Presentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia ArtificialPresentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia Artificialcynserafini89
 
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxModelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxtjcesar1
 
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptLUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptchaverriemily794
 
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
 
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
 

Kürzlich hochgeladen (20)

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
 
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del PerúRed Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
 
CommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersCommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 Testcontainers
 
tarea de exposicion de senati zzzzzzzzzz
tarea de exposicion de senati zzzzzzzzzztarea de exposicion de senati zzzzzzzzzz
tarea de exposicion de senati zzzzzzzzzz
 
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
 
Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1
 
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
 
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
 
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
 
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docxTALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
 
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
 
Los Microcontroladores PIC, Aplicaciones
Los Microcontroladores PIC, AplicacionesLos Microcontroladores PIC, Aplicaciones
Los Microcontroladores PIC, Aplicaciones
 
Documentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosDocumentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos Juridicos
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx
 
certificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfcertificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdf
 
Presentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia ArtificialPresentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia Artificial
 
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxModelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
 
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptLUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
 
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
 
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
 

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