Ver contenido
carlosazaustre.es carlosazaustre.es

Registro y autorización de usuarios en Node.js con Twitter y Facebook

🗓 | 💻 Desarrollo | 🕐 3 minutos de lectura | 💬 Comments

El pasado viernes me ofrecieron impartir una clase BONUS en la plataforma de estudiantes de los cursos de Mejorando.la.

El tema que elegimos fue como implementar un sistema de login de usuarios utilizando plataformas sociales (Twitter y Facebook) y empleando Node.js en el Backend.

Esta fue la presentación que utilicé en la exposición.

Y a continuación explico a modo de tutorial los pasos para implementar este sistema en un proyecto que tengamos.

Lo primero de todo, necesitamos tener Node.js y MongoDB instalados en nuestro equipo. Node es el backend que utlizaremos y MongoDB es una base de datos no relacional, basada en documentos JSON. Podemos utlizar cualquier otra base de datos (por ejemplo, MySQL o cualquier otra). Yo lo hago con Mongo porque me parece más sencillo y porque esta basada en JavaScript del cual soy un talifán :P

A continuación creamos una estructura base de aplicación con el framework Express. De esta forma nos crea un “esqueleto” con archivos y carpetas de una especie de “hola mundo” con Express.

Instalamos las dependencias que vamos a utilizar. Mongoose es el driver que nos ayuda a conectarnos a MongoDB e implementar esquemas de los modelos que salvemos en la base de datos. Passport es la librería que nos permite agilizar el proceso de autenticado y registro de usuarios con Node.js. Passport-twitter y Passport-facebook son las librerías específicas para el login con Twitter y Facebook ya que podemos utilizar Passport sin redes sociales implementando un método local con Passport-Local.

Con el prefijo –-save logramos que las dependencias se queden grabadas en el package.json

Creamos un modelo usuario /models/user.js donde indicaremos que datos vamos a querer almacenar en la base de datos para nuestros usuarios. En este ejemplo vamos a salvar el nombre, el proveedor, un ID, la foto del usuario y un campo dónde almacenaremos la fecha en la que el usuario se registró en nuestra aplicación.

Configuramos Passport /passport.js* importando las librerías que utilizamos y las funciones que nos permiten el login.

Con seriealizeUser y deserializeUser logramos que el objeto usuario quede almacenado en la sesión de la aplicación y asi poder utilizarlo a lo largo de ella.

Con TwitterStrategy y FacebookStrategy utilizamos las estrategias de autenticación que nos proporciona Passport, les pasamos como parámetros los API Key y API secret que nos dan las plataformas cuando registramos una aplicación en ellas, y nos devuelven varios objetos, entre ellos el objeto profile que contiene toda la información del usuario que devuelve Twitter o Facebook y del que podemos sacar los atributos que queramos para nuestra aplicación (nombre, ID, foto, etc..)

Una buena práctica es mantener las API Keys separadas del código fuente que subimos al repositorio, en un archivo config.js (o en las variables de entorno) que luego importamos desde donde lo necesitemos.

El archivo principal de la aplicación Express y por tanto del servidor quedaría mas o menos así app.js

Esta sería la plantilla Jade que renderiza el index: /views/index.jade. Como véis le aplicamos una lógica dentro de la plantilla. Si existe el objeto usuario es que estamos logueados en la aplicación y por tanto le pedimos que nos muestre la foto y el nombre y un enlace a salir. En caso de que no exista el objeto usuario es que no estamos logueados, por tanto indicamos que nos muestre los enlaces al registro/login con Twitter y Facebook

Para crear una aplicación en Twitter podemos ir a http://dev.twitter.com y registrar una nueva aplicación. Indicamos el nombre y en los campos website y callback URL le ponemos example.com ya que no nos permite poner Localhost. Con facebook es similar, la URL es http://developers.facebook.com y en este caso si podemos indicarle que nuestra aplicación funciona en localhost.

Aquí están las capturas para ambas plataformas:

Screen Shot 2014-03-02 at 22.42.12.png

Screen Shot 2014-03-02 at 22.44.15.png

Screen Shot 2014-03-02 at 22.43.12.png

Screen Shot 2014-03-03 at 10.29.37.png

Screen Shot 2014-03-02 at 22.46.37.png

Screen Shot 2014-03-03 at 09.10.27.png

Y ya está, el flujo de la aplicación sería el siguiente: Primero nos pide autenticarnos con Twitter o Facebook

Screen Shot 2014-03-03 at 10.45.01.png

Si elegimos Twitter nos redirige a la página de autenticación con Twitter. En el caso de no estar logueados nos pediría el usuario y la contraseña de Twitter

Screen Shot 2014-03-03 at 10.45.05.png

Y si todo sale correctamente, nos redirige a nuestra aplicación con el usuario logueado, mostrándonos el nombre de usuario y la foto de perfil

Screen Shot 2014-03-03 at 10.45.09.png

Tenéis todo el código utilizado disponible y comentado en español en este respositorio de GitHub. Espero que os sirva en vuestros proyectos y desarrollos :)

✎ ¿Ves alguna errata? ¿Quieres modificar algo? Haz una Pull Request.

Carlos Azaustre

Soy Carlos Azaustre. Desarrollador web desde hace más de 8 años. He trabajado en Google, IBM y Eventbrite. Soy GDE (Google Developer Expert) en Tecnologías Web. Desde 2013 intento documentar en éste blog todo lo que aprendo y así compartirlo con el resto de la comunidad.

📬 Únete y ponte al día en desarrollo web

Recibe puntualmente información sobre las últimas novedades en tecnologías web y desarrollo web moderno para que estés siempre actualizadx:

🔒 Libre de Spam. Sólo contenido que te interesa..