Clic Captcha es un Captcha que simula el "juego de pares", hecho en php 5.3,
el Captcha muestra una imagen la cual debes seleccionar su imagen par en el grid de imagenes,
asi sucesivamente hasta finalizar la prueba
Se utiliza Magnific Popup para visualizar el grid de imagenes, es un lightbox que usa "iframe" con jquery 1.9.1:


Para que el grid funcione se requiere:
Archivos css:
<link rel="stylesheet" href="cliccaptcha/magnific-popup.css">
<link rel="stylesheet" href="page.css">

Archivos javascript:
<script src="cliccaptcha/jquery-1.9.1.min.js"></script>
<script src="cliccaptcha/jquery.magnific-popup.min.js"></script>
<script src="page.js"></script>

Se inserta en la pagina un "button" (boton) y un link "<a>"
Este es el codigo html:
<button id="validacion" type="submit" form="form1" value="Submit" onclick="OpenGrid()">Soy un robot ??</button>
<a id="myiframe" class="popup-iframe" href="cliccatpcha/index.php"></a>

En el archivo javascript de la pagina, "page.js", se incluye el codigo:
function OpenGrid(){
    $('#myiframe').click();
}
function CambiaBotonTxt(m){
    $('#validacion').html(m);
}
$(document).ready(function() {
    $.ajax({dataType:"json", url:"cliccaptcha/index2.php", data:{"ztxt":1}, success:function(d){CambiaBotonTxt(d["txt"]);}});
    $('.popup-iframe').magnificPopup({type:'iframe'});
});
Para usar este Captcha en los archivos PHP se hace referencia a la variable de sesion $_SESSION["pc"]["Valido"]
para evaluar el codigo de acuerdo a esta variable; su valor sera "true" si se finalizo el Captcha de manera completa
<? php
session_start();

if(!$_SESSION["pc"]["Valido"]){
    echo "No ha pasado la prueba del robot";
    exit();
}
?>


Ejemplo














Configuracion

 Es IMPORTANTE!! ajustar el tamaño del iframe y actualizar el directorio de imagenes
En el archivo "config.php" se encuentran las variables de sesion que sirven para configurar el Captcha:

$_SESSION["pc"]["DirData"]
Directorio donde se encuentra la base de datos "sqlite" y los archivos de idiomas

$_SESSION["pc"]["DirImages"]
Directorio donde se encuentran los archivos imagen que puede usar el grid

$_SESSION["pc"]["DirTempPair"]
Directorio donde se guarda temporalmente la imagen par

$_SESSION["pc"]["DirTempGrid"]
Directorio donde se guarda temporalmente las imagenes del grid visualizado

$_SESSION["pc"]["CacheClearPair"]
Cantidad de archivos acumulados de la imagen par en el directorio temporal antes de ser borrados

$_SESSION["pc"]["CacheClearGrid"]
Cantidad de archivos acumulados del grid en el directorio temporal antes de ser borrados

$_SESSION["pc"]["Rows"]
Cantidad de renglones del grid

$_SESSION["pc"]["Cols"]
Cantidad de columnas del grid

$_SESSION["pc"]["Pasos"]
Numero de veces que se visualizara y validara el grid antes de que el usuario sea aceptado

$_SESSION["pc"]["CaptchaLive"]
Vida en segundos del Captcha siendo aun valido en la base de datos

$_SESSION["pc"]["CaptchaWait"]
Segundos de espera para dar clic en el grid antes de invalidar el Captcha

$_SESSION["pc"]["CaptchaTimeSecs"]
Tiempo en segundos en que si se da clic al grid la imagen seleccionada no sera valida,
esto sirve para evitar la automatizacion de algun robot dando clicks rapidos

$_SESSION["pc"]["language"]
Idioma de los textos mostrados en el proceso del Captcha
Disponible dos idiomas: es=español, eng=ingles
Los archivos de idioma se encuentran en el directorio "data"
Ejemplo: el idioma español esta contenido en el archivo "lang-es.php"

$_SESSION["pc"]["ClickErrorsMax"]
Cantidad de clicks fallidos para que el Captcha haga reset desde cero (Pasos)
Por seguridad se recomienda dejar su valor en 1

Dimension de iframe

 El iframe de Magnific Popup ocupa casi toda la pantalla, para adaptarlo al tamaño del grid se
cambian las dimensiones en el archivo "magnific-popup.css":

Se ajusta width, height y left hasta que el contenido este centrado

Opciones de ejecucion

path/to/captcha/index.php?do=update
Escanea el directorio de imagenes para actualizar la base de datos
Se debe ejecutar cada vez que el directorio de imagenes cambie, si se agrega o elimina alguna imagen
Ver variables de configuracion:
$_SESSION["pc"]["DirImages"]

path/to/captcha/index.php?do=clean
Borra todo el contenido caduco de los directorios temporales del grid e imagen par
Ver variables de configuracion:
$_SESSION["pc"]["CacheClearPair"]
$_SESSION["pc"]["CacheClearGrid"]


Descarga

DescripcionArchivo
Codigo phpcliccaptcha.zip
Conjunto de imagenes #1 (500 archivos)imagenes1.zip
Conjunto de imagenes #2 (500 archivos)imagenes2.zip
Tu DONATIVO ayuda a mantener la pagina web
* Los conjuntos de imagenes ya estan modificadas en su dimension

Los conjuntos de imagenes se descomprimen y los archivos se mueven al directorio de imagenes: "path/to/captcha/imagenes/"
despues se actualiza la Base de Datos, para esto ejecute: path/to/captcha/index.php?do=update


Licencia

 Puedes incluir y modificar el codigo en cualquier proyecto pero no puedes cobrar dinero por el codigo del Captcha
Referente a los conjuntos de imagenes, son imagenes gratis de acuerdo al sitio pixabay.com

© 2021  jcarrascochih@gmail.com