Acceder a controles creados dinámicamente desde servidor en ASP.net

Un tema que siempre he considerado un inconveniente en asp.net es la dificultad de acceder a los datos de los controles creados dinámicamente. En este pequeño artículo voy a mostrar una pequeña solución para poder crear controles desde javascript y desde servidor y poder obtener los valores introducidos.

Creación de Controles
Vamos a crear una página aspx con tres botones: uno que cree botones vía javascript, otro que cree cajas de texto desde javascript y otro que cree un textbox desde servidor:


La función javascript que crea los controles es la siguiente:

Unicamente creamos, en base al tipo, un input de tipo submit si es boton o un input de tipo text si el tipo es texto. Al ejecutar la página podemos crear tantos controles como queramos pulsando sobre los botones. El código del evento del botón botonCrearTexto se ejecuta en el servidor y crea un textbox dinámicamente:

La idea ahora es poder obtener los valores introducidos en los campos de texto y el botón que se ha pulsado:


Capturar el valor de los controles
El objetivo ahora es que al pulsar sobre cualquier botón podamos acceder a la información del botón pulsado y al contenido de los diferentes textBox que se hayan creado desde el servidor. El quid del meollo es la clase HttpContext, en la que se mantiene la información intercambiada entre el cliente y el servidor:

Dentro de la colección HttpContext.Current.Request.Form.AllKeys se encuentran todos los valores posteados desde el cliente, el control que realiza el post, el valor de los controles que disponen de valor, el viewstate de la página y el eventvalidation en el caso de controles de servidor. Podemos recorrer esta colección y acceder al valor de los input de tipo texto.

No tenemos en cuentra los controles que empiecen por __ porque son propios de asp.net.

El resultado es que al pulsar sobre cualquier botón, en pantalla mostramos los valores introducidos:


Conclusiones
Muchas veces nos vemos en el problema de controles dinámicos y no podemos resolverlo de forma fácil con asp.net. Con este artículo espero facilitaros la vida. Dependerá del desarrollador evolucionar esta solución para repintar los controles y asignarles el valor entre posts para que no desaparezcan.

Como siempre espero que os haya gustado esta pequeña aportación

Control de Usuario "Contador de filas de DataGridView" en C#

Hace poco me encontré con el problema de tener un proyecto en c# de ventanas con muchos datagridview al que había que ponerle a cada gridview un contador de filas. La primera opción era poner en cada pantalla un label y programar el evento DataBindingComplete para que se muestre en pantalla. El engorro era que había que tocar muchas pantallas y tocar el código de todas así que me plantee hacer un control de usuario que pudiera insertar en cada página, que tuviera una propiedad en la que le indicará el control gridview y me sirviera para todas las pantallas. Así que, ¡manos a la obra!

Podéis descargar el código de este control aquí.

El código
El quid del control es definir una propiedad pública en la que podamos definir el gridview y enlazar el evento DataBindingComplete.


La parte de diseño del control es la siguiente:

Insertar el control en el Formulario
Una vez creado el control lo insertaremos en el formulario, en la ubicación que queramos y especificaremos la propiedad GRIDVIEW para que el control obtenga el número de filas.





Podemos incluir tantos controles como queramos. En el momento en que se realice el evento databindingcomplete, el control actualizará el número de filas:


Conclusión
Este es un control muy sencillo pero que arregla una situación en la que habría que haber cambiado mucho código. Además, la utilización de controles de usuario permite un código sostenible y mejorable. En cualquier momento podemos asignarle más funcionalidades o cambiarle el aspecto y se aplicará a todas las pantallas sin tener que cambiar nada.

Como siempre, espero que os haya gustado y os sirva de utilidad.

Plugin "Insertar HTML" para FCKEditor

Hace ya bastante tiempo que utilizo el editor WYSIWYG FCKEditor y de siempre me ha parecido una herramienta excepcional. En este artículo voy a desarrollar un plugin que utilizo y que me ha venido muy bien para muchos proyectos. Este plugin es muy simple, un botón para que el usuario pueda pegar un HTML y que se inserte donde tenga puesto el cursor. La razón es que para usuarios no acostumbrados a HTML, explicarles que para, p.e. enlazar con un mapa de google, tienen que pulsar sobre el botón Fuente HTML y localizar la ubicación en el código HTML y pegar allí el código de Google Maps es, en muchos casos, imposible.

Puedes descargar los códigos de este post aquí.

1. El Objetivo
El objetivo es conseguir lo siguiente, un botón en el editor que al pulsarse muestre la ventana de insertar HTML:




2. Ficheros necesarios
Lo primero es conocer la estructura para crear un plugin para FCKEditor. En realidad es muy simple, necesitaremos crear una carpeta en el directorio /editor/plugins (en este caso insertarHtml es el nombre de la carpeta) del FCKEditor que contenga los siguientes ficheros:

1. fckplugin.js: fichero javascript en el que se definen las propiedades del plugin: formato de la ventana a mostrar, icono, nombre del plugin, ...
2. insertarHtml.png: imagen para el icono del botón en el FCKEditor.
3. insertarHtml.php: página que se muestra al pulsar el botón. En este caso es PHP pero puede ser perfectamente HTML o ASPX o lo que se quiera.

Finalmente, necesitamos dar de alta el plugin en el fichero fckconfig.js que está en el directorio raiz del FCKEditor. Vamos a ir viendo paso a paso cada uno de los ficheros.

3. fckplugin.js
En este fichero se configuran los datos generales del plugin. Lo primero es registrar el comando:

FCKCommands.RegisterCommand( 'Insertar_Html', new FCKDialogCommand( 'Insertar código HTML', 'Insertar código HTML', FCKConfig.PluginsPath + 'insertarHtml/insertarHtml.php', 400, 400 ) ) ;

Indicamos qué página se abre en la nueva ventana, el tamaño de la ventana, el nombre que aparece en la ventana, etc. Lo siguiente es crear el botón:

var oHTMLItem        = new FCKToolbarButton( 'Insertar_Html', 'Insertar código HTML en la posición del cursor' ) ;
oHTMLItem.IconPath    = FCKConfig.PluginsPath + 'insertarHtml/insertarHtml.png' ;

y finalmente, registramos el elemento:

FCKToolbarItems.RegisterItem( 'Insertar_Html', oHTMLItem ) ;

4. insertarHtml.php
En el fichero insertarHtml.php es donde se genera la acción. Es la pantalla que se llama cuando el usuario pulsa sobre el botón. La página tiene una parte de presentación HTML y otra de código PHP. La primera parte es:


Es importante la parte inicial de javascript que es la que coge la referencia al FCKEditor que ha llamado a esta ventana. La parte de código es la que se ejecuta cuando se pulsa sobre el botón btnInsertar:


Lo que hacemos es generar el código javascript que inserta el código HTML en la posición del cursor y lo pasamos a la variable codigoJavascript, de la que se hace un echo en la parte HTML. Seguidamente, cerramos la ventana y volvemos a la pantalla del FCEditor.

5. fckconfig.js
Lo último es dar de alta el botón en la toolbar de nuestro FCKEditor y utilizarlo. Para ello tenemos que modificar el fichero fckconfig.js que se encuentra en el directorio raiz del FCKEditor. Lo primero que tenemos que hacer es añadir el plugin:

FCKConfig.Plugins.Add( 'insertarHtml' ) ;

y finalmente, incluir el comando en la toolbarset que estemos utilizando. Yo, p.e., he incluido el botón en la toolbarset default, al final:

FCKConfig.ToolbarSets["Default"] = [
    ['Source','DocProps','-','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteWord','-','Print'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    '/',
    ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
    ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','Rule','Smiley','SpecialChar'],
    '/',
    ['FontFormat','FontSize'],
    ['TextColor','BGColor'],
    ['FitWindow','ShowBlocks','-','Insertar_Html']
];

6. Conclusión
Este plugin es muy sencillo pero muy útil para aquellos proyectos en los que el usuario del FCKEditor no tiene conocimientos de HTML pero quiere incluir código de otras webs como pueden ser VIMEO, YouTube, Google Maps, Facebook. Cada día es más normal enlazar HTML en nuestras páginas y este plugin nos facilita la tarea.

Ejemplo: copio la localización de mi pueblo en google maps en la pantalla del plugin:

Al pulsar sobre Insertar HTML, se inserta el código donde tengo colocado el cursor:



Espero que os haya gustado este artículo. En breve más...

Control de acceso web "Dinámica de Tecleo"

Hace mucho, mucho tiempo que no escribo en el blog porque he estado muy ocupado pero al fin tengo un rato, así que, manos a la obra.

El artículo va sobre la seguridad y el control de acceso a aplicaciones web y quiero exponer un trabajo de investigación que realicé para un postgrado de la UNED, el control de acceso a aplicaciones web utilizando la dinámica de tecleo.

Podéis descargar los códigos y el script de creación de base de datos aquí.

Antecedentes
A la hora de control el acceso a recursos compartidos, se utilizan tres técnicas distintas, basadas en tres premisas:

• Algo que el usuario sabe: esta es la premisa para el 99% de sitios, el usuario conoce un login y un password. Lógicamente, si un atacante consigue obtener esa información podrá suplantar la identidad. Este es, por norma general, el método más inseguro puesto que existen numerosas técnicas para robar las claves y, además, los usuarios no suelen usar claves alfanuméricas complejas porque son difíciles de recordar.
• Algo que el usuario tiene: esta es la segunda premisa en la que el usuario es poseedor de algo que solo tiene él. Los sistemas que se basan en esto son los que utilizan tarjetas de coordenadas o certificados digitales, por ejemplo. Este sistema es más complicado porque se suele combinar con el primero y el atacante tiene que, o bien obtener una copia de lo que el usuario tiene o robárselo, además de obtener el usuario y la contraseña.
• Algo que el usuario es: esta es la última premisa y es en la que se basa la seguridad biométrica. Las personas disponemos de rasgos o de actitudes que nos hacen únicos en el mundo. Usando esos rasgos físicos o esas actitudes o comportamientos que están impresos en nuestro cerebro se pueden generar patrones de seguridad que son mucho más complejos de romper que los dos anteriores. Usando este tipo de técnicas, el atacante, tendrá que copiar rasgos físicos (iris, retina, huella dactilar, forma de mano,...) o comportamientos (firma caligráfica, dinámica de tecleo,...) algo que en algunos casos es imposible y en otros en muy complicado.

Lo ideal es la utilización de forma combinada de las tres técnicas para obtener un sistema de acceso lo más seguro posible. En este artículo voy a exponer una forma práctica de implementar un sistema de control observando la forma de teclear de los usuarios (dinámica de tecleo) para determinar si el usuario ha sido suplantado o no.

Dinámica de Tecleo
La dinámica de tecleo es una técnica que se basa en el principio de que la acción de escribir en el teclado una palabra o frase (contraseña) muy frecuentemente hace que el acto de escribirla se convierta en algo inconsciente y automático. Esto provoca que ese gesto sea característico nuestro porque influyen tanto procesos mentales que se convierte en una especie de huella dactilar. Los parámetros que se tienen en cuenta a la hora de mesurar la dinámica de tecleo son dos, el tiempo de pulsación de cada tecla y el tiempo entre pulsaciones. En base a estos dos parámetros se pueden crear patrones de comportamiento que nos pueden decir si un usuario es o no es quién dice ser, independientemente de que la contraseña sea correcta o no.

Diseño del sistema de control de acceso
Lo que vamos a hacer es un sistema mixto de control. Por un lado, el usuario va a tener que introducir su usuario y contraseña, se validarán las credenciales y además se controlará la dinámica de tecleo de la contraseña. Dicho tecleo se comparará con un patrón del usuario para ver qué probabilidad hay de que sea realmente nuestro usuario y no un suplantador. Hay que tener en cuenta que cuando hablamos de biometría siempre consideramos probabilidades y no certezas. A la hora de configurar el sistema tendremos que elegir cuál es el umbral a partir del cuál consideraremos que el usuario es un suplantador. Cuanto mayor sea ese umbral, mayor será la seguridad pero más falsos negativos dará y cuanto menor sea el umbral, menor la seguridad pero menos falsos negativos. Cada uno modificará este umbral para que se adecue a sus necesidades y pruebas.

En nuestro sistema vamos a tener 3 módulos diferenciados:

• Módulo de captura de datos: es el encargado de capturar los datos de pulsación y tiempo entre pulsaciones en el lado del cliente. Este módulo estará implementado en Javascript.
• Módulo de entrenamiento: parte del sistema encargada de generar el patrón con el que se comparan las muestras a identificar.
• Módulo de autenticación: parte encargada de decidir si un usuario es quién dice ser o no.

Generación del patrón
Lo primero es la generación del patrón para cada usuario. Tomemos por ejemplo, la palabra MANOLO, para la dinámica de tecleo tenemos que tomar las siguientes muestras:


Tomaremos una muestre para el tiempo de pulsación de cada letra y el tiempo entre pulsaciones. Para generar nuestro patrón tomaremos N muestras de la palabra clave MANOLO escritas por nuestro usuario, cada una de las muestras tendrá 2*n-1 posiciones siendo n el número de caracteres de la palabra. En este caso cada muestra o vector que guardamos tendrá 11 posiciones:

Una vez que disponemos de las muestras, tendremos que obtener un vector con las medias de cada posición y otro con las varianzas de cada posición.

El patrón del usuario será, por lo tanto, un vector de 11 posiciones con la media de cada uno de los tiempos de pulsación y tiempo entre pulsaciones y otro con un vector de 11 posiciones con las varianzas de cada uno de los tiempos. Este patrón lo almacenaremos en una base de datos para, posteriormente, poder realizar la comparación en el control de acceso.

Función de Scoring
La función de Scoring es la encargada de determinar el grado de similitud entre la clave introducida por el usuario que se quiere autenticar y el patrón almacenado en la base de datos.

Una vez obtenido el vector de valores SCORE, realizamos una media entre ellos para obtener un solo valor a comparar:

Este valor se comparará con el valor de UMBRAL definido en el sistema y determinará si el usuario es o no es quién dice ser.

Diseño Real del Sistema
Vamos a ver cómo, podemos diseñar en la vida real un sistema de control de acceso de este tipo. El flujo del sistema es el siguiente:


Para la implementación del sistema vamos a utilizar ASP.net (c#) como lenguaje de servidor, SQL Server como gestor de base de datos y Javascript para el control del tecleo.

Modelo de Base de Datos
En nuestro sistema vamos a tener dos tablas, una para la información de las claves del usuario y otra para almacenar los patrones:

Interfaz Web
Para nuestro ejemplo, se ha unificado en una sola interfaz el entrenamiento del sistema junto con el acceso al mismo:


El usuario tendrá que introducir su usuario y contraseña y, además, la frase de control que se ha utilizado para generar el patrón. En la parte de entrenamiento, el usuario puede ir introduciendo nuevas muestras, cuantas más muestras se tengan mayor será el acierto del sistema.

Cuando se pulsa sobre el botón "Acceder", el sistema devuelve en una pantalla tres valores:

• Score Total: valor devuelto por la función de Scoring teniendo en cuenta tanto el tiempo de pulsación como el tiempo entre pulsaciones.
• Score Pulsación: valor teniendo en cuenta solamente el tiempo de pulsación.
• Score Entre: valor teniendo en cuenta solamente el tiempo entre pulsaciones.

Lógica del Cliente
En el lado del cliente, se ejecuta la lógica necesaria para capturar los datos de las muestras y enviarlos al servidor. Estas funciones se encuentran en Javascript (ver los códigos del proyecto) y preparadas para los exploradores más utilizados. El flujo de llamadas es el siguiente:


Para el caso de la comprobación del acceso al sistema, las llamadas Javascript son las siguientes:


Lógica del Servidor
Toda la lógica de la generación del patrón, la comprobación del usuario y la generación de la función de Scoring se realiza en el servidor. La comunicación entre el cliente y el servidor se realiza mediante llamadas a un servicio web llamado DinamicaTecleo.asmx ell cuál dispone de dos métodos públicos: RecibirMuestras y ComprobarAcceso.

El método RecibirMuestras es el encargado de recibir las muestras, formatearlas y guardarlas en base de datos:

El método ComprobarAcceso es el encargado de comprobar que el usuario es quien dice ser o no. Este método devuelve los tres valores que se muestran por pantalla:


Los datos del patrón se almacenan en la base de datos de la siguiente manera:



Se guardan las muestras de entrenamiento para cada usuario separadas por comas, en una columna los milisegundos de pulsación de cada tecla y en la otra los milisegundos entre pulsaciones.

Conclusión
Las conclusiones que se obtuvieron con los individuos que realizaron las pruebas fueron que, efectivamente, la dinámica de tecleo es una buena técnica complementaria al control mediante usuario y contraseña. Para que el sistema sea efectivo, la fase de entrenamiento debe ser extensa para disponer de muchas muestras. También es bueno eliminar aquellas muestras muy alejadas de la media.
El sistema funciona de forma óptima cuando la frase de control se compone de letras y números sin sentido puesto que es cuando el cerebro tiene que pensar qué teclas pulsar y tiene que mover las manos de su posición natural. En el caso de frases con sentido es más fácil la suplantación porque la posición de las manos y la cadencia es más natural.

Un fallo que no pude resolver en el sistema se produce cuando el usuario escribe tan rápido que antes de soltar una de las teclas ya ha pulsado la siguiente, generando un tiempo de pulsación negativo. Mediante javascript no fui capaz de controlar ese caso y obtenía un error. Si alguien lo corrige le agradecería que lo comentara.

En fin, creo que la dinámica de tecleo es un sistema fácil y barato de control biométrico, no necesitamos aparatos externos ni inversiones en dinero. Puede introducirse de forma transparente en un sistema ya establecido y puede aumentar el nivel de seguridad exponencialmente.

Espero que os haya gustado este artículo.