Vamos a crear un simple registro de usuarios con NodeJS, utilizaremos MySQL como DB y tambien vamos a usar Bootstrap.

Creamos primero y gracias a Express crearemos la estructura de nuestro proyecto.

Quedando la siguiente estructura (típica del framework Express):

Lo siguiente y como nos indica ya Express es instalar las dependencias necesarias y para ello:

Ahora para ejecutar nuestra aplicación deberemos solo escribir:

Con esto ya tenemos corriendo nuestra app en el puerto por defecto y si ponemos http://localhost:3000 ya nos saldrá el mensaje tipico de Express “Wellcome to Express” pues se renderiza la vista index.jade.

Ahora eliminamos el archivo users.js que se encuentra en la carpeta routes y en esa misma carpeta renombramos index.js a routes.js.

Creamos la carpeta donde colocaremos los controladores:

En el raíz editamos el archivo app.js eliminando  todas las referencias a /routes/users y cambiando /routes/index por /routes/routes.

También creamos dentro de la carpeta de los controladores (controllers), nuestro primer controlador que sera index.js el cual se va a encargar de cargar todos los demás controladores y tenerlos cargados en todo momento. Con el siguiente código :

Vamos tambien a crear un controller llamado HomeController.js que en principio tendrá:

Si ahora en las vistas cambiamos el texto por ejemplo, la vista index.jade su codigo dejamos este:

Y ya vemos que renderizara lo siguiente:

---

Vamos a utilizar Bootstrap en la parte del Front

Para ello vamos a realizar una serie de cambios creamos en las vistas una carpeta templates para tener todo un poco más ordenado y allí el template por defecto que es el que llevara cargado el Bootstrap quedando así (default.jade):

Ahora dentro de las vistas eliminamos al index.jade renombrada a home.jade uyo contenido será:

Y en el controller HomeController indicamos que renderice la vista  home en lugar de la index que ya no existe.

---

Vamos a crear la conexión con nuestra base de datos para ello creamos el directorio “database” en el raíz del proyecto. Y dentro vamos a escribir la configuración de nuestra conexión con la base de datos:

Nuestro fichero se llamara config.js y contendrá:

Ahora instalamos en nuestro proyecto el modulo para MySQL de NodeJS. Utilizando npm:

Creo el controlador en la carpeta controllers llamado UserController.js:

Para probar que funciona este controlador creo una vista para los usuarios un signup.jade que tenga lo siguiente:

Ahora en el fichero routes.js incluimos la route:

Y si ponemos localhost:3000/auth/signup saldrá por pantalla renderizada la vista con esto compruebo que está correctamente enrutado.

Ahora voy a crear el formulario completo de registro: (sigup.jade)

Quedando así:

Tenemos que crear el método también en el controlador  UserController.js:

Y tenemos que incluir la ruta  en el fichero routes.js:

Con esto ya podemos ver en el terminal del servidor que este recibe los datos del formulario:

Vamos a crear los campos de la base de datos MySQL:

Y para el caso del password lo guardaremos como se debe encryptado para ello debemos instalar la library bcryptjs:

Tambien incluire en el controlador dicha library:

Modificamos el UserController.js para que al recibir por post los parámetros estos sean escritos en la DB:

Probamos y vemos que nos inserta correctamente los datos que introducimos en el formulario y el campo password lo inserta correctamente encriptado:

Vamos a crear el formulario de login, para ello en las vistas creamos una llamada signin.jade:

Y tenemos ahora que incluir en routes.js la ruta nueva por get :

Vemos la vista del inicio de sesion:

Podemos hacer que cuando acabe de registrarse vaya directamente a la página de inicio de sesion. Para esto cambiamos el return en el método postSignUp poniendo:

---

Creación y uso de mensajes Flash

Los mensajes Flash sólo aparecerán una vez. Sirven para advertir de un acción realizada a un usuario en un momento concreto pasado el mismo el mensaje dejará de aparecer. Para esto debemos instalar en nuestro proyecto varias librerías:

y también

ahora vamos a cargarlas para poder ser usadas en nuestro proyecto y para ello añadimos en app.js dos lineas:

Y vamos a configurar viendo que en el caso de session hemos utilizado parámetros de configuración que se pueden ver que significan en la documentación:

Ahora vamos a nuestro controlador y en nuestro método de registro de usuarios vamos a poner un mensaje flash que advierta al usuario que se registro correctamente:

Y vamos a pasar a la vista el valor de esa variable flash que hemos creado y a la cual llamamos info :

Y ahora en la vista donde queremos que salga nuestro mensaje ponemos:

---

Logearse para un usuario ya registrado

Para ello lo primero que hacemos es instalar una nueva dependencia:

En este caso como no vamos a utilizar una api externa para el logeo nuestra estrategia va a ser logearse de forma local, instalaremos:

Vamos a continuación a app.js a registrar la library:

Y en este caso en el mismo archivo app.js colocaremos dos lineas de middleware:

app.use(passport.initialize());
app.use(passport.session());

Ahora en el raíz del proyecto creamos una nueva carpeta llamada passport y dentro passport.js. Este ultimo archivo es el que se encargara de autenticar a nuestro usuario cuando se identifique o haga login:

Ahora vamos al fichero routes.js para colocar las rutas de cuando el login sea correcto a donde se ir y cuando sea incorrecto también:

No hay que olvidar requerir en app.js el archivo que hemos creado passport.js y eso se hace incluyendo en el mismo las líneas:

Ahora en las vistas en nuestro formulario signin.jade , es MUY importante que el campo de email que se usara para login se llame username, para ello quedará así:

Comprobamos que desde el navegador al ir a identificarme el email que introduzco es recibido por el servidor. Una vez comprobado esto podemos pasar a modificar el fichero password.js para que se conecte a la base de datos y compruebe si es correcto o no el email y password introducidos con los existentes en nuestra base de datos:

Una vez incluidas esas librarys modificamos :

Para probar que todo es correcto vamos primero a modificar el HomeController.js :

module.exports = {

index: function(req,res,next){
res.render(‘home’,{
isAuthenticated : req.isAuthenticated(),
user : req.user
});
}
}

Con esto cuando se renderice la Home mandara un JSON con dos parametros uno para saber si esta autentificado isAuthenticated y como segundo parámetro el usuario que esta autentificado user . Cambio la vista de la home que es home.jade quedando:

Ahora si me logeo y voy a la home sale:

 

Para crear el LOGOUT vamos a crear en nuestro controlador UserController.js una nueva función que llamaremos logout, en un alarde de imaginación XDD :

Y ahora creamos la ruta añadiendola en routes.js :

Y en la vista de nuestra barra de navegación nav.jade ponemos  :

Ahora vamos a crear la VISTA del panel de usuario así que en nuestras vistas ponemos un nuevo archivo llamado panel.jade:

Y creamos nuestra funcion en el controlador UsersController.js:

Creamos también la route en routes.js:

En la vista debemos colocar ahora la ruta en nav.jade:

Y en routes.js ahora al logearnos vamos a redireccionar a nuestro panel de control, por esto debemos cambiar:

Compruebo que todo funciona de forma correcta y vamos a hacer unos cambios de funcionalidad desde el punto de vista del usuario. Cuando NO este logeado solo se verán las opciones de Registrase o Iniciar Sesion. Y cuando el usuario SI este logeado no se verán esas opciones y si la de Cerrar Sesion y Perfil. Para esto vamos a cambiar la VISTA de la barra de navegación nav.jade añadiendo dos condicionales que mostrarán el codigo si estamos autentificados o NO:

Problema de seguridad : si un usuario escribe en el navegador la ruta del panel de control /users/panel tanto si ESTA o NO logeado puede acceder a esa ruta y nosotros NO queremos que esto suceda.

Para evitar esto vamos a crear un middleware que va a comprobar si el usuario esta logeado o NO y en función de como este PERMITIRA o NO PERMITIRA acceder a esa ruta.

Creamos una carpeta llamada middleware y dentro de ella un middleware llamado auth.js (estara entre el require y response) y su código será el siguiente:

Y el middleware lo colocaremos en todas aquellas rutas que queramos que se realice esta comprobación para ello modificamos en routes.js :

Introduciendo el require a nuestro middleware

Y ahora en este mismo archivo todas las rutas que queramos proteger entre el req y el res pondremos nuestro middleware en nuestro caso AuthMiddleware.isLogged, por ejemplo al panel de control:

Por ultimo vamos a hacer un menaje para cuando el password o login son incorrectos. Para ello solamente tendremos que tocar en el controlador UserController.js y colocar el mensaje en la vista del formulario correspondiente. En concreto en UserController.js solamente vamos a cambiar :

Y en la vista signin.jade vamos a poner el mensaje de error en la parte inferior del formulario:

Si todo está correcto cuando vayamos a logearnos con un usuario o contraseña incorrectos nos saldrá un mensaje:

Se puede aun perfeccionar mucho el código así como los mensajes de error para indicar de una forma más precisa al usuario que estuvo mal, pero con esto que es lo básico podemos ver como hacer este registro de usuarios.

---

El código completo esta en : https://github.com/idqweb/registroNodeJS