Share
Ya es un hecho bien establecido que las contraseñas son de naturaleza inherentemente débil. Por lo tanto, pedir a los usuarios finales que creen contraseñas seguras para cada aplicación que utilizan simplemente empeora las cosas.
Una solución sencilla es permitir que los usuarios se autentiquen a través de sus cuentas sociales existentes como Facebook, Twitter, Google, etc. En este artículo, haremos eso y agregaremos esta capacidad de inicio de sesión social a la aplicación Node de muestra desarrollada en la primera parte de esta serie de autenticación, para que podamos autenticarnos a través de nuestras cuentas de Facebook y Twitter utilizando el software intermedio Passport.
Si no ha revisado el artículo anterior, le recomiendo que lo revise, ya que nos basaremos en los cimientos establecidos en ese artículo y le agregaremos nuevas estrategias, rutas y puntos de vista..
Para los no iniciados, el inicio de sesión social es un tipo de inicio de sesión único que utiliza información existente de sitios de redes sociales como Facebook, Twitter, etc., donde normalmente se espera que los usuarios ya tengan cuentas creadas..
El inicio de sesión social se basa principalmente en un esquema de autenticación como OAuth 2.0. Para obtener más información sobre los diferentes flujos de inicio de sesión que admite OAuth, lea este artículo. Elegimos Passport para gestionar el inicio de sesión social para nosotros, ya que proporciona diferentes módulos para una variedad de proveedores de OAuth, ya sea Facebook, Twitter, Google, GitHub, etc. En este artículo usaremos los módulos de pasaporte-facebook y pasaporte-twitter para proporcionar funcionalidad de inicio de sesión a través de cuentas de Facebook o Twitter existentes.
Para habilitar la autenticación de Facebook, primero debemos crear una aplicación de Facebook utilizando el Portal de desarrolladores de Facebook. Anote la ID de la aplicación y el Secreto de la aplicación, y especifique la URL de devolución de llamada yendo a Ajustes y especificando el Sitio URL en el Sitio web Sección para la aplicación. Asegúrese también de ingresar una dirección de correo electrónico válida para el Email de contacto campo. Se requiere para poder hacer esta aplicación pública y accesible para el público..
A continuación, vaya a la Estado y revisión sección y gire el control deslizante para Sí para hacer la aplicación pública. Creamos un archivo de configuración, fb.js, para mantener esta información de configuración que será necesaria para conectarse a Facebook.
// configuración de la aplicación de facebook - fb.js module.exports = 'appID': '', 'App secreta' : ' ',' callbackUrl ':' http: // localhost: 3000 / login / facebook / callback '
De vuelta en nuestra aplicación Node, ahora definimos una estrategia de pasaporte para autenticar con Facebook usando el Estrategia de Facebook módulo, que utiliza la configuración anterior para obtener el perfil de Facebook del usuario y mostrar los detalles en la vista.
Accentsconagua
passport.use ('facebook', nueva FacebookStrategy (clientID: fbConfig.appID, clientSecret: fbConfig.appSecret, callbackURL: fbConfig.callbackUrl, // facebook devolverá los tokens y la función de perfil (access_token, refresh_token, profile, done ) // asynchronous process.nextTick (function () // encuentra al usuario en la base de datos en función de su ID de Facebook User.findOne ('id': profile.id, function (err, usuario) // si hay un error, deténgalo todo y devuelva ese // es decir, un error al conectarse a la base de datos si (err) return done (err); // si se encuentra el usuario, luego ingrese si (user) return done (null) , usuario); // usuario encontrado, devuelva ese usuario else // si no se encuentra ningún usuario con esa identificación de Facebook, créelos var newUser = new User (); // configure toda la información de Facebook en nuestro modelo de usuario newUser.fb.id = profile.id; // establecer la identificación de los usuarios en Facebook newUser.fb.access_token = access_token; // guardaremos el token que facebook le proporciona al usuario newUser.fb.firstName = profile.n ame.givenName; newUser.fb.lastName = profile.name.familyName; // mira el perfil de usuario del pasaporte para ver cómo se devuelven los nombres newUser.fb.email = profile.emails [0] .value; // facebook puede devolver múltiples correos electrónicos, por lo que llevaremos el primer // guardar a nuestro usuario en la base de datos newUser.save (function (err) if (err) throw err; // si tiene éxito, devolver el nuevo usuario devuelto) null, newUser);); ); ); ));Ahora necesitamos agregar ciertas rutas para habilitar el inicio de sesión con Facebook y para manejar la devolución de llamada después de que el usuario haya autorizado la aplicación para usar su cuenta de Facebook..
// ruta para la autenticación de Facebook e inicio de sesión // diferentes ámbitos al iniciar sesión en router.get ('/ login / facebook', passport.authenticate ('facebook', scope: 'email')); // manejar la devolución de llamada después de que Facebook haya autenticado el usuario router.get ('/ login / facebook / callback', passport.authenticate ('facebook', successRedirect: '/ home', failureRedirect: '/'));La página de inicio de sesión para nuestra aplicación de demostración se ve así:
Cuando haces clic en el Iniciar sesión con Facebook botón, intentará autenticarse con facebook. Si ya ha iniciado sesión en Facebook, se mostrará el siguiente cuadro de diálogo solicitando su permiso, o bien le pedirá que inicie sesión en Facebook y luego muestre este cuadro de diálogo..
Si permite que la aplicación reciba su perfil público y dirección de correo electrónico, se llamará a nuestra función de devolución de llamada registrada con los detalles del usuario. Podemos guardarlos para futuras referencias o mostrarlos o simplemente optar por ignorarlos, dependiendo de lo que quiera hacer con la información. Siéntase libre de avanzar en el tiempo y verifique el código completo en este repositorio de git..
Sería bueno tener en cuenta que, aparte de la información básica que proporciona esta aplicación de demostración, puede utilizar el mismo mecanismo de autenticación para extraer más información útil sobre el usuario, como su lista de amigos, utilizando el alcance adecuado y utilizando las API de Facebook con El token de acceso recibido con el perfil de usuario..
Es necesario conectar un módulo de autenticación similar para manejar la autenticación a través de Twitter, y los chips de pasaporte para ayudar con su módulo de pasaporte-twitter.
En primer lugar, debe crear una nueva aplicación de Twitter mediante su interfaz de gestión de aplicaciones. Una cosa a tener en cuenta aquí es que, al especificar la URL de devolución de llamada, Twitter no parece funcionar bien con ella si se proporciona "localhost" en el campo de la URL de devolución de llamada. Para superar esta limitación durante el desarrollo, puede utilizar la dirección de bucle de retorno especial o "127.0.0.1" en lugar de "localhost". Después de crear la aplicación, anote la siguiente clave API e información secreta en un archivo de configuración de la siguiente manera:
// configuración de la aplicación de twitter - twitter.js module.exports = 'apikey': '',' apisecret ':' ',' callbackUrl ':' http://127.0.0.1:3000/login/twitter/callback '
La estrategia de inicio de sesión de Twitter es una instancia de Estrategia de Twittery se parece a esto:
passport.use ('twitter', nueva TwitterStrategy (consumerKey: twitterConfig.apikey, consumerSecret: twitterConfig.apisecret, callbackURL: twitterConfig.callbackURL, función (token, tokenSecret, perfil, hecho) // hace que el código sea asíncrono // User.findOne no se activará hasta que recuperemos todos nuestros datos de Twitter process.nextTick (function () User.findOne ('twitter.id': profile.id, function (err, usuario) // si hay un error, deténgalo todo y devuelva ese // es decir, un error al conectarse a la base de datos si (err) return done (err); // si se encuentra al usuario, entonces ingrese si (user) return done (null, usuario); // usuario encontrado, devuelva ese usuario else // si no hay usuario, créelos var newUser = new User (); // establezca todos los datos de usuario que necesitamos newUser.twitter.id = perfil .id; newUser.twitter.token = token; newUser.twitter.username = profile.username; newUser.twitter.displayName = profile.displayName; newUser.twitter.lastStatus = profile._json.status.text; // guardar nuestro usuario en el base de datos newUser.save (function (err) if (err) throw err; retorno realizado (nulo, nuevoUsuario); ); ); ); ));// ruta para la autenticación de Twitter e inicio de sesión // diferentes ámbitos al iniciar sesión en router.get ('/ login / twitter', passport.authenticate ('twitter')); // manejar la devolución de llamada después de que Facebook haya autenticado el usuario router.get ('/ login / twitter / callback', passport.authenticate ('twitter', successRedirect: '/ twitter', failureRedirect: '/')); / * GET Twitter View Page * / router.get ('/ twitter', isAuthenticated, function (req, res) res.render ('twitter', user: req.user););Ahora para probar esto, asegúrese de usar http://127.0.0.1:http: // localhost:. Como ya hemos mencionado anteriormente, parece que hay un problema al intercambiar tokens con Twitter con "localhost" como nombre de host. Al hacer clic en el Inicia sesión con Twitter botón, como se esperaba, solicita el consentimiento del usuario para permitir que esta aplicación use Twitter.
Cuando permite que la aplicación acceda a su cuenta de Twitter e información limitada, se llama al manejador de devolución de llamada que está registrado en la estrategia de inicio de sesión, que luego se utiliza para almacenar estos detalles en una base de datos de back-end.
Y ahí lo tienes !! Hemos agregado exitosamente los inicios de sesión de Facebook y Twitter a nuestra aplicación de muestra sin escribir mucho código y manejar las complejidades involucradas con el mecanismo de autenticación al permitir que Passport haga el trabajo pesado. Se pueden escribir estrategias de inicio de sesión similares para una variedad de proveedores que Passport admite. El código para toda la aplicación se puede encontrar en este repositorio de git. Siéntete libre de extenderlo y usarlo en tus propios proyectos..
