Sistemas y Tecnologías Web: Servidor

Master de II. ULL. 1er cuatrimestre. 2020/2021

Organization ULL-MII-SYTWS-2021   Classroom ULL-MII-SYTWS-2021   Campus Virtual SYTWS   Chat Chat   Profesor Casiano

Table of Contents

Práctica: Cookies, Sesiones, Autenticación y Módulos npm (p8-t3-sessions-and-modules)

Cree y publique un módulo npm que provea un middleware express que provee autenticación para acceder a los ficheros en una determinada ruta.

En npm puede encontrar este ejemplo:

  • @ull-esit-pl/auth

  • https://github.com/ULL-ESIT-PL-1819/crguezl-authmodule (Repo Privado en GitHub)

  • Use un fichero JSON para guardar las parejas usuario-clave encriptadas:

    Fichero src/server/users.json

    1
2
3
4

    {
  "juana":"$2a$10$BGEs97PfAygEp7CA6dgkvO.wkqtNmBkZhDUHJRKISw90vBL7bIrUS",
  "casiano":"$2a$10$C0dosn7LffKfM3WEt9O7X.waDkY0WQFHh7PF76.YkQDOG9aBa3nIC"
}
  • El módulo encripta los passwords en el fichero de claves usando por ejemplo bcrypt-nodejs
  • Este sería un ejemplo de un servidor que usa nuestro módulo como middleware:

src/server/server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

  const express = require('express');
  const session = require('express-session');
  const auth = require('@ull-esit-pl/auth');

  ...

  const app = express();

  ...

  app.use(session({
    secret: 'verySecureSecret',
    resave: true,
    saveUninitialized: true,
  }));

  app.use('/', auth({
    passwordFile: path.join(__dirname, 'users.json'),
    pathToProtect: path.join(__dirname, '../../', 'dist'),
    registerView: 'register',
    successRegisterView: 'registerSuccess',
    errorRegisterView: 'registerError',
    loginView: 'login',
    successLoginView: 'loginSuccess',
    errorLoginView: 'loginError',
    logoutView: 'logout',
    unauthorizedView: 'unauthorizedView',
  }));

  ...

  • El ejemplo de uso anterior muestra la interfaz de nuestro módulo. Esta es la cabecera de la función authentication exportada por @ull-esit-pl/auth:

    auth.js)

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    function authentication(options) {
  const {
    passwordFile,
    pathToProtect,
    registerView,
    successRegisterView,
    errorRegisterView,
    loginView,
    successLoginView,
    errorLoginView,
    logoutView,
    unauthorizedView,
  } = options;
  ...
}

    The function authentication returns a router to use as middleware. It defines the routes

    • /login, /register via GET and POST methods,
    • /logout via the GET method only. And
    • /content
      • via the GET method and this is the route that will be protected.
      • Users must be logged in before accessing this route, otherwise a 401 message will be sent with an unauthorized view.
    • It receives an Object as first parameter. This object describes the configuration needed for the authentication.
    • The properties are the following:
      • passwordFile: location of the file to store the users credentials.
      • pathToProtect: the files that will be accessible only when users are logged in.
      • registerView: view containing the form to register. It will be served at /register via the HTTP GET method.
      • successRegisterView: view with the message to render when the user registers successfully.
      • errorRegisterView: view to render when there is an error in the registration.
      • loginView: view containing the form to log in. It will be served at /login via the HTTP GET method.
      • successLoginView: view with the message to render when the user logs in successfully.
      • errorLoginView: view to render when there is an error in the login.
      • logoutView: view to render when the user logs out (visits /logout).
      • unauthorizedView: view to render when a user tries to access /content without being logged in
  • Aunque el módulo de autorización soporta cualquier view engine, la aplicación de ejemplo que use nuestro módulo provee las vistas en ejs

  • La siguiente figura muestra la estructura de vistas del ejemplo que estamos usando:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    src/server/views/
├── components
│   ├── errorMessage.ejs
│   ├── foot.ejs
│   ├── form.ejs
│   ├── head.ejs
│   └── successMessage.ejs
├── index.ejs
├── login.ejs
├── loginError.ejs
├── loginSuccess.ejs
├── logout.ejs
├── register.ejs
├── registerError.ejs
├── registerSuccess.ejs
└── unauthorizedView.ejs

  • El módulo provee rutas y manejadores para el login, el registro y el logout así como para acceder al contenido protegido

    auth.js

    function authentication(options) {
  ...

  router.use('/content', auth, express.static(pathToProtect));

  router.get('/login', (req, res) => {
    ...
  });

  router.post('/login', (req, res) => {
    ...
  });

  router.get('/register', (req, res) => {
    ...
  });

  router.post('/register', (req, res) => {
    ...
  });

  // Route to logout
  router.get('/logout', (req, res) => {
    ...
  });

  return router;
}

module.exports = authentication;
  • Escriba también un programa servidor en express que use su módulo. Deberá proteger una ruta conteniendo un tutorial que describe lo aprendido en esta práctica
  • Despliegue su aplicación en la máquina virtual del iaas y en Heroku
  • Escriba un tutorial con lo que ha aprendido en esta práctica
  • Cuando acepte la asignación en Github Classroom se le creará el repo p8-t3-sessions-and-modules-aluXXXXcorrespondiente. Proceda de esta forma:
    1. Cree dentro de la organización un repo ULL-ESIT-DSI-1819/auth-aluXXXX con el código del módulo de autorización que publicará en npm en su ámbito @aluXXXX
    2. Cree dentro de la organización un repo ULL-ESIT-DSI-1819/server-auth-aluXXXX que contiene el código del server que usa el módulo y que contiene el tutorial
    3. Añada al repo ULL-ESIT-DSI-1819/p8-t3-sessions-and-modules-aluXXXX como submódulos git los dos módulos anteriores. Incluya un README.md en este repo

Recursos

Programación Web

Creación de Módulos

Git submodulos

Notas para el Profesor

Comment with GitHub Utterances

Comment with Disqus
thread de discusion