← 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>
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.