Blog de Antonio Manuel Muñiz

Desarrollo, Ingeniería y Calidad del Software

Archivos mensuales: agosto 2010

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.

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.