Blog de Antonio Manuel Muñiz

Desarrollo, Ingeniería y Calidad del Software

Archivos por Etiqueta: Open Source

Autorización del lado del cliente con ExtJS

Llevo algún tiempo usando ExtJS como API Javascript para desarrollar interfaces gráficas de aplicaciones web. Uno de los aspectos que más “ensucian” el diseño (a nivel de código fuente) es el control de la autorización, es decir, cómo cambia la UI en función de los permisos del usuario: qué puede/no puede ver y qué puede/no puede hacer. Evidentemente este sólo es un primer nivel de control que no está orientado a la seguridad, sino a la usabilidad, es el servidor el que realmente permite (o no) llevar a cabo una acción a un usuario autenticado.

En este post voy a contar como implementamos en klicap este tipo de autorización del lado del cliente.

Es lógico que la base de la aplicación sea la misma para todos los tipos de usuarios (con todo tipo de roles), y que lo único que cambie sean pequeños detalles, como las barras de botones (Ext.ToolBar, Ext.Window.bbar, etc) o los formularios (Ext.form.FormPanel), además de secciones completas con acceso restringido.

En klicap hemos desarrollado una pequeña utilidad a la que llamamos “micro framework de autorización”. Para ilustrar el ejemplo supongamos que tenemos una ventana (Ext.Window) con botones de Guardar y Cancelar que contiene un Grid (Ext.grid.GridPanel) con tres botones: añadir, eliminar y refrescar. La lógica de autorización del ejemplo sería:

  • role1: puede ver y usar todos los botones
  • role2: sólo puede ver y usar el botón refrescar

El código fuente sería algo así (se omiten partes el código para simplificar):

// Valores de los roles del usuario actual, recuperado
// de alguna forma desde el servidor
var role1 = getRole1();
var role2 = getRole2();

MyGrid = Ext.extend(Ext.grid.GridPanel, {
 initComponent: function() {
  if(role1) {
   this.tbar = [
    {text: 'Añadir'}, '-',
    {text: 'Eliminar'}, '->',
    {text: 'Refrescar'}
   ];
  } else if(role2) {
   this.tbar = [
    {text: 'Refrescar'}
   ];
  }
  MyGrid.superclass.initComponent.call(this);
 }
});
MyWindow = Ext.extends(Ext.Window, {
 initComponent: function() {
  if(role1) {
   this.bbar= [
    {text: 'Guardar'},
    {text: 'Cancelar'}
   ];
  }
  MyWindow.superclass.initComponent.call(this);
 }
});

var window = new MyWindow();
window.add(new MyGrid());
window.show();

El número de sentencias “if else if” crecerá (como mínimo) de forma lineal con el número de roles en un caso de autorización común. Por tanto el objetivo es eliminar todo ese código y centralizarlo de forma genérica. Usando el “micro framework” el código sería el siguiente:

var authz = new klicap.commons.extjs.auth.Authorization(
 new klicap.commons.extjs.auth.Roles({
  role1: getRole1(),
  role2: getRole2()
 })
);
MyGrid = Ext.extend(Ext.grid.GridPanel, {
 initComponent: function() {
  var fullTbar = [
   {text: 'Añadir', require: {role1: true} }, '-',
   {text: 'Eliminar', require: {role1: true} }, '->',
   {text: 'Refrescar', require: {role2: true} }
  ];
  this.tbar = authz.getAuthorizedElements(fullTbar);
  MyGrid.superclass.initComponent.call(this);
 }
});
MyWindow = Ext.extends(Ext.Window, {
 initComponent: function() {
  fullBbar= [
   {text: 'Guardar', require: {role1: true} },
   {text: 'Cancelar', require: {role1: true} }
  ];
  this.bbar = authz.getAuthorizedElements(fullBbar);
  MyWindow.superclass.initComponent.call(this);
 }
});

var window = new MyWindow();
window.add(new MyGrid());
window.show();

El efecto será el mismo pero en el código fuente de la UI no hay una sola sentencia condicional para el control de la autorización. Simplemente se debe especificar qué roles requiere cada elemento para ser mostrado (mediante el atributo ‘require’).

Actualmente existe otra funcionalidad del micro framework para autorización en formularios (se habilita o deshabilita la edición de ciertos campos de un formulario en función de los ‘require’ de éste). Este pequeña utilidad irá evolucionando acorde a las necesidades de klicap en este sentido.

La utilidad está contenida en un único fichero javascript. Si quieres probarlo puedes descargarlo, desde klicap lo hemos publicado con licencia GNU GPL v3.

Participación en IMAGINATICA 2009

Ayer GMV realizó una ponencia en IMAGINATICA 2009 y  tuve la oportunidad de poder participar en la misma.
En mi intervención intenté expresar a un colectivo de alumnos de la Universidad de Sevilla (estudiantes de Ingeniería Informática mayoritariamente) cómo entendemos el Software Libre en GMV. Comenté nuestra participación en proyectos Open Source que forman parte de nuestro ecosistema software como Continuum, proyecto en el que mi compañero José Morales está trabajando, o Sonar, para el que estamos desarrollando una nueva funcionalidad de la que yo mismo me estoy ocupando.

Sigo pensando que ese peldaño que hay entre la Universidad y la Empresa es demasiado alto, cuando se habla de herramientas como Trac o Subversion en un foro universitario… desgraciadamente pocos las conocen (desde luego yo tampoco las conocía cuando estudiaba). Quizás no estaría demás alguna asignatura orientada en este sentido.

imaginatica-logo

Sonar PDF Reporter, tu código tiene algo más que decir

La empresa en la que trabajo (GMV) está apostando con fuerza por el Software Libre, fruto de esta apuesta es la contribución a varios proyectos Open Source, entre ellos Sonar. Cuando se me dió esta oportunidad, no tuve dudas, quería aportar algo a este magnífico proyecto, del cual llevábamos sacando partido bastante tiempo.

Desde hace algún tiempo trabajo (entre otras cosas) para desarrollar un nuevo módulo en Sonar, Sonar PDF Reporter. El objetivo del módulo es añadir una nueva funcionalidad a Sonar que permita la explotación en forma de entregable de gran parte de la información que nos ofrece esta herramienta en su interfaz web.

El módulo genera un archivo PDF que contiene:

  • Visión general de la calidad del código de todo el proyecto.
  • Información concreta por módulos funcionales: métricas y medidas obtenidas a partir combinaciones de las métricas.
  • Información general del proyecto: versionado, estructura de módulos, descripción, etc

Además de ser un módulo integrado en Sonar, durante el diseño siempre tuve en mente el posible uso del módulo de forma independiente, es decir, ofrecer la posibilidad de explotar la información que Sonar proporciona desde nuestra propia aplicación, por ello se ha hecho uso de Web Services API de Sonar.

sonar

Sonar PDF Reporter Design

Quedan bastantes retoques y mejoras por realizar, pero puedes descargar un PDF de ejemplo con los reportes del propio proyecto Sonar, y ver en primicia el resultado ;)