¡Descarga Login con mongo y node js y más Apuntes en PDF de Diseño y Desarrollo Web solo en Docsity!

22 DE OCTUBRE DE 2020

LOGIN NODE

JS +

MONGODB

BASE DE DATOS II ING. MÓNICA HERNÁNDEZ

CREAR EL ENTORNO

Crear carpeta del proyecto en este caso se llamara “MyLogin”

Se debe agregar la carpeta al workspace de Visual Studio Code.

Si no agregamos la opción —yes, nos pedirá que ingresemos la información

de manera manual.

https://nodejs.org/en/

AGREGAR MÓDULOS AL PROYECTO

• express^ - Framework que permite escribir el código para el servidor

http://expressjs.com/en/5x/api.html#express

• mongoose^ -^ Biblioteca(Driver)^ para^ conectar^ a^ la^ base^ de^ datos^ de

mongodb. https://mongoosejs.com

• ejs-mate^ - Motor de plantillas (código html)^ https://ejs.co/#docs
• connect-flash^ - permite enviar mensajes entre múltiples paginas, errores

que tienen un antecedentes de alguna operación anterior. https://

www.npmjs.com/package/connect-flash

• morgan^ -^ permite^ visualizar^ las^ peticiones^ al^ servidor.^ https://

www.npmjs.com/package/morgan

• passport^ -autentificaron (usuario/password) con google, facebook, tw, git

hub , etc.

• passport-local^ -^ validación^ local.^ http://www.passportjs.org/docs/

authenticate/

• bcrypt-nodejs^ -cifrado de contraseñas, algoritmo para cifrar, por eso no

la recuperas si no que la cambias. https://www.npmjs.com/package/

bcrypt

Linea de instalación desde la terminal en Visual Studio Code:

“npm install express mongoose ejs-mate connect-flash morgan passport

passport-local bcrypt-nodejs”

Una vez que se instala, verificamos que se modifica el archivo package.json

y ahí se listan los módulos instalados en la sección de dependencies.

Hay que instalar también el modulo “nodemon”, este modulo es útil cuando

estamos desarrollando de manera local, ya que debes estar iniciando y

ESTRUCTURA DEL PROYECTO

• Src^ - contiene todo el proyecto
• Models^ - contiene el modelado de los datos, (coleccion, documentos)
• Passport^ - contiene los archivos para la autenticación del usuario
• Routes^ - Contiene los archivos donde se va redirigir las rutas.
• Views^ - Contiene las vistas del proyectos archivos .ejs

• database.js^ - contiene la configuración para la conexión a la base de

datos

• Index.js^ - contiene las operaciones del proyecto
• keys.js^ - contiene los usuario^ y contraseñas para conectarse al servidor,

mongodb, etc.

CONFIGURACIÓN DEL SERVIDOR

Código dentro del archivo índex.js

//modulo express para hacer el servidor const express = require('express'); //Se crea un objeto para guardar lo que retorna la funcion const app = express(); //configuraciones app.set('port', process.env.PORT || 3000 ); //Se empieza el servidor //recibe el puerto y una funcion flecha que envia un mensaje para saber si esta funcionando //correctamente app.listen(app.get('port'), () => { console.log('Servidor funcionando', app.get('port')) });

cambio, se actualice el servidor sin necesidad de estar iniciando y

terminando la ejecución.

Se ejecuta con la linea “npm run dev”

Asi cada que se haga un cambio, se actualizará automáticamente.

Para visualizar lo que existe en el puerto 3000, que es por donde esta

escuchando el servidor debemos ir a localhost:

Este error de “Cannot GET/“ es normal debido a que no tenemos ninguna

ruta configurada en el código. Pero el servidor está funcionando

correctamente.

CREANDO RUTAS PRINCIPALES

Debemos crear un archivo “índex.js” dentro de la carpeta “Routes”, en ese

archivo configuraremos todas las rutas a nuestros archivos del proyecto.

Que contiene el siguiente código

//se importa para utilizar el metodo router const express = require('express'); //este obejto router permite guardar las rutas const router = express.Router(); //Definicion de rutas //Directorio raiz "/" //Recibe como parametro el slash como raiz, y una funcion flecha que contiene un request, repuesta, next router.get('/',(req,res,next)=>{ }); //Mostramos formulario para el registro del usuario router.get('/registro',(req,res,next)=>{ }); //Regresamos los datos para registarlos router.post('/registro',(req,res,next)=>{ }); //Mostramos formulario para iniciar sesion router.get('/sesion',(req,res,next)=>{ }); //Regresamos los datos para validar los datos de sesion router.post('/sesion',(req,res,next)=>{ }); //exportamos como un modulo module.exports = router;

const path = require('path'); app.set('views', path.join(__dirname, 'views'));

Estas dos lineas permiten indicarle la ruta de nuestras carpetas al proyecto.

Ahora si debemos crear un archivo “índex.ejs”, para poder crear un vista,

este archivo debe estar dentro de la carpeta “views”, que solo contiene la

siguiente linea de código

Hola mundo!!!!

Después debemos agregar al src/index.js, la importación de los archivo que

se encuentran en la carpeta “Routes” de la siguiente manera

//Importar rutas app.use('/', require('./routes/index'));

App.use(), es un método que permite indicarle al código que debe usar esos

archivos.

Ahora en el archivo /routes/index.js, modificamos el método siguiente:

router.get('/',(req,res,next)=>{ res.render('index'); });

Con esto ya debería de visualizarse el mensaje hola mundo en

localhost:

VER LAS PETICIONES CON MORGAN

Agregar el modulo en el archivo principal index.js , de la siguiente manera:

const morgan = require('morgan');

Después de las configuraciones

app.use(morgan('dev')); HACER EL FORMULARIO PARA REGISTRO

Crear dos archivos dentro de la carpeta views, “registro.ejs” y “login.ejs”

Realizar un formulario en registro , de la siguente manera:

Enviar

res.send('Datos recibidos '); }); ENCRIPTAR CONTRASEÑA

Crear un archivo “auto-local.js”, ahi se agregara el código para encriptar las

contraseñas de los usuarios

const passport = require('passport'); //utilizar el modulo local //passport crear estrategias para hacer la encriptacion const LocalStrategy = require('passport-local').Strategy; //local-registro nombre del metodo, new LocalStrategy recibe 2 parametros el primero en llaves //es un objeto de configuraciones que define el tipo de dato que recibimos y una funcion que regrese algo //mensaje, los guarde, etc. passport.use('local-registro',new LocalStrategy({ usernameField: 'email', passwordField: 'password', passReqToCallback: true //para poder recibir en la funcion //el reques es por si se agregan mas datos //done es para indicarle que se regresara una respuesta }, (req,email,password, done) => { }));

CONFIGURACIÓN DE ARCHIVO DATABASE

Debido a que necesitamos ciertas configuraciones debemos agregar lo

siguiente en el archivo keys.js

module.exports = { mongodb: { URI : 'mongodb://localhost:27017/mylogin' } };

Esto permite utilizar el objeto mongodb, en los demás archivos.

En el archivo database.js agregar el código

const mongoose = require('mongoose'); const { mongodb } = require('./keys'); Primera opción mongoose.connect(mongodb.URI, {}) .then(db => console.log('Base de Datos conectada')) .catch(err => console.error(err)); mongoose.connect(mongodb.URI, {useNewUrlParser: true,useUnifiedTopology: true}) .then(db => console.log('Base de Datos conectada')) .catch(err => console.error(err));

//recibe el texto y aplica el algoritmo varias veces para cifrarlo return bcrypt.hashSync(password, bcrypt.genSaltSync( 10 )); }; //desencriptar o comparar userSchema.methods.comparePassword = function (password) { return bcrypt.compareSync(password, this.password); } module.exports = mongoose.model('usuarios',userSchema);

Regresamos al archivo auto-local

const passport = require('passport'); //utilizar el modulo local //passport crear estrategias para hacer la encriptacion const LocalStrategy = require('passport-local').Strategy; //permite crear un nuevo usuario con el Schema definido en models/ user const User = require('../models/user'); //Permite que si navega por nuestro sitio no este pidiendo el logro a cada rato passport.serializeUser((user, done) => { done(null, user.id); }) passport.deserializeUser(async (id, done) => { const user = await User.findById(id); done(null, user);

//local-registro nombre del metodo, new LocalStrategy recibe 2 parametros el primero en llaves //es un objeto de configuraciones que define el tipo de dato que recibimos y una funcion que regrese algo //mensaje, los guarde, etc. passport.use('local-registro',new LocalStrategy({ usernameField: 'email', passwordField: 'password', passReqToCallback: true //para poder recibir en la funcion //el reques es por si se agregan mas datos //done es para indicarle que se regresara una respuesta }, async (req,email,password, done) => { const user = new User(); user.email = email; user.password = password; await user.save(); done(null, user); }));

Agregar a index.js de src

const passport = require('passport'); require('./passport/auth-local'); app.use(passport.initialize()); app.use(passport.session());