Advertisement
  1. Code
  2. Databases

Usando Passport con Sequelize y MySQL

by
Read Time:18 minsLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Sequelize es un NOM de Node.js basado en promesas. Se puede usar con PostgreSQL, MySQL, MariaDB, SQLite y MSSQL. En este tutorial, implementaremos la autenticación para los usuarios de una aplicación web. Y usaremos Passport, el popular middleware de autenticación para Node, junto con Sequelize y MySQL para implementar el registro y el inicio de sesión del usuario.

Empezando

Asegúrese de tener instalado lo siguiente en su máquina:

  • Node
  • MySQL

Para este tutorial, utilizaremos Node.js junto con Express, de modo que seguiremos adelante y comenzaremos a instalar lo que necesitamos.

Paso 1: Genera un archivo package.json

Crea un directorio para tu aplicación. Dentro de este directorio, ejecútelo desde su terminal o símbolo del sistema:

Esto inicializa el administrador de dependencias npm. Esto presentará una serie de indicaciones que atravesaremos rápidamente.

  • Escriba el nombre de su aplicación sin espacios y presione Entrar para 'name' ('nombre').
  • Presione Entrar para 'versión'.
  • Para 'description' ('descripcion'), en este tutorial, teclearemos "Usar pasaporte con Sequelize y MySQL" como descripción y presionaremos Enter. Esto también puede estar en blanco.    
  • Para 'entry point (index.js)', escriba server.js y presione Entrar.
  • Para 'test command' ('comando de prueba'), presione Enter.
  • Para 'git repository' ('repositorio git'), puedes ingresar el repositorio git donde reside tu aplicación si tienes uno o simplemente presionar Enter para dejar esto en blanco.    
  • Para 'Keywords' ('Palabras clave'), presione Entrar.
  • Para 'author' ('autor'), presione Entrar o escriba su nombre antes de hacer eso.
  • Para 'license' ('licencia'), presione Enter.
  • Para '(Is this okay )' ('(¿Está bien?')'), Esto muestra cómo se verá tu package.json. Escriba Yes y presione Entrar.

Paso 2: Instalar dependencias

Las principales dependencias para este tutorial son:

  • Express
  • Sequelize
  • MySQL
  • Passport
  • Passport Local Strategy
  • Body Parser
  • Express Session
  • Bcrypt Nodejs
  • Express Handlebars

Para instalarlos, desde su terminal o símbolo del sistema, ejecute los siguientes uno tras otro.

Si estás usando Git para este proyecto:

En la carpeta del proyecto, crea un archivo .gitignore.

Agregue esta línea al archivo .gitignore.

node_modules

Paso 3: configura la aplicación

Ahora, creamos un archivo de servidor. Este será el archivo principal al que se llama cuando escribe lo siguiente:

Esto ejecuta la aplicación. También puede ejecutar la aplicación escribiendo node server.js.

Luego, en nuestra carpeta de proyectos, creamos un nuevo archivo y le damos el nombre server.js.

Dentro del archivo server.js, pegamos lo siguiente:

La primera línea asigna el módulo express a una variable express. Entonces inicializamos Express y le damos el nombre en una variable: app.

Luego hacemos que la aplicación escuche en el puerto 5000. Puede elegir cualquier número de puerto libre en su computadora.

A continuación, llamamos a la función de enrutamiento express app.get() para responder con "Bienvenido a pasaporte con Sequelize" cuando se realiza una solicitud GET a "/".

Para probar en su computadora, ejecute esto desde el interior de su carpeta de proyectos:

Si ve el texto "Bienvenido a Pasaporte con Sequelize" cuando visite http://localhost:5000/ ¡entonces le felicito! De lo contrario, verifique que haya hecho todo exactamente como está escrito anteriormente.

A continuación, importamos algunos módulos que necesitamos, como passport, express-session y body-parser.

Después de var app = express() agregamos las siguientes líneas:

En las dos primeras líneas, importamos el módulo passport y express-session, y ambos debemos gestionar la autenticación.

Luego, importamos el módulo body-parser. Esto extrae la parte completa del cuerpo de una solicitud entrante y la expone en un formato que es más fácil de trabajar. En este caso, usaremos el formato JSON.

Para que nuestra aplicación use el body parser, agregamos estas líneas algunos espacios debajo de las líneas de importación:

A continuación, inicializamos passport y express session y la sesión passport y los agregamos como middleware. Hacemos esto agregando estas líneas algunos espacios después de la línea de importación bodyParser.

Comenzaremos a trabajar en la autenticación real ahora.

Haremos esto en cuatro pasos:

  • Configure Sequelize con MySQL.
  • Crea el modelo de usuario.
  • Configurar vistas
  • Escribe una estrategia de passport.

1. Configurar Sequelize con MySQL

Primero, creamos una base de datos en MySQL. Dale tu nombre preferido. Por el bien de este tutorial, creemos una base de datos llamada secuencize_passport en MySQL.

Luego configuramos la configuración para manejar los detalles de la base de datos.

Primero, importemos el módulo dot-env para manejar las variables de entorno.

Ejecute esto en su carpeta de proyecto raíz:

Luego lo importamos en el archivo del servidor principal, server.js, justo debajo de las otras importaciones.

A continuación, creamos un archivo en nuestra carpeta de proyectos y lo nombramos .env.

El siguiente paso a seguir es opcional si no estás usando Git:

Agregaremos el archivo .env a su archivo .gitignore.

Su archivo .gitignore debería verse así:

Después de esto, agregamos nuestro entorno al archivo .env agregando esta línea:

NODE_ENV='development'

Luego creamos un archivo config.json que Sequelize usará para administrar diferentes entornos.

Lo primero que debe hacer es crear una carpeta llamada config en nuestra carpeta de proyectos. Dentro de esta carpeta, creamos un archivo config.json. Este archivo debe ignorarse si está presionando a un repositorio. Para hacer esto, agregue el siguiente código a su .gitignore:

config/config.json

Luego, pegamos el siguiente código en nuestro archivo config.json.

Recuerde reemplazar los valores en el bloque de desarrollo anterior con los detalles de autenticación de su base de datos.

A continuación, instalamos la secuencia con npm. Para hacer esto, ejecute el siguiente comando en la carpeta raíz del proyecto:

Ahora es el momento de crear la carpeta de modelos models .

Primero, hacemos una aplicación llamada app en nuestra carpeta de proyectos.

Dentro de la carpeta app, creamos una nueva carpeta llamada models y creamos un nuevo archivo llamado index.js en la carpeta models.

Dentro del archivo index.js, pegamos el código a continuación.

Este archivo se usa para importar todos los modelos que colocamos en la carpeta models y exportarlos.

Para probar que todo está bien, lo agregamos en nuestro archivo server.js.

Aquí, estamos importando los modelos y luego llamando a la función de sincronización Sequelize.

Ejecute esto para ver si todo está bien:

Si recibe el mensaje "Site is live Nice! Database looks fine" (El sitio está en buen estado, la base de datos se ve bien), entonces ha configurado el Sequelize correctamente.

De lo contrario, repase cuidadosamente los pasos anteriores e intente solucionar el problema con ayuda.

2. Crea el Modelo de Usuario

Lo siguiente que vamos a hacer es crear el modelo de usuario, que es básicamente la tabla de usuarios. Esto contendrá información básica del usuario.

En nuestra carpeta models, creamos un archivo y le damos el nombre user.js. La ruta completa de este archivo debe ser app/models/user.js.

Abra el archivo user.js y agregue el siguiente código:

Ahora ejecuta:

Debería ver el familiar "Site is live. Nice! Database looks fine." ("El sitio está en vivo. La base de datos de Niza se ve bien"). mensaje. Esto significa que nuestros modelos de Sequelize se han sincronizado correctamente, y si revisa su base de datos, debería ver una tabla de usuarios con las columnas especificadas.

3: Configurar vistas

Primero, creemos la vista para registrarla y conectarla.

Lo primero que debe hacer es importar el módulo de manillar express que usamos para las vistas en este tutorial.

Agregue esta línea al archivo de inicio principal, server.js.

var exphbs = require('express-handlebars')

Su bloque de importación debería verse así en este punto.

A continuación, agregamos las siguientes líneas en nuestro archivo server.js.

Ahora, en nuestra carpeta de aplicaciones, creamos tres carpetas llamadas views, controllers y routes.

En la carpeta de vistas, creamos un archivo llamado signup.hbs y pegamos el código debajo en él.

Luego, en nuestra carpeta controllers, creamos un nuevo archivo y lo nombramos authcontroller.js.

En este archivo, pegamos el siguiente controlador para la ruta de registro que crearemos en un momento.

A continuación, creamos una ruta para el registro. En la carpeta de rutas, creamos un nuevo archivo llamado auth.js y luego, en este archivo, importamos el controlador de autenticación y definimos la ruta de registro.

Ahora, importaremos esta ruta en nuestro server.js y pasaremos la aplicación como argumento.

En el servidor, después de importar los modelos, agregue estas líneas:

Ejecuta esto:

Ahora, visite http://localhost:5000/signup y verá el formulario de registro.

Repitamos los pasos para el formulario de inicio de sesión. Como antes, crearemos un archivo llamado signin.hbs en nuestra carpeta de vistas y pegaremos el siguiente código HTML en él:

Luego, agregue un controlador para el inicio de sesión en la app/controllers/authcontroller.js.

Luego, en app/routes/auth.js, agregamos una ruta para iniciar sesión de esta manera:

app.get('/signin', authController.signin);

Ahora cuando corres:

y visite http://localhost:5000/signin/, debería ver el formulario de inicio de sesión.

El paso final y principal es escribir nuestras estrategias de passport.

4. Escribe una estrategia de Passport

En app/config, creamos una nueva carpeta llamada pasaporte.

Luego, en nuestra nueva carpeta app/config/passport, creamos un nuevo archivo y lo llamamos passport.js. Este archivo contendrá nuestras estrategias de passport.

En passport.js, usaremos el modelo de usuario y el pasaporte.

Primero, importamos bcrypt, que necesitamos para proteger las contraseñas.

var bCrypt = require('bcrypt-nodejs');

Luego, agregamos un bloque module.exports como este:

Dentro de este bloque, inicializamos la estrategia de pasaporte local y el modelo de usuario, que se pasará como argumento. Así es como hacemos esto:

A continuación, definimos nuestra estrategia personalizada con nuestra instancia de LocalStrategy de esta manera:

Ahora hemos declarado qué campos de solicitud (req) son nuestro usernameField y passwordField (variables de passport).

La última variable, passReqToCallback, nos permite pasar la solicitud completa a la devolución de llamada, lo que es particularmente útil para registrarse.

Después de la última coma, agregamos esta función de devolución de llamada.

En esta función, manejaremos el almacenamiento de los detalles de un usuario.

Primero, agregamos nuestra función de generación de contraseñas hash dentro de la función de devolución de llamada.

Luego, utilizando el modelo de usuario de Sequelize inicializado como User, verificamos si el usuario ya existe y, de no ser así, lo agregamos.

User.create() es un método Sequelize para agregar nuevas entradas a la base de datos. Observe que los valores en el objeto data se obtienen del objeto req.body que contiene la entrada de nuestro formulario de suscripción.

Tu passport.js debería verse así:

Ahora importaremos la estrategia en server.js.

Para hacer esto, agregamos estas líneas debajo de las rutas importadas en server.js.

Tu server.js debería verse así en este momento:

Ahora realmente aplicaremos la estrategia a nuestra ruta /signup.

Así es como lo hacemos:

Primero, vamos a app/routes/auth.js, y agregamos una ruta para publicar para suscribirse de esta manera.

Como necesitamos pasaporte, debemos pasarlo a este método. Podemos importar el pasaporte en este script o pasarlo desde server.js. Hagamos esto último.

Modifique la función exportada en este app/routes/auth.js para tener passport como parámetro. El código en la app/routes/auth.js debería verse así después de su modificación.

Luego, en server.js, modificamos las rutas de importación y agregamos el pasaporte como un argumento como este:

var authRoute = require('./app/routes/auth.js')(app,passport);

Ahora, vaya a la URL de registro http://localhost:5000/signup/ e intente registrarse.

Cuando intente registrarse, obtendrá un error "Failed to serialize user into session" ("No se pudo serializar al usuario en la sesión"). Esto se debe a que el pasaporte debe guardar un ID de usuario en la sesión y lo usa para administrar la recuperación de los detalles del usuario cuando sea necesario.

Para resolver esto, vamos a implementar las funciones de serialización y deserialización del pasaporte en nuestro archivo app/config/passport/passport.js.

Primero, agregamos la función serializar. En esta función, guardaremos el user id en la sesión.

Para hacer esto, agregamos las siguientes líneas debajo de la inicialización de la estrategia local.

A continuación, implementamos la función deserializar. Agregue la función justo debajo de la función serializar.

En la función de deserialización anterior, utilizamos la promesa Sequelize findById para obtener el usuario, y si tiene éxito, se devuelve una instancia del modelo Sequelize. Para obtener el objeto User desde esta instancia, usamos la función Sequelize getter como esta: user.get().

Ahora corre de nuevo:

E intenta inscribirte. ¡Hurra si tienes el "Cannot GET /dashboard" (No se puede GET /dashboard)! Significa que nuestra autenticación fue exitosa. Recuerde que hemos sido redirigidos a /dashboard en nuestro método passport.authenticate en routes/auth.js.

Ahora continuemos y agreguemos esa ruta. Luego, agregue un middleware para asegurarse de que solo se puede acceder a la página cuando un usuario inicia sesión en la sesión.

En nuestra carpeta de app/views, creamos un nuevo archivo llamado dashboard.hbs y agregamos el siguiente código HTML en él.

En routes/auth.js, agregamos esta línea dentro del bloque module.exports:

app.get('/dashboard',authController.dashboard);

A continuación, vamos a app/controllers/authController.js y agregamos el controlador del dashboard.

Su AuthController.js debería verse así:

Ahora, ejecute la aplicación nuevamente e intente registrarse con una dirección de correo electrónico diferente a la que utilizó anteriormente. Serás redireccionado apropiadamente a la ruta /dashboard.

Pero /dashboard no es una ruta protegida, lo que significa que incluso si un usuario no está conectado, puede verlo. No queremos esto, así que agregaremos una ruta /logout para registrar al usuario y luego proteger la ruta y probar lo que hemos hecho.

Hagámoslo:

En routes/auth.js agregamos esta línea:

app.get('/logout',authController.logout);

Luego agregamos el controlador en la app/controllers/authController.js.

Ahora ejecute la aplicación nuevamente e inscríbase con una dirección de correo electrónico diferente.

Después de eso, visite http://localhost:5000/logout para desconectar al usuario. Ahora visite http://localhost:5000/dashboard.

Notarás que es bastante accesible. Agreguemos un middleware personalizado para proteger esa ruta.

Para hacer esto, abrimos app/routes/auth.js y agregamos esta función en el bloque module.exports, debajo de todas las otras líneas de código.

A continuación, modificamos el controlador de ruta del tablero para que se vea así:

app.get('/dashboard',isLoggedIn, authController.dashboard);

Ahora cuando vuelva a ejecutar la aplicación e intente visitar la página del tablero y no haya iniciado sesión, deberá redirigirla a la página de inicio de sesión.

¡Uf! Es hora de implementar la parte final: el inicio de sesión.

Primero, agregaremos una nueva estrategia local para iniciar sesión en app/config/passport/passport.js.

En esta estrategia, la función isValidPassword compara la contraseña ingresada con el método de comparación bCrypt ya que almacenamos nuestra contraseña con bcrypt.

Si los detalles son correctos, nuestro usuario iniciará sesión.

Ahora ve a routes/auth.js y agrega la ruta para publicar en /signin.

Tus routes/auth.js deberían verse así cuando hayas terminado.

Ahora ejecute la aplicación e intente iniciar sesión. Debería poder iniciar sesión con cualquiera de los detalles que utilizó al registrarse, y se lo dirigirá a http://localhost:5000/dashboard/.

¡Felicitaciones si has llegado al final de este tutorial! Hemos utilizado con éxito Sequelize y Passport con una base de datos MySQL.

El código completo para este tutorial se puede encontrar en GitHub.

Conclusión

Con esto concluye nuestro tutorial sobre el uso de Passport para la autenticación de usuarios con Sequelize y MySQL. Sequelize es un ORM realmente útil para tratar con MySQL cuando se usa Node. Personalmente, he encontrado que es muy útil, y definitivamente debes considerar usarlo en tu próxima aplicación Node-MySQL.

Referencias

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.