Autenticación con Facebook

Clase 35 de 39 • Curso de Autenticación con Passport.js 2019

Contenido del curso

Aprender sobre autenticación y autorización

Conocer qué son los JSON Web Tokens

Entender cómo funcionan las cookies

Implementar autenticación en Express usando Passport.js

Entender qué es OAuth 2.0 y OpenID Connect

28
¿Qué es OAuth 2.0 y OpenID Connect?
04:25 min

Implementar autenticación con redes sociales

Asegurar tu aplicación de Express

Tomar examen

A continuación veremos cómo podemos implementar la autenticación haciendo uso de la estrategia para Facebook. Es importante primero tener una cuenta de Facebook para desarrolladores: https://developers.facebook.com/ y crear una app/project como lo hemos hecho anteriormente para Google y Twitter. Podemos seguir las instrucciones aquí: https://developers.facebook.com/docs/apps, para obtener nuestros FACEBOOK_CLIENT_ID y FACEBOOK_CLIENT_SECRET respectivamente.

Lo primero es instalar nuestras dependencias

npm install passport-facebook

Luego creamos una nueva estrategia llamada facebook dentro de utils/auth/strategies/facebook.js:

const passport = require('passport');
const { Strategy: FacebookStrategy } = require('passport-facebook');

const { config } = require("../../../config/index");

passport.use(new FacebookStrategy({
    clientID: config.facebookClientId,
    clientSecret: config.facebookClientSecret,
    callbackURL: "/auth/facebook/callback"
  },
  function(accessToken, refreshToken, profile, done) {
      const { data, status } = await axios({
        url: `${config.apiUrl}/api/auth/sign-provider`,
        method: "post",
        data: {
            name: profile.name,
            email: profile.email,
            password: profile.id,
            apiKeyToken: config.apiKeyToken
        }
      });

      if (!data || status !== 200) {
        return cb(boom.unauthorized(), false);
      }

      return cb(null, data);
  }
));

Teniendo nuestra estrategia de Facebook ya podemos agregar las dos nuevas rutas de autenticación.

app.get("/auth/facebook", passport.authenticate("facebook"), {
  scope: ["email", "profile", "openid"]
});

app.get(
  "/auth/facebook/callback",
  passport.authenticate("facebook", { session: false }),
  function(req, res, next) {
    if (!req.user) {
      next(boom.unauthorized());
    }

    const { token, ...user } = req.user;

    res.cookie("token", token, {
      httpOnly: !config.dev,
      secure: !config.dev
    });

    res.status(200).json(user);
  }
);

Con esto tenemos nuestra implementación de autenticación con Facebook.

Comentarios

Manuel Ojeda

student•

Primero que nada les comparto el código que utilicé para poder realizar este ejercicio.

Primeramente en facebook.js ocupamos hacer el llamado de la información a través de una función asíncrona, por lo que se omitió agregar la palabra async. Segungo; realicé una asignación del email muy similar a Twitter, pues Facebook no me retornaba el correo del usuario, por lo que el código de FacebookStrategy me quedó de la siguiente forma:

passport.use(
  new FacebookStrategy(
    {
      clientID: config.facebookClientId,
      clientSecret: config.facebookClientSecret,
      callbackURL: "/auth/facebook/callback",
      profilerFields: ["id", "email", "displayName"]
    },
    async function(accessToken, refreshToken, profile, done) {
	// Esta declaración de email es necesaria, pues Facebook no me retornaba el correo del usuario
      const email = profile.email
        ? profile.email
        : `${profile.id}@facebook.com`;

      const { data, status } = await axios({
        url: `${config.apiUrl}/api/auth/sign-provider`,
        method: "post",
        data: {
          name: profile.displayName,
          email: email,
          password: profile.id,
          apiKeyToken: config.apiKeyToken
        }
      });

      if (!data || status !== 200) {
        return done(boom.unauthorized(), false);
      }

      return done(null, data);
    }
  )
);

Y en las rutas retire el campo scopes de /auth/facebook pues Facebook no reconoce el scope Profile:

Pasó de esto:

app.get("/auth/facebook", passport.authenticate("facebook"), {
  scope: ["email", "profile", "openid"]
});

app.get("/auth/facebook", passport.authenticate("facebook"));

Espero les sea de utilidad este código que realicé para lograr el Login de Facebook.

Victor Martin Ortiz Palacio

student•

Me fue de mucha ayuda tu explicacion. Yo lo modifique de la siguiente manera:

app.get('/auth/facebook', passport.authenticate('facebook', {
  scope: ['email']
}));

passport.use(
  new FacebookStrategy(
    {
      clientID: config.facebookClientId,
      clientSecret: config.facebookClientSecret,
      callbackURL: '/auth/facebook/callback',
      profileFields: ['id', 'displayName', 'photos', 'email']
    },
    async function(accessToken, refreshToken, profile, cb) {
      const { data, status } = await axios({
        url: `${config.apiUrl}/api/auth/sign-provider`,
        method: 'post',
        data: {
          name: profile.displayName,
          email: profile.emails[0].value,
          password: profile.id,
          apiKeyToken: config.apiKeyToken
        }
      });
      if (!data || status !== 200) {
        return cb(boom.unauthorized(), false);
      }

      return cb(null, data);
    }
  )
);

las modificaciones son minimas, pero me sirvio para entender un poco mas como funciona.

rusbel bermúdez rivera

student•

No entendí de donde salio usar profilerFields, lo intente con los profileFields de la documentacion de passport-facebook pero funcionó con el codigo de Manuel

Marco Luna

student•

Hola a todos, haciendo mención a la aportación que hizo Victor Martin Ortiz Palacio, en la configuración de la ruta del Callback del login de Facebook no es necesario poner todos los scopes, pues estos no son tomados en cuenta, en cambio, solo dejo el que corresponde al email:

app.get( '/auth/facebook', passport.authenticate('facebook', {
    scope: ['email'],
  })
);

Así mismo, en la estrategia para solamente manejar los datos correctos utilicé el objeto _json que está en el profile.

passport.use(
  new FacebookStrategy(
    {
      clientID: config.facebookClientId,
      clientSecret: config.facebookClientSecret,
      callbackURL: '/auth/facebook/callback',
      profileFields: ['id', 'displayName', 'photos', 'email'],
    },
    async function (accessToken, refreshToken, { _json: profile }, cb) {
      //console.log(profile);

      const { data, status } = await axios({
        url: `${config.apiUrl}/api/auth/sign-provider`,
        method: 'post',
        data: {
          name: profile.name,
          email: profile.email,
          password: profile.id,
          apiKeyToken: config.apiKeyToken,
        },
      });

      if (!data || status !== 200) {
        return cb(boom.unauthorized(), false);
      }

      return cb(null, data);
    }
  )
);

Un consejo para los que se atoren al momento de crear la app de Facebook (porque a mi me pasó):

Como tal el nombre de Callback URL no se llama así, se especifica en el Website en el campo de Site URL.
Si se usa solo en modo desarrollo no es necesario incluir la url de nuestra api en el Server IP Whitelist ni Update Settings IP Whitelist. Especificar en la salida a producción.

Jose Daniel Molina

student•

Este es el resultado :D Strategy

/*
  Implementando autenticacion con Facebook
*/
const passport = require('passport');
const { Strategy: FacebookStrategy } = require('passport-facebook');
const boom = require('@hapi/boom');
const axios = require('axios');
const { config } = require('../../../config');

passport.use(new FacebookStrategy({
  clientID: config.facebookClientId,
  clientSecret: config.facebookClientSecret,
  callbackURL: '/auth/facebook/callback',
  profileFields: ['id', 'displayName', 'email']
},
async (accessToken, refreshToken, profile, cb) => {
  console.log(profile);
  const { data, status } = await axios({
    url: `${config.apiUrl}/api/auth/sign-provider`,
    method: 'post',
    data: {
      name: profile.displayName,
      email: profile.emails[0].value,
      password: profile.id,
      apiKeyToken: config.apiKeyToken
    }
  });

  if(!data || status !== 200){
    return cb(boom.unauthorized(), false);
  }

  return cb(null, data);
}
));

Routes

app.get('/auth/facebook', passport.authenticate('facebook'));

app.get('/auth/facebook/callback', passport.authenticate('facebook', { session: false }), (req, res, next) => {
  if(!req.user){
    next(boom.unauthorized());
  }

  const { token, ...user } = req.user;

  res.cookie('token', token, {
    httpOnly: !config.dev,
    secure: !config.dev
  });

  res.status(200).json(user);
});

José Armando Gutiérrez Araujo

student•

Me sale ese error, alguien sabe que podrá ser?

Fernando Cordero

student•

Colocando la ruta con los scopes, facebook me devuelve un error. (Sorry, something went wrong...), pero al momento de quitarle el scope de la ruta me devuelve los datos del usuario en json, pero al revisar application en el navegador no me regresa un token valido. Con twitter me arroja que la url del callback no esta aprobada. Ya la he verificado y reescrito muchas veces. Y obtengo el mismo error. Con linkedin me esta pasando lo mismo: The redirect_uri does not match the registered value

Jose Anibal Garcia Giraldo

student•

Podrías compartir tu repo con el código para ayudarte mejor? :D y si ya lo solucionaste compartenos la solución así no nos pasa a alguno de nosotros jejeje

rusbel bermúdez rivera

student•

Aquí mi solución gracias a los aportes de los demás, incluí un console.log, para que los novatos como yo, puedan saber de donde salen las variables de data, y por que use _json: profile como argumento en la función. Lean la documentación de passport-facebook es de gran ayuda

const passport = require('passport');
const { Strategy: FacebookStrategy } = require('passport-facebook');
const axios = require('axios');
const boom = require('@hapi/boom');


const { config } = require(&quot;../../../config/index&quot;);

passport.use(
    new FacebookStrategy({
        clientID: config.facebookClientId,
        clientSecret: config.facebookClientSecret,
        callbackURL: &quot;/auth/facebook/callback&quot;,
        profileFields: ['id', 'displayName', 'photos', 'email']
    },
        async function (accessToken, refreshToken, { _json: profile }, done) {
            try {
		
                // te permite ver el objeto profile, y su composición.
                console.log(profile)
                    
                const { data, status } = await axios({
                    url: `${config.apiUrl}/api/auth/sign-provider`,
                    method: &quot;post&quot;,
                    data: {
                        name: profile.name,
                        email: profile.email,
                        password: profile.id,
                        apiKeyToken: config.apiKeyToken
                    }
                });

                if (!data || status !== 200) {
                    return cb(boom.unauthorized(), false);
                }

                return done(null, data);
            } catch (error) {
                done(error)
            }
        }
    ));```

Tomas Goldenberg

student•

hola rusbel una consulta porque utilizas el json asi?: _json

Diego Andres Valderruten Vargas

student•

Creando la App en facebook, me encuentro con la dificulta que facebook no me acepta el localhost como dirección de respuesta a la petición, alguien sabe que sebo hacer?

Cesar Arion Espinosa Méndez

student•

FacebookAuthorizationError: Inicio de sesión no seguro bloqueado: No puedes obtener un identificador de acceso ni entrar en esta aplicación desde una página no segura. Intenta volver a cargar la página como https://

Camilo Morales Sanchez

student•

Buenas compañeros, me hechan una mano, me sale este error no he podido saber cual es cada una de la claves o donde esta porque veo solo un id y token cliente y no mas y ya las puse en ambos lados y ninguna da

<FacebookTokenError: Error validating client secret. at Strategy.parseErrorResponse (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Autenticación con Passport.js - Platzi\passport authorization\ssr-server\node_modules\passport-facebook\lib\strategy.js:198:12) at Strategy.OAuth2Strategy._createOAuthError (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Autenticación con Passport.js - Platzi\passport authorization\ssr-server\node_modules\passport-oauth2\lib\strategy.js:405:16) at E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Autenticación con Passport.js - Platzi\passport authorization\ssr-server\node_modules\passport-oauth2\lib\strategy.js:175:45
at E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Autenticación con Passport.js - Platzi\passport authorization\ssr-server\node_modules\oauth\lib\oauth2.js:191:18 at passBackControl (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Autenticación con Passport.js - Platzi\passport authorization\ssr-server\node_modules\oauth\lib\oauth2.js:132:9) at IncomingMessage.<anonymous> (E:\Alejandro Morales Sánchez\Documentos Universidad\Curso de Autenticación con Passport.js - Platzi\passport authorization\ssr-server\node_modules\oauth\lib\oauth2.js:157:7) at IncomingMessage.emit (events.js:327:22) at endReadableNT (_stream_readable.js:1221:12) at processTicksAndRejections (internal/process/task_queues.js:84:21)>

Jose Anibal Garcia Giraldo

student•

Podrías compartir tu código para revisarlo?, intenta implementandolo como lo hizo el compañero en el comentario de arriba

Jose Anibal Garcia Giraldo

student•

También podrías validar si la app en Facebook Developers está en modo desarrollo

Carlos Enrique Ramírez Flores

student•

Hoy 14 de junio 2020 facebook me da este error, en la siguiente url: https://www.facebook.com/v3.2/dialog/oauth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A8000%2Fauth%2Ffacebook%2Fcallback&scope=email%2Cprofile%2Copenid&client_id=584107022534613

** Sorry, something went wrong. We're working on getting this fixed as soon as we can.

Go Back

Osvaldo Trejo

student•

Creo que el ID client es incorrecto, el ID client esta en el menu de opciones avanzadas

Bruno Amadori

student•

Me pasa lo mismo...

No, no es el ID de opciones avanzadas... el Token decis ? Lo probé y no funciona directamente. Te dice que no es un ID de APP válido.

Oney Ortiz Roman

student•

me da "FacebookTokenError: Error validating client secret."

Oney Ortiz Roman

student•

Oney Ortiz Roman

student•

https://ibb.co/2cDkTSs

Tomas Goldenberg

student•

el primer codigo donde hacemos la strategy va en la carpeta de ssr y la de las rutas en api-movies o no?

Carlos López

student•

Hola, todo esto va en ssr, en las estrategias y en el index donde tienes rutas. Tu conexión con api-movies es el /api/auth/sign-provider, espero entender tu pregunta correctamente.

Marlon Véliz

student•

Hola compañeros, tengo una duda con la implementación con Fb

La autenticación funciona y obtengo el usuario y el token con los scopes que asignamos a lo largo del curso, pero no se si esa es la respuesta en consola que debo recibir o tengo un error pero de igual forma funciona la autenticación?

Sandra Carolina Peña Ortiz

student•

super! :O

Wilmar Yoan Malaver Malaver

student•

Genial. :o

ANTHONY JEAMPIER RANGEL RODRIGUEZ

student•

Excelente!

Karen Paola Diaz Duarte

student•

Genial!!

Maria Elizabeth Minero Alvarenga

student•

Super genial!

const passport = require('passport');
const { Strategy: FacebookStrategy } = require('passport-facebook');

const { config } = require("../../../config/index");

passport.use(new FacebookStrategy({
    clientID: config.facebookClientId,
    clientSecret: config.facebookClientSecret,
    callbackURL: "/auth/facebook/callback"
  },
  function(accessToken, refreshToken, profile, done) {
      const { data, status } = await axios({
        url: `${config.apiUrl}/api/auth/sign-provider`,
        method: "post",
        data: {
            name: profile.name,
            email: profile.email,
            password: profile.id,
            apiKeyToken: config.apiKeyToken
        }
      });

      if (!data || status !== 200) {
        return cb(boom.unauthorized(), false);
      }

      return cb(null, data);
  }
));

app.get("/auth/facebook", passport.authenticate("facebook"), {
  scope: ["email", "profile", "openid"]
});

app.get(
  "/auth/facebook/callback",
  passport.authenticate("facebook", { session: false }),
  function(req, res, next) {
    if (!req.user) {
      next(boom.unauthorized());
    }

    const { token, ...user } = req.user;

    res.cookie("token", token, {
      httpOnly: !config.dev,
      secure: !config.dev
    });

    res.status(200).json(user);
  }
);

passport.use(
  new FacebookStrategy(
    {
      clientID: config.facebookClientId,
      clientSecret: config.facebookClientSecret,
      callbackURL: "/auth/facebook/callback",
      profilerFields: ["id", "email", "displayName"]
    },
    async function(accessToken, refreshToken, profile, done) {
	// Esta declaración de email es necesaria, pues Facebook no me retornaba el correo del usuario
      const email = profile.email
        ? profile.email
        : `${profile.id}@facebook.com`;

      const { data, status } = await axios({
        url: `${config.apiUrl}/api/auth/sign-provider`,
        method: "post",
        data: {
          name: profile.displayName,
          email: email,
          password: profile.id,
          apiKeyToken: config.apiKeyToken
        }
      });

      if (!data || status !== 200) {
        return done(boom.unauthorized(), false);
      }

      return done(null, data);
    }
  )
);

passport.use(
  new FacebookStrategy(
    {
      clientID: config.facebookClientId,
      clientSecret: config.facebookClientSecret,
      callbackURL: '/auth/facebook/callback',
      profileFields: ['id', 'displayName', 'photos', 'email']
    },
    async function(accessToken, refreshToken, profile, cb) {
      const { data, status } = await axios({
        url: `${config.apiUrl}/api/auth/sign-provider`,
        method: 'post',
        data: {
          name: profile.displayName,
          email: profile.emails[0].value,
          password: profile.id,
          apiKeyToken: config.apiKeyToken
        }
      });
      if (!data || status !== 200) {
        return cb(boom.unauthorized(), false);
      }

      return cb(null, data);
    }
  )
);

passport.use(
  new FacebookStrategy(
    {
      clientID: config.facebookClientId,
      clientSecret: config.facebookClientSecret,
      callbackURL: '/auth/facebook/callback',
      profileFields: ['id', 'displayName', 'photos', 'email'],
    },
    async function (accessToken, refreshToken, { _json: profile }, cb) {
      //console.log(profile);

      const { data, status } = await axios({
        url: `${config.apiUrl}/api/auth/sign-provider`,
        method: 'post',
        data: {
          name: profile.name,
          email: profile.email,
          password: profile.id,
          apiKeyToken: config.apiKeyToken,
        },
      });

      if (!data || status !== 200) {
        return cb(boom.unauthorized(), false);
      }

      return cb(null, data);
    }
  )
);

/*
  Implementando autenticacion con Facebook
*/
const passport = require('passport');
const { Strategy: FacebookStrategy } = require('passport-facebook');
const boom = require('@hapi/boom');
const axios = require('axios');
const { config } = require('../../../config');

passport.use(new FacebookStrategy({
  clientID: config.facebookClientId,
  clientSecret: config.facebookClientSecret,
  callbackURL: '/auth/facebook/callback',
  profileFields: ['id', 'displayName', 'email']
},
async (accessToken, refreshToken, profile, cb) => {
  console.log(profile);
  const { data, status } = await axios({
    url: `${config.apiUrl}/api/auth/sign-provider`,
    method: 'post',
    data: {
      name: profile.displayName,
      email: profile.emails[0].value,
      password: profile.id,
      apiKeyToken: config.apiKeyToken
    }
  });

  if(!data || status !== 200){
    return cb(boom.unauthorized(), false);
  }

  return cb(null, data);
}
));

app.get('/auth/facebook', passport.authenticate('facebook'));

app.get('/auth/facebook/callback', passport.authenticate('facebook', { session: false }), (req, res, next) => {
  if(!req.user){
    next(boom.unauthorized());
  }

  const { token, ...user } = req.user;

  res.cookie('token', token, {
    httpOnly: !config.dev,
    secure: !config.dev
  });

  res.status(200).json(user);
});

const passport = require('passport');
const { Strategy: FacebookStrategy } = require('passport-facebook');
const axios = require('axios');
const boom = require('@hapi/boom');


const { config } = require(&quot;../../../config/index&quot;);

passport.use(
    new FacebookStrategy({
        clientID: config.facebookClientId,
        clientSecret: config.facebookClientSecret,
        callbackURL: &quot;/auth/facebook/callback&quot;,
        profileFields: ['id', 'displayName', 'photos', 'email']
    },
        async function (accessToken, refreshToken, { _json: profile }, done) {
            try {
		
                // te permite ver el objeto profile, y su composición.
                console.log(profile)
                    
                const { data, status } = await axios({
                    url: `${config.apiUrl}/api/auth/sign-provider`,
                    method: &quot;post&quot;,
                    data: {
                        name: profile.name,
                        email: profile.email,
                        password: profile.id,
                        apiKeyToken: config.apiKeyToken
                    }
                });

                if (!data || status !== 200) {
                    return cb(boom.unauthorized(), false);
                }

                return done(null, data);
            } catch (error) {
                done(error)
            }
        }
    ));```

Autenticación con Facebook

Aprender sobre autenticación y autorización

Lo que aprenderás sobre Passport.js

Stack de seguridad moderno

¿Qué es la autenticación y la autorización ?

Introducción a las sesiones

Conocer qué son los JSON Web Tokens

Anatomía de un JWT

Autenticación tradicional vs JWT

Firmando y Verificando nuestro JWT

Server-side vs Client-side sessions

Buenas prácticas con JWT

Entender cómo funcionan las cookies

¿Qué son las cookies y cómo implementar el manejo de sesión?

Cookies vs Session Storage vs Local Storage

Implementar autenticación en Express usando Passport.js

Arquitectura del proyecto Platzi Video

Agregando la colección de usuarios

Agregando la colección de películas de usuario

Implementando el POST y DELETE de las películas de usuario

Cómo conectarnos a la base de datos

Configuración de Passport.js

Implementación de BasicStrategy con Passport.js

Implementación de Strategy y ExtractJwt con Passport.js

Implementación de nuestro Sign-in

Implementación de nuestro Sign-up

Protegiendo nuestras rutas con Passport.js

Middleware para el manejo de scopes

Configuración del server render

Comunicación máquina a máquina

Implementando recordar sesión

Implementación de las rutas de las películas de usuario

Entender qué es OAuth 2.0 y OpenID Connect

¿Qué es OAuth 2.0 y OpenID Connect?

Implementar autenticación con redes sociales

Cómo crear un proyecto en Google API para hacer autenticación con 0Auth 2.0

Implementando 0Auth2.0 con Google

Implementando Sign Provider en nuestra API

Autenticación con Google usando OpenID Connect

Cómo crear una cuenta de desarrollador con Twitter

Autenticación con Twitter

Autenticación con Facebook

Asegurar tu aplicación de Express

Seguridad con Helmet y npm audit

Automatizar el chequeo de vulnerabilidades con Snyk

Qué es OWASP y buenas prácticas de seguridad

Conclusiones y cierre del curso