cargando...

← return to "open source examples"

Captcha (de captchator.com) usando AJAX mediante jQuery

Captcha (from captchator.com) with AJAX using jQuery

Esta implementación puede ser aún más segura si se encripta y se decripta la llave con algún algoritmo original adentro de los archivos en PHP.

This implementation can be even more secure if the key is passed through a crypto algorithm inside the PHP files.

Ingresa el texto de la imagen:

Enter the text shown on the image:

Código fuente:

Source code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css">
      body{  margin: 0 none; padding: 0 none; font-family: Arial,Verdana,sans-serif; letter-spacing: -0.8px; }
      .cont{ margin: 20px; }
      .cont h3{ font-size: 16px; }
      .cont h2{ font-size: 18px; }
      .cont p{ font-size: 14px; }
      button { font-size: 13px; background: #eee; font-weight: 600; padding: 3px 6px 3px 6px; height: auto; text-align: center; border: solid 1px gray; }
      input { font-size: 13px; background: #eee; border: solid 1px gray; padding: 3px 6px 3px 6px; height: auto; width: 140px; }
      #cc{ margin: 100px 0 0 0; font-size: 10px; color: #aaa; letter-spacing: normal; }
      #cc a{ color: #777; text-decoration: none; }
      #cc a:hover{ text-decoration: underline; }
      .codigo{ font-size: 14px; font-family: "Monaco",Monaco,courier,sans-serif; margin: 20px; padding: 10px; border: solid 1px gray; background: #EEEEEE; }
    </style>
    <title>luispulido.com - CC - Captcha (de captchator.com) usando ajax (con jQuery)</title>
  </head>
  <body>
    <div class="cont">
      <h2>Captcha (de captchator.com) usando AJAX mediante jQuery</h2>
      <p>Esta implementación puede ser aún más segura si se encripta y se decripta la llave con algún algoritmo original adentro de los archivos en PHP.</p>
    <div id="imagen_captcha"></div>
    <button id="recarga">generar otra imagen</button>
    <h3>Ingresa el texto de la imagen:</h3>
    <div id="forma">
      <input type="text" id="captcha_answer" name="captcha_answer" />
      <button id="verifica">verifica</button>
    </div>
    <div id="resultado"></div>

    </div>
    
    <script type="text/javascript" src="scripts/jq.js"></script>
    <script type="text/javascript">
    /**
    * Implementación con Ajax usando jQuery del servicio de Captcha de captchator.com
    * @author Luis Pulido <luis@luispulido.com> <http://luispulido.com> <http://twitter.com/pulidoman>
    * @pubdate Friday, August 7th, 2009
    * @license 
    */
    /* guarda el key para enviar a captchator.com .. vendría bien encriptar y desencriptar en el php. */
      var capid = null;
    /* se convierte en verdadero cuando la prueba se ha pasado... esto puede remplazarse por otro método de bandera */
      var pasa = false;
    
    /**
    * Función que llama a captchator.com con un id generado por el archivo __captchaGenera.php
    * a la cual le pasamos el parámetro guass=up para evitar que en IE sea "cacheado".
    * El código fuente de __captchaGenera.php genera un id de manera aleatoria en el formato requerido
    * para captchator.com: 15 caracteres (A-Z , a-z , 0-9 , "," (coma) y "-" (guion))
    */
      function generarCaptcha(){
        $("#imagen_captcha").html('cargando...');
        $.getJSON("__captchaGenera.php?guass=up", function(json){
          $("#imagen_captcha").html('<img src="http://captchator.com/captcha/image/' + json.id + '" />');
          capid = json.id;
        });
      }
    /**
    * Cuando el documento está listo
    */
      $(document).ready(function(){
        /* generamos el captcha */
        generarCaptcha();
        /* si el botón de "verifica" es presionado */
        $("#verifica").click(function(){
          /* se guardan los datos en "datos": capid tiene el id generado, y captcha_answer es el campo de respuesta del usuario */
          var datos = "captcha_id=" + capid + "&captcha_answer=" + $("#captcha_answer").val();
          /** 
          *    Se hace un llamado a __captchaVerifica.php el cual hace lo siguiente:
          *
          *    1. Recibe los datos: capid, y captcha_answer
          *    2. Hace un preg_replace para asegurarnos que el capid sea correcto (ver la documentación) de
          *       captchator.com para más detalles
          *    3. Llama a http://captchator.com/captcha/check_answer/{ el capid }/{ la respuesta del usuario}
          *       y verifica si regresa 1 (correcto) mediante implode file.
          *
          *    El php regresa "ok" si es correcto o "not" si no. Con jQuery mostramos la información.
          */
          $.post("__captchaVerifica.php", datos, function(data){
            if(data.res == 'ok'){
              $("#resultado").html('<h3 style="color: green">Ok</h3>');
              pasa = true;
            }
            else if(data.res == 'not'){
              $("#resultado").html('<h3 style="color: red">Incorrecto. Por favor intente de nuevo.</h3>');
              generarCaptcha();
            }
            else{
              $("#resultado").html('<h3 style="color: red">Hubo un error inesperado. Recargue la página.</h3>');
            }
          }, "json");
        });
        /* Si se da click en recarga, se genera un nuevo captcha y se despliega */
        $("#recarga").click(function(){
          generarCaptcha();
        });
      });
    </script>
  </body>
</html>

		
Creative Commons License
Implementación de Captchator.com using ajax with jQuery by Luis Pulido is licensed under a Creative Commons Attribution-Share Alike 2.5 Mexico License.
Based on a work at luispulido.com.
Permissions beyond the scope of this license may be available at http://twitter.com/pulidoman.