ExpressJS: autenticación

La autenticación es un proceso en el que las credenciales proporcionadas se comparan con las del archivo en una base de datos de información de usuarios autorizados en un sistema operativo local o dentro de un servidor de autenticación. Si las credenciales coinciden, el proceso se completa y el usuario obtiene autorización para acceder.

Para que podamos crear un sistema de autenticación, necesitaremos crear una página de registro y un almacén de contraseñas de usuario. El siguiente código nos crea una cuenta y la almacena en la memoria. Esto es solo para fines de demostración; Se recomienda que siempre se utilice un almacenamiento persistente (base de datos o archivos) para almacenar la información del usuario.

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var multer = require('multer');
var upload = multer(); 
var session = require('express-session');
var cookieParser = require('cookie-parser');

app.set('view engine', 'pug');
app.set('views','./views');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true })); 
app.use(upload.array());
app.use(cookieParser());
app.use(session({secret: "Your secret key"}));

var Users = [];

app.get('/signup', function(req, res){
   res.render('signup');
});

app.post('/signup', function(req, res){
   if(!req.body.id || !req.body.password){
      res.status("400");
      res.send("Invalid details!");
   } else {
      Users.filter(function(user){
         if(user.id === req.body.id){
            res.render('signup', {
               message: "User Already Exists! Login or choose another user id"});
         }
      });
      var newUser = {id: req.body.id, password: req.body.password};
      Users.push(newUser);
      req.session.user = newUser;
      res.redirect('/protected_page');
   }
});

app.listen(3000);

Ahora para el formulario de registro, cree una nueva vista llamada signup.jade.

REGISTRO.JADE

html
   head
      title Signup
   body
      if(message)
         h4 #{message}
         form(action = "/signup" method = "POST")
         input(name = "id" type = "text" required placeholder = "User ID")
         input(name = "password" type = "password" required placeholder = "Password")
         button(type = "Submit") Sign me up!

Compruebe si esta página se carga visitando localhost: 3000 / signup.

Hemos establecido el atributo obligatorio para ambos campos, por lo que los navegadores habilitados para HTML5 no nos permitirán enviar este formulario hasta que proporcionemos tanto la identificación como la contraseña. Si alguien intenta registrarse utilizando una solicitud curl sin una identificación de usuario o contraseña, se mostrará un error. Crea un nuevo archivo llamadoprotected_page.pug en vistas con el siguiente contenido:

html
   head
      title Protected page
   body
      div Hey #{id}, How are you doing today?
      div Want to log out?
      div Logout

Esta página solo debería estar visible si el usuario acaba de registrarse o iniciar sesión. Ahora definamos su ruta y también las rutas para iniciar y cerrar sesión.

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var multer = require('multer');
var upload = multer(); 
var session = require('express-session');
var cookieParser = require('cookie-parser');

app.set('view engine', 'pug');
app.set('views','./views');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true })); 
app.use(upload.array());
app.use(cookieParser());
app.use(session({secret: "Your secret key"}));

var Users = [];

app.get('/signup', function(req, res){
   res.render('signup');
});

app.post('/signup', function(req, res){
   if(!req.body.id || !req.body.password){
      res.status("400");
      res.send("Invalid details!");
   } else {
      Users.filter(function(user){
         if(user.id === req.body.id){
            res.render('signup', {
               message: "User Already Exists! Login or choose another user id"});
         }
      });
      var newUser = {id: req.body.id, password: req.body.password};
      Users.push(newUser);
      req.session.user = newUser;
      res.redirect('/protected_page');
   }
});
function checkSignIn(req, res){
   if(req.session.user){
      next();     //If session exists, proceed to page
   } else {
      var err = new Error("Not logged in!");
      console.log(req.session.user);
      next(err);  //Error, trying to access unauthorized page!
   }
}
app.get('/protected_page', checkSignIn, function(req, res){
   res.render('protected_page', {id: req.session.user.id})
});

app.get('/login', function(req, res){
   res.render('login');
});

app.post('/login', function(req, res){
   console.log(Users);
   if(!req.body.id || !req.body.password){
      res.render('login', {message: "Please enter both id and password"});
   } else {
      Users.filter(function(user){
         if(user.id === req.body.id && user.password === req.body.password){
            req.session.user = user;
            res.redirect('/protected_page');
         }
      });
      res.render('login', {message: "Invalid credentials!"});
   }
});

app.get('/logout', function(req, res){
   req.session.destroy(function(){
      console.log("user logged out.")
   });
   res.redirect('/login');
});

app.use('/protected_page', function(err, req, res, next){
console.log(err);
   //User should be authenticated! Redirect him to log in.
   res.redirect('/login');
});

app.listen(3000);

Hemos creado una función de middleware checkSignIn para comprobar si el usuario ha iniciado sesión .protected_pageutiliza esta función. Para cerrar la sesión del usuario, destruimos la sesión.

Creemos ahora la página de inicio de sesión. Nombra la vista comologin.pug e ingrese el contenido -

html
   head
      title Signup
   body
      if(message)
         h4 #{message}
         form(action = "/login" method = "POST")
         input(name = "id" type = "text" required placeholder = "User ID")
         input(name = "password" type = "password" required placeholder = "Password")
         button(type = "Submit") Log in

Nuestra sencilla aplicación de autenticación ya está completa; Probemos ahora la aplicación. Ejecute la aplicación usando nodemon index.js y proceda a localhost: 3000 / signup.

Ingrese un nombre de usuario y una contraseña y haga clic en registrarse. Serás redirigido a laprotected_page si los detalles son válidos / únicos -

Ahora cierre la sesión de la aplicación. Esto nos redirigirá a la página de inicio de sesión.

Esta ruta está protegida de manera que si una persona no autenticada intenta visitarla, será redirigida a nuestra página de inicio de sesión. Se trataba de una autenticación básica de usuarios. Siempre se recomienda que usemos un sistema de sesión persistente y usemos hash para el transporte de contraseñas. Ahora hay formas mucho mejores de autenticar a los usuarios, aprovechando los tokens JSON.