Seguridad mundo web (Teoría)

Hola

En esta entrada voy hablar sobre la seguridad, durante este tiempo hemos visto como relizar aplicaciones web, un punto muy importante en el desarrollo del mundo web es el tema de la seguridad. ¿Que consiste? 

Cuando hablamos de seguridad en el mundo web es restringuir o controlar el acceso a mi aplicación.
Como siempre un ejemplo se ve mejor, a continuación vamos a ver como funciona la seguridad de la página web 'Cosas':

Acabamos de entrar en la web de 'Cosas' página que se dedica al a venta de cosas, cuando accedemos a la web, la primera página nos ofrece la opción de buscar articulos y añadir a un carrito de compras.

Yas hemos elegido los productos que deseamos comprar y pulsamos el boton comprar y la aplicación nos pregunta ¿Qué si ya tenemos una cuenta?. Al ser la primera no tenemos y decimos que no y  nos ofrece la posibilidad de crear una cuenta y procedemos a crear una cuenta rellenado el formulario con nuestros datos personales, direccion, etc.

Una creada la cuenta, pagina web cambia, es decir, tiene el mismo aspecto pero sale más opciones que antes no había, un avatar, nuestro nombre de usuario, opción de ver configuración, opción de ver pedidos, boton de cerrar sesión, etc y por último terminamos nuestra comprar.

El adminitrador de la página web 'Cosas' entra cada día para ver si hay pedidos para relizar los paquetes enviarlos a sus compradores, el administrador entra a 'Cosas' pulsa el boton acceso que le aparece una página que le piden sus credenciales. Una vez que el administrador introduce sus credenciales obtiene una pagína web parecida al usuario que ha realizado la compra pero con más opciones.

El administrador entra el opción de ver pedidos, puede ver y gestionar los pedidos realizados por los usuarios, el administrador busca los pedidos con estado nuevo, una vez que ha realizado el pedido y enviado a la empresa de mensajería. El administrador cambia el estado del pedido a enviado y cierra su sesión.

El usuario que ha relizado la compra entra a la página 'Cosas' para ver el estado de su pedido. el usuario entra a 'Cosas' y pulsa el boton acceso que le aparece una página que le piden sus credenciales y poesteriormente elige la opción 'ver pedidos', donde tiene un historico de sus pedidos y el estado de cada pedido, en su caso encuentra que su pedido se encuentra en estado 'enviado'.

Como véis es un caso muy general que en mundo web este ejemplo. De este ejemplo vamos analizador para obtener la caracteristicas de la seguridad que tiene implementada. Lo primero que podemos abstraer son los distintos tipos de usuarios:

•  Anónimo
•  Usuario
•  Administrador

Otra cosa que podemos abstraer es que hay usuario que estan autenticados (logeados) y no autenticados:

• No autenticados: Anónimo.
• Autenticados :  Usuario y Administrador.

Si seguimos analizando nuestro ejemplo, sí estan autenticados el usuario y dependiendo de quien sea puede ver más o menos opciones en la página web.

• Permisos para tipos Usuario
• Permisos para tipos Administrador

Con esto ya tenemos analizado el sistema de seguridad de la página web 'Cosas', como se puede ver la seguridad el mundo web esta formado por:

• Tipos de Usuarios
• Permisos de Usuarios

La seguridad web consiste:

 1º Autenticación (Obtener el tipo de usuario)
 2º Autorización para ver tal cosas (Ver los permisos de pendiento del tipo de usuario)

Una vez visto la teoría de la seguridad web vamos a explicar los distintos técnicas que tenemos de de implantar seguridad en nuestras aplicaciones web y api rest.

Ejemplo de Backbone

Despues de ver la distintas clase de Backbone y sus caracteristicas, procedemos para hacer un pequeño ejemplo completo con todos los componentes de Backbone. A ver el ejemplo se ha realizado con la herramientas y tecnologias:

• BackEnd  RestGenerator para generar Api Rest (JAX-RS, Spring, Mybatis, H2)
• FrontEnd Html5, CSS3, Backbone, Jquery, Underscore

Como siempre el ejemplo esta publicado en github y con la explicación de como usarlo. Aqui tenéis un resumen de lo que hemos visto de Backbone.

Backbone (Router)

Router

Las routers son las encargadas de enrutar las URLs de nuestras aplicaciones

 Base = Backbone.Router.extend({
 routes : {
  "" : "root",
  "usuario/:id" : "usuarioSingle"
 },
 root : function () {
  console.log('Estoy en root');
 },
 usuarioSingle : function (id) {
  console.log('Estoy en un usuario '+id);
 }
});

 Backbone.history.start({
  silent : false //Para que salte el evento
 });

Vamos a explicar un poco esta clase para compreder su funcionamiento.

Routes

Para ello se define un objeto hash routes que contendrá todas las rutas que se atenderán, debiendo contener al menos una.

Con esto tenemos la base para crear rutas en backbone, os envito a ver todos los métodos que tiene la clase Route de Backbone.

Backbone (View)

View

Las vista son las encargadas de representar la datos de nuestro modelo al usuario y también se encargan de capturar eventos y reaccionar de forma adecuada.

UsuarioView = Backbone.View.extend({
   tagName : "li",
   className : "item",
   events : {
    "click .delete" : "deleteUsuario"
   },
   initialize : function () {
    console.log('creado una view de usuario');
    this.template = _.template( $('#usuario-template').html());
   },
   deleteUsuario : function(e){
    this.$el.unbind();
    this.$el.remove();
   },
   render : function () {
    var data = this.model.toJSON();
    var html = this.template(data);
    this.$el.html(html);
   }
});

var usarioView = new UsuarioView({model : usuario});

Vamos a explicar un poco esta clase para compreder su funcionamiento.

La propiedad el

Cada instancia de una vista contendrá una propiedad llamada el, que será el objeto DOM que tendrá todo el contenido de la vista. Este elemento se crea automáticamente como un elemento div vacío, salvo que se indique lo contrario con las propiedades tagName y className, en nuestro caso va ser un elemto li con la clase item.
Por comodidad yo uso la propiedad $el que es el objecto DOM pero convertido en un objecto de jquery.

El método render

Este método se debe sobre escribir siempre porque es un método vacío, este método es el encargado de renderizar la plantilla de la vista con los datos del modelo y actulizar la propiedad $el

Eventos

Toda vista puede definir eventos y sus escuchadores, para ello se define un objeto hash llamado events con el siguiente formato en cada propiedad: {“event selector”: “callback”}. De esta forma indicaremos que para cada evento que ocurra bajo los elementos indicados por el selector se ejecutará la función callback.

Con esto tenemos la base para crear vistas de backbone, os envito a ver todos los métodos que tiene la clase View de Backbone.

Backbone (Collection)

Collection

Las colecciones son un conjunto de modelos. Una regla es que cada colección tiene que ser de un tipo de modelo,
aunque realmente no hay restricción alguna y pero por convección se hace así. Vamos a ver como crear una colección

Usuarios = Backbone.Collection.extend({
  url : '/rest/usuario/all',
  model : Usuario,
  initialize: function(){
   console.info('Creado una collecion de usuarios');
  }
});

Aqui hemos creados la clase collection de Usuarios, Como podemos ver el atributo model le indicamos el tipo de nuestra coleccion,
vamos a ver algunas metodos de la clase Collection

• add
• get
• at
• fetch

   
El método add añadido un modelo a nuestra coleccion

var usuarios = new Usuarios();

usuarios.add([{nombre:'Pepe', apellidos:'Perez Alonso'}, 
              {nombre:'Jose', apellidos:'Garcia Serrano'}]);

El método get obtiene el modelo con el id que le pasamos por argumento

usuarios.get("id-de-usuario");

El método at obtiene el modelo en la posción que se pase por argumento

usuarios.at(1)

El último método fetch es el encargado de hacer un petición al servidor y obtener un conjunto de datos  y crear un modelo por cada uno de los datos obtenidos en la petición y añadirlo a la colección

usuarios.fetch();

Con esto tenemos la base para crear colecciones de backbone, os envito a ver todos los métodos que tiene la clase Collection de Backbone.

Backbone (Model)

En esta entrada voy hablar de backbone una libreria MVC para JavaScript, desde la gran separacíon entre el FrontEnd y Backend, estan surguiendo una monton de librerias de para FrontEnd (Backbone, AngularJs, Ember, ...). En esta ocasión voy hablar de Backbone.

Backbone es una librería que nos permite construir apliaciones web en javascript siguiendo el patron MVC. Como bien dice el nombre de la librería nos proporciona la columna vertebral de nuestra aplicación web. De tal modo que la libreria esta formada por 4 clases:

• Model
• Collection
• View
• Route

Model

Los modelos son los encargados de almacenar los datos de tu aplicación. como simepre vamos a ver un ejemplo que es la mejor manera de verlo.

Usuario = Backbone.Model.extend({
 initialize: function(){
       console.info('Creado un usuario');
 }
});

Con esto ya tenemos una clase del modelo de backbone y ademas se ha hecho una extensión del metodo initialize que escribera por la consola "Creado una usuario",cuando hagamos una instacia de la clase Usuario saldra por consola el mensage del metodo initialize.

var usuario = new Usuario({nombre : 'Pepe', apellidos : 'Perez Lopez'});

Con esto ya tenemos un objecto usuario con unos datos a vamos a ver algunos metodos de la clase Model de backbone:

• get
• set
• change
• save
• destroy

   
Los dos primero (get, set) métodos nos permite obtener o modificar el valor de un atributo.

console.log(usuario.get('nombre'));

usuario.set({edad : 19});

console.log(usuario.get('edad'));

El metodo change no permite escuchar cuando se produce un cambio en el modelo

usuario.bind('change:nombre', function(target, valor, options){
   //Podemos acceder a la variable interna
   var old = this.previousAttributes().nombre;
   console.log('Modificado nombre a ' + valor + '. Antiguo valor:' + old);
});

usuario.set({nombre : 'Jose'});

Los últimos métodos (save, destroy) son los encargados de sincronizar el modelo con el servidor, para sincronicar con el servidor hay que rellenar el atributo urlRoot del modelo para saber la direccion donde tiene que hacer la petición backbone.

Una cosa que tenemos que tener muy en cuenta es que backbone nos dice que cada modelo tiene que ser único es decir que tiene que tener una campo identificador 'id', en caso que nuestro modelo no tiene una campo id, podemos indicar a la clase Model de backbone cual es el campo identificador, para eso tenemosq que modificar el valor idAttribute del modelo.

Todo esto es para cuando un modelo tiene el campo identificador (id o idAttribute ) a null, el método save va hacer una llama POST al servidor, en caso de esta relleno se hace un PUT, cuando llamamos al metodo destroy se hace DELETE

Con esto tenemos la base para crear modelos de backbone, os envito a ver todos los métodos que tiene la clase Model de Backbone.