Añadir la protección de BotDetect CAPTCHA usando PHP

Comience descargando el ejemplo de proyecto de BotDetect CAPTCHA con PHP.

• LanapBotDetectHandler.php
• Renderizando una imagen CAPTCHA
• Usando audio en un CAPTCHA
• Cargando nuevamente la imagen CAPTCHA
• Validando el ingreso del usuario

LanapBotDetectHandler.php

El siguiente ejemplo utiliza LanapBotDetectHandler.php, este archivo PHP sirve para ayudarle a incorporar un CAPTCHA fácilmente a sus proyectos en php.

Este archivo utiliza el control BotDetect CAPTCHA COM para crear imágenes CAPTCHA aleatorias, cada vez que se dibuja la página. Usted puede usar este archivo tal como se entrega, sin modificaciones ni cambios, para sus proyectos.

¡Siempre use el método POST!

El código PHP que invoca a LanapBotDetectHandler.php debe estar dentro de un formuladio <form> que utilice el método POST.

[arriba]

Renderizando una imagen CAPTCHA

La forma más simple de mostrar la imagen CAPTCHA (usando los parámetros por defecto) en su página php es definiendo un objeto <img> así:

<img src="LanapBotDetectHandler.php?Command=CreateImage" 
  alt="CAPTCHA image" id="CaptchaImage" />
    

Con Botdetect instalado, el archivo LanapBotDetectHandler.php debería estar en la misma carpeta de su formulario, el último fragmento de código genera una imagen que debería verse similar a la siguiente:

Configurando parámetros adicionales de la imagen CAPTCHA

Si usted quiere configurar parámetros adicionales (como por ejemplo el tamaño, tipo, entre otros) sólo debe especificar esto en la cadena de solicitud de la imagen. Por ejemplo:

<img src="LanapBotDetectHandler.php?Command=CreateImage&
  TextStyle=28&ImageWidth=300&imageHeight=40&CodeLength=7&
  CodeType=1&Format=PNG" alt="CAPTCHA image" id="CaptchaImage" />

La imagen resultante tendrá un aspecto similar al siguiente:

Todos los otros parámetros (aparte de ?Command=CreateImage) son opcionales, y si uno de ellos no es proporcionado, se utilizará un valor por defecto.

Por ejemplo, el parámetro TextStyle especifica que algoritmo será usado para generar el dibujo del CAPTCHA (uno de los 50 algoritmos incluídos en BotDetect CAPTCHA). Puede encontrar una lista de todos los valores válidos, ejemplos y capturas de pantalla en la página de referencia de TextStyle.

Para más información sobre todos los parámetros disponibles, vea la documentación de Componentes de Interfaz de BotDetect.

[arriba]

Usando audio en un CAPTCHA

Si desea utilizar un sonido para mejorar la accesibilidad de su CAPTCHA, la forma más simple de hacerlo es así:

<a href="LanapBotDetectHandler.php?Command=CreateSound">
  <img src="speaker.gif" alt="Play Sound" style="border:0;" />
</a>
    

Una imagen de un altavoz aparecerá que al hacerle clic ejecutará un sonido que representa el texto del CAPTCHA. Puede también utilizar un enlace de texto (como "Reproducir sonido") o incluso otra imagen si así lo desea.

Usando JavaScript para ejecutar el audio del CAPTCHA

El último ejemplo del uso del audio no es muy elegante- abre el sonido con las letras o números del CAPTCHA directamente, preguntándole al usuario si desea abrir o guardar el archivo de sonido.

Sería mucho mejor que el sonido se reproduciera automáticamente como sonido de fondo al hacer clic sobre el altavoz, siempre y cuando el navegador del usuario lo soporte. Veamos el siguiente código:

<a href="LanapBotDetectHandler.php?Command=CreateSound" 
  onclick="LBD_LoadSound('soundPlaceholder', 
    'LanapBotDetectHandler.php?Command=CreateSound'); 
    return false;">
  <img src="speaker.gif" alt="Reproducir sonido" style="border:0;" />
</a>
<div id="soundPlaceholder" style="visibility:hidden; border:0; 
  width:0; height:0;"></div>
    

El ejemplo utiliza BotDetectScript.js, un código Javascript que carga automáticamente el sonido del CAPTCHA a la página, y lo reproduce en segundo plano (los archivos .wav se abren generalmente en Windows Media Player sobre IE, o con QuickTime para Firefox, Opera o Safari).

El mismo script funcionará para clientes con navegadores que no soporten Javascript, comportándose como en el primer caso en donde el usuario debe descargar el archivo, así es fácil abarcar el máximo de audiencia.

[arriba]

Cargando nuevamente la imagen CAPTCHA

Si desea incorporar un botón para cargar nuevamente la imagen del CAPTCHA, el código JavaScript incluído en BotDetectScript.js contiene un método para hacerlo. La función LBD_ReloadImage function usa un identificador, para cargar nuevamente el elemento <img>:

<a href='#' onclick='LBD_ReloadImage("CaptchaImage"); return false;' 
  title="Change the code">
    <img src="reload.gif" alt="Cambiar el código" />
</a>

[arriba]

Validando el ingreso del usuario

En un escenario típico de uso, el usuario tendrá un código en una imagen CAPTCHA que deberá escribir en un cuadro de texto. Luego de recibir y comprobar el código, podremos decir si la validación es correcta o no. El método Validate del componente BotDetect CAPTCHA compara el código codificado (hash) con el código correspondiente.

<?php
session_start();
  
$result = false;
$codeKey = "LanapBotDetectCode";
// TODO: read the input from the submitted text box value
$inputCode = $_REQUEST["CaptchaCode"];

if (isset($_SESSION[$codeKey])) {
  $code = $_SESSION[$codeKey];
  $result = (0 == strcasecmp($inputCode, $code));
  // each Captcha code can only be validated once
  unset($_SESSION[$codeKey]);
}

if(!$result) {
  // TODO: the user entered an invalid value
  $redirect_url = "INCORRECT_INPUT_PAGE.PHP";
  header("Location: $redirect_url");
}
?>    

[arriba]