.NET Tutorial 49. Crear un sistema de captcha para un sitio WEB

Hoy vamos a ver que implementar nuestro propio sistema de captchas es tremendamente simple.

Lo primero que haremos será diseñar nuestra Default.aspx. Un control imagen, una caja de texto, un validator, un botón y una etiqueta bastarán para ilustrar este tutorial:


(haz click para ampliar)

En el code behind lo unico que tendremos es el código del evento "Click" del botón Validar:


(Haz click para ampliar)

El código es tremendamente simple: Si el texto que has introducido es igual que el valor del captcha se mostrará "El código es correcto!!!" y si no se mostrará "El código de verificación no es correcto" ¿Simple verdad?

La imagen del captcha la genera la página captcha.aspx donde básicamente tenemos lo siguiente:

Response.ContentType = "image/jpeg"
Response.Clear()
Response.BufferOutput = True

Dim bmFinal As Bitmap
Dim g As Graphics = Graphics.FromImage(bmFinal)

g.DrawString (…)

Session.Add("Captcha", ValorCapcha)

bmFinal.Save(Response.OutputStream, ImageFormat.Jpeg)

Response.StatusCode = 200
Response.Flush()

Al ejecutar la aplicación se carga la imagen que genera el captcha en nuestro control ImgCaptcha, puesto que tenemos esto en nuestra página Default.aspx:

<asp:Image ID="ImgCaptcha" runat="server" ImageUrl="~/captcha.aspx" />

Bien, ejecutamos la aplicación:

Introducimos mal el captcha y pulsamos el botón "Validar":

Podemos ver que efectivamente, se nos muestra que el código que acabamos de introducir no es el correcto.

Ahora introducimos el código correcto y pulsamos de nuevo el botón "Validar":

y voilá! 🙂

 

Dudas, preguntas, comentarios, en el botón de abajo

 

Saludos.
mov eax,ollydbg; Int 13h 

 

Descargar código fuente del .NET Tutorial 49
(62 KB. Visual Studio 2008) 

Sistema de firmas para blogs y foros

Os presento una cosilla en la que he emepezado a trabajar y que se aparta totalmente de mi que hacer diario.

Se trata de un generador de firmas para usar en un blog, foro, página web, etc.

Por el momento está aún muy verde y  faltan cosas por pulir, pero la idea original era (y es) que fuese totalmente gratuito, con posibilidad de que los propios usuarios suban sus propios fondos de firmas.

Aprovecho la oportunidad que me brinda Gamefilia  para pediros consejos y/o sugerencias.

Por el momento el sistema de invitaciones aún no está disponible, pero si alguien está interesado en participar que me envie un MP al perfil de meristation o que deje un comentario por aquí, en dicho caso adjuntar un fichero con su "nombre" (de no más de 200 x 40 pixels y preferiblemente en formato *.png)

Cuando me refiero a un fichero con su "nombre" me refiero a algo como esto:

Existen dos tipos de firmas:

  • Firma dinámica
  • Firma estática

La firma dinámica se genera cada vez que se "llama"
La firma estática es un fichero *.jpg que se genera únicamente cuando se ha "llamado" a la firma dinámica.

Esto es así puesto que muchos blogs y/o foros únicamente permiten BBCodes y no permiten usar etiquetas HTML.

De esta forma, podremos usar una firma estática en la Zonaforo de MeriStation por ejemplo, ya que el HTML está desactivado para los mortales.

 

Firmas estáticas

Actualmente se permiten hasta un total de 5 distintas firmas estáticas, donde podremos configurar:

  • Si el fondo es aleatorio o se usa un fondo fijo
  • El tamaño de la firma
  • Ver u ocultar la geolocalización
  • Ver u ocultar el contador de firmas

De esta forma, si varios blogs / foros sólo permiten BBCodes, podemos tener una firma estática para el foro "A", otra distinta para el foro "B", otra para el foro "C", y así hasta 5
(y por el … te la …   si, ya sé 🙂 .

Como he indicado antes las firmas estáticas son ficheros *.jpg. Para usarlas en estos foros que unicamente permiten BBCodes tendríamos que hacer esto:

[img]dirección de la firma estática[/img]

Por ejemplo, si quiero usar la firma estática número 1 y mi usuario se llama ollydbg lo que tendríamos que poner es esto:

[img]http://www.transitopesado.com/prosign/static/ollydbg1.jpg[/img]

El resultado sería este:

Para la firma estática 2 tendría que hacer esto:

[img]http://www.transitopesado.com/prosign/static/ollydbg2.jpg[/img] 

El resultado sería este:

En mi caso paraticular tengo que:

– Firma 1:

  • El fondo es aleatorio
  • Se muestra la geolocalización de la última firma "dinámica"
  • Se muestra el contador

– Firma 2:

  • El fondo es fijo
  • No se muestra la geolocalización
  • No se muestra el contador

 

Firma dimámica

Tal y como apuntamos anteriormente, la firma dinámica requiere el uso de etiquetas HTML, en concreto de la etiqueta <img src=… />

Dentro de dicha etiqueta hay que llamar a la página web que genera la firma "on the fly", a dicha página se le pueden pasar los siguientes argumentos:

  • name (obligatorio)
  • bgid (opcional)
  • showcnt (opcional)
  • resizewh (opcional)

name

Este argumento indica la firma de "quien" se va a generar la firma. Es  el único argumento que es obligatorio.
Si el "quien" no existe no se genera ninguna firma.
Ejemplo de uso: name=ollydbg

bgid

Este argumento es opcional. Si no se indica este argumento o es igual a 0 se utilizará un fondo aleatorio para la firma.
Por ejemplo, si queremos que la firma siempre tenga el fondo número 44 usaremos este argumento así: bgid=44

Podéis consultar los fondos disponibles en los enlaces del final de este post

showcnt

Este argumento es opcional. Si no se indica este argumento siempre se visualizará el contador en el pie de la firma. Si no quieres que se muestre el contador en la firma deberás especificar showcnt=0

Aunque establezcas showcnt=0 internamente se seguirá acumulando el contador, lo único que no se reflejará en la firma.

resizewh

Este argumento es opcional. Si no se indica este argumento, la dimensión de la firma será siempre de 490 x 150 pixels, que por otro lado es el tamaño máximo permitido

En caso de querer un determinado tamaño hay que usar este argumento así:

resizewh=420,129

Esto fuerza que la firma tenga un tamaño de 420 x 129 pixels

Debéis tener en cuenta que no se aplicará ninguna corrección al "aspect-ratio". Tener esto en cuenta para no "deformar" las firmas.

El tamaño mínimo es de 256 x 78 pixels. Un tamaño menor que éste provoca que la firma no se redimensione.

 

Bien, ahora vamos a ver como usar estos argumentos en una etiqueta HTML para generar la firma dinámica.

La página que tendremos que llamar dentro de <img src=… /> es la siguiente:

http://www.transitopesado.com/prosign/display.aspx

Los argumentos se los pasaremos como indico a continuación.
Ejemplo 1: Crear una firma dinámica para ollydbg:

<img src="http://www.transitopesado.com/prosign/display.aspx?name=ollydbg" width="490" height="150" />

Ejemplo 2: Crear una firma dinámica para ollydbg y que el fondo sea siempre el número 44:

<img src="http://www.transitopesado.com/prosign/display.aspx?name=ollydbg&bgid=44" width="490" height="150" />

Observación sobre el lenguaje HTML: El primer parámetro siempre va precedido del símbolo ?, mientras que el resto de parámetros siempre van precedidos del símbolo &

El orden de los parámetros es indistinto, puedes usar el parámetro name antes o después que cualquier otro y con el resto igual, no tienen un "orden" fijo:

Ejemplo 3: Crear una firma dinámica para ollydbg pero con un tamaño de 420 x 129 pixels:

<img src="http://www.transitopesado.com/prosign/display.aspx?name=ollydbg&resizewh=420,129" width="420" height="129" /> 

Ejemplo 4: Crear una firma dinámica para ollydbg, con el fondo 44, de un tamaño de 420 x 129 pixels y que no muestre el contador:

<img src="http://www.transitopesado.com/prosign/display.aspx?name=ollydbg&bgid=44&resizewh=420,129&showcnt=0" width="420" height="129" />  

 

Bien, llegados a este punto y como los blog de Gamefilia si que permiten etiquetas HTML ( bieeenn!!!! 🙂 es hora de usar nuestra firma dinámica.

Are you ready?

3
2
1
GO:

Ollydbg ProSignature

Cada vez que refresques esta página, se genera la firma dinámica.

En teoría la firma 1 estática también debería cambiar puesto que en este mismo post hay una firma dinámica que crea la/s firmas estáticas cada vez que se "llama" a la firma dinámica.

Por último indicar que la página del proyecto es esta:

http://prosign.transitopesado.com/

 

Lo dicho, dudas, sugerencias, como colaborar, en el botón de abajo 🙂

Saludos.
mov eax,ollydbg; Int 13h   

 

Actualización 31 de julio

 

La página del proyecto ya está completamente operativa y lista para nuevos registros.

Al final he quitado el tema del sistema de  invitaciones y ahora se puede registrar cualquiera, sin tener invitación.

He estado cambiando cosillas en el tema de la identificación del ISP, nombres con acentos y alguna cosa más.Al registrarse se tiene acceso al "panel de control" donde se pueden configurar las firmas.

Así por ejemplo este es el apartado de "Firma dinámica":


(haz click para agrandar)

Aquí se puede configurar y mostrar la etiqueta HTML que podréis copiar y pegar en aquellos blogs / foros donde sí permitan el uso de etiquetas HTML

En el apartado "Firma estática" se podrán configurar hasta 5 firmas:


(haz click para agrandar)

Se puede generar la/s firma/s estática/s y se muestra la etiqueta en formato BBCode que podréis copiar y pegar en auqellos blogs/foros donde únicamente se permitan etiquetas de tipo BBCode.

Vuelvo a repetir que las firmas estáticas se generan automáticamente cada vez que se visualiza una firma dinámica en cualquier blog/foro.

También está disponible la opción desubir una serie de "nombres":

Cuando se produce un nuevo registro el nombre del usuario aparece escrito en la parte superior derecha con un tipo de fuente "estándar" (Verdana en este caso)

Sin embargo desde esta opción del panel de control se podrán subir (y tambien borrar) "nombres" en formato *.png.

Estos nombres se usarán siempre de forma aleatoria, esto quiere decir que en una firma se usará un determinado "nombre" y en la siguiente otro "nombre" de forma aleatoria.

Estos archivos los podeís generar con el Photoshop, The Gimp, Paint.NET o cualquier otro programa de dibujo, incluso desde páginas del estilo CoolText.com, en especial este asistente (Glossy Logo) genera unos nombres bastante resultones.

La opción de "nuevo fondo" aún no está implementada. La idea es que cada usuario pueda subir sus propios fondos de firmas y compartirlas con el resto de usuarios. Como diría "aquel"…estamos trabajando en ello.

Y por último pero no menos importante tenemos la "galería de fondos":


(Haz click para agrandar)

Aquí se mostrarán todos los fondos disponibles, tanto los que son comunes a todos los usuarios como los que hayas subido desde la opción "nuevo fondo"

La galería va creciendo y a fecha de escribir esta actualización hay 122 fondos disponibles para las firmas.

Bueno, pues de momento esto es todo. Si alguien aún tiene alguna duda o crítica o lo que sea, puede dejar un comentario.

 

Saludos.
mov eax,ollydbg; Int 13h    

 

    .NET Tutorial 48. Usar un teléfono móvil para controlar aplicaciones .NET desde cualquier parte del mundo

    Posiblemente al leer el título de este tutorial más de uno/a estará pensando:

    ey primoh, pásame algo de eso que fumas, que parece bueno 😉

    En realidad lo que haremos es más simple de lo que parece. Vamos a implementar un pequeño servidor Web en nuestro PC.

    Existen multitud de servidores Web, posiblemente los más conocidos sean Apache y el IIS (Internet Information Services)

    Sin embargo, lo que nosotros pretenderemos es que nuestra aplicación además de lo que tenga que hacer, incorpore un servidor Web.

    Actualmente existen muchas aplicaciones que tienen esta característica.

    A bote pronto recuerdo por ejemplo que el gestor de descargas µTorrent tiene un servidor web integrado. De esta forma se pueden controlar las descargas desde otro PC/dispositivo (teléfono móvil por ejemplo) que tenga conexión a internet y un navegador Web cualquiera (IExplorer, Firefox, Chrome, Opera…)

    Pues bien, lo que haremos será precisamente eso. Hemos creado una aplicación que permite crear y eliminar una serie de tareas. Lo que hace la aplicación es una mera excusa para ver lo que se puede llegar a hacer con un poco de pericia.

    Nuestra aplicación básicamente es esta: 

    Al pulsar en el botón Nueva se muestra un input box que nos pide el nombre de la Tarea: 

    Las tareas se guardan en un List (Of strings) y se muestran en un Listbox: 

    Como véis, la aplicación es totalmente "inútil", pero sirve perfectamente para mostrar el funcionamientdo de un servidor Web hiper-simple

    Observaréis que encima de la lista de tareas se muestra esto:

    Web server en http://localhost:3333

    Cuando ejecutamos la aplicación se crea un "servidor web" que está a la escucha por el puerto 3333

    Si abrimos nuestro navegador de internet y escribimos la siguiente dirección en la barra de direcciones:

    http://localhost:3333

    Ocurre lo siguiente:


    (Haz click para agrandar)

    WTF?

    Lo que se está mostrando es la página principal (index.htm) de nuestro servidor Web "casero".
    Como podéis observar se muestran las mismas tareas que tiene el ejecutable
    Desde esta página web se pueden crear nuevas tareas o eliminar una tarea existente.

    Pulsamos en el link "Nueva Tarea" y se nos muestra la página (nuevo.htm):


    (Haz click para agrandar)

    Escribimos el nombre de la tarea, por ejemplo Crear nuevo tutorial y pulsamos en el botón Crear.

    Automáticamente se vuelve a mostrar la página principal de nuestro servidor Web:


    (Haz click para agrandar)

    Y observamos que efectivamente, hay una nueva tarea llamada Crear nuevo tutorial

    Lo bueno viene ahora, si ahora vamos a nuestra aplicación observamos que allí también está la tarea que creamos desde la página web: 

    Vamos a ver que ocurre cuando eliminamos una Tarea desde la página Web.

    Seleccionamos la tarea que queremos eliminar, por ejemplo Comprar malacatones y  pulsamos en el botón Eliminar:


    (Haz click para agrandar)

    Al volver a la pantalla principal observamos que la tarea Comprar malacatones efectívamente ya no está:


    (Haz click para agrandar)

    Pero tampoco está en nuestra aplicación: 

    Vuelvo a recordar que aquí no hay "bases de datos" ni nada parecido.

    El servidor Web únicamente actúa como un interfaz para controlar una aplicación de Windows.

    Al igual que se crean / borran tareas, puedes hacer lo que se te pase por la imaginación, por ejemplo, yo que sé, imagina que tienes conectado al PC un dispostivo "domótico" controlado por una aplicación de Windows. Podrías encender las luces accediendo a un navegador Web.

    Por raro que parezca todo esto se hace en apenas 20 líneas de código gracias a la clase HttpListener que está dentro del Namespace System.Net

    Las páginas index.htm y eliminar.htm se modifican "en tiempo de ejecución" para mostrar las tareas que contiene la aplicación.

     

    Vale, llegados a este punto, más de uno/a se estará preguntando:

    Si, muy bien,  pero tú dijiste usar un teléfono móvil para controlar aplicaciones, y yo  no veo ningún teléfono móvil por ningún lado :S

    Aix…no estamos atentos, eh? 🙂

    Nuestra aplicación está actúando de servidor Web
    Lo único que tenemos que hacer son dos cosas:

    • Tener un móvil que se pueda conectar a internet (iPhone, móvil con Android, WP7, etc)
    • Abrir y redirigir el tráfico del  puerto de nuestro servidor Web en nuestro router

    Opcionalmente también estaría bien tener algún servicio tipo No-IP o DynDNS que convierten nuestras IP públicas dinámicas en direcciones IP "fijas"

    Muchos routers nuevos (y algunos no tan nuevos) ya tienen incorporado estos servicios por lo cual no hace falta descargarse ningún software.

    Supongamos que tenemos una cuenta en DynDNS con el siguiente nombre: http://xxxxxblabla.dyndns.info/

    Pues bien, dejamos corriendo nuestra aplicación del Tutorial 48, abrimos los puertos en el router, nos cogemos nuestra bicicleta de montaña y nuestro HTC y nos vamos a dar una vuelta por la Sierra de Gredos.

    Cuando estamos en el Alto del Mirlo, cogemos nuestro HTC, abrimos el Opera Mini y escribimos: http://xxxxxblabla.dyndns.info/

    y voliá:

    Damos de alta una nueva tarea a la que llamamos "desde el movil"

    Al regresar a casa, observamos que efectivamente, la tarea está en nuestra aplicación: 

     

    WTF!!!!!  🙂

    PD: por cierto, en la barra de direcciones probar de poner una página que no exista, por ejemplo: http://localhost:3333/blablabla.htm

    😀 😀 😀 

     

    Tags: httplistener, servidor web .net, simple web server .net, c#, httplistener asíncrono, web server, httplisterner and POST, get POST response httplistener

     

    Saludos.
    mov eax,ollydbg; Int 13h    

     

    Descargar proyecto .NET Tutorial 48
    (44 KB. Visual Studio 2008 Professional) 

    Nota: El proyecto ha de cargarse en Visual Studio 2008 como "ejecutar como administrador", de lo contrario se producirá una excepción cuando se inicie el httplistener.

    Otra opción es dar permisos al servidor local mediante el comando: netsh http add urlacl url=http://+:3333/MyUri user=DOMAINuser tal y como se indica en la MSDN: http://msdn.microsoft.com/en-us/library/ms733768.aspx