CAPTCHA con immagini
Per evitare abusi da parte dei vari programmi robots, si cerca di creare nei form un campo che sia compilabile solo da un umano. Generalmente si usa un codice con lettere e
cifre grafiche spesso ruotate, sfuocate, distorte, confuse da linee colorate, punti, eccetera. Questo sistema si chiama CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart, ovvero Test di Turing pubblico e completamente automatico per distinguere computer e umani).
Mia proposta di CAPTCHA con immagini
Recentemente ho visto su qualche sito un captcha molto carino, con varie immagini di fiori od animali ed il suggerimento di cliccare su un particolare gruppo di cui una immagine fa parte.
Ho provato a realizzarlo e vi presento qui il risultato. Ho scelto sei animali con i relativi gruppi zoologici di appartenenza (equini, uccelli, felini, ecc..)
Il codice richiede un minimo di Javascript e funziona così:
Oltre ai campi del modulo, che qui non ci interessano, vi è il campo captcha con le foto di sei animali.
Viene deciso in modo random quale sarà il gruppo relativo all'immagine da cliccare, scegliendolo dall'array $typ. Questo indice dell'array viene memorizzato nel campo nascosto 'valoreok'.
Quando l'utente clicca sull'immagine del tipo di animale richiesto, al click sull'immagine viene attivata la semplice funzione allerta() a cui viene inviato l'indice dell'array corrispondente alla figura scelta. La funzione memorizza l'indice nel campo nascosto 'result'.
Quando l'utente invia il form, dopo avere compilato sia i campi specifici del modulo che scelta l'iimagine richiesta dal captcha, viene eseguito un controllo sulle due variabili $_POST['valoreok'] e $_POST['result'] dopo averle filtrate con htmlentities per evitare eventuale codice malizioso introdotto dall'utente (guai a fidarsi dei dati che vengono da fuori!!!).
Se i due valori sono uguali, allora vengono presentati i dati introdotti ed anch'essi filtrati.
In caso contrario viene generato un messaggio d'errore.
Potete modificare facilmente il codice per le vostre necessità, grazie ai commenti messi nei punti chiave.
Il codice e le figure già pronti per funzionare li potete scaricare da qui come file zippato. (downloads 1680).
Li dezippate in una cartella del server locale PHP (webpages per xitami e htdocs per XAMPP) e potete iniziare a sperimentare.
Funziona sia con le ultime versioni del PHP 4 che in PHP 5.xx Il codice ha una minima e bruttina formattazione che lascio a voi migliorare e completare.
Chi ha bisogno di chiarimenti e chi trova errori o problemi, mi può scrivere e cercherò di rispondere a tutti.
mostra/nascondi il codice di captcha.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>CAPTCHA con Immagine</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<STYLE type='text/css'>
#main{width: 300px ; margin-left: auto ; margin-right:auto;border:1px dotted blue;text-align:center;}
.cornice{width:70px;height:150px;border:1px dotted #FFFFFF;margin:3px}
</STYLE>
<SCRIPT language='javascript' type="text/javascript">
function allerta(f){
a = new Array('rana','cane','cavallo','gatto','gallina','coccodrillo');
document.captcha.result.value=f;
document.getElementById("qui").style.fontSize='20px';
document.getElementById("qui").style.color='#FF0000';
if(document.images[f].border==1){
document.images[f].border=3;
for(i=0;i<a.length;i++){
if(i!=f)
document.images[i].border=1;
}
}
else
if(document.images[f].border==2)
document.images[f].border=1;
g=eval(f)+1;
an=a[f];
/*
la riga che segue serve solo per mostrare il funzionamento dello script.
Nell'uso pratico puo' essere eliminata.
In tal caso togliere anche la riga di inizializzazione
dell'array all'inizio della funzione [a = new Array(...)]
*/
document.getElementById("qui").innerHTML="hai cliccato su <B><I>" + an + "</I></B>";
}
</SCRIPT>
</HEAD>
<BODY>
<?php
$fig=array('rana','cane','cavallo','gatto','gallina','coccodrillo');
$typ=array('anfibio','canide','equino','felino','uccello','rettile');
$anim = rand(0,count($fig)-1); // decide l'animale di riferimento
?>
<DIV id='main'>
<?php
if(!isset($_POST['submit'])) { // mostra il form
?>
<FORM action='index.php' method='POST' style='display:inline' name='captcha'>
<B>Introduci i dati richiesti</B><br>
il tuo nome <INPUT type='text' name='nome'><br>
il tuo indirizzo <INPUT type='text' name='indirizzo'><br>
....<br>
altri campi del form<br>
....<br>
<B>clicca su un <?php echo $typ[$anim] ?></B><br>
<?php
for($i=0;$i<count($fig);$i++) {
echo "<SPAN class='cornice'>
<IMG src='" . $fig[$i] . ".jpg' width='40' height='40'
onClick='allerta($i)' border='1' id='fig$i'>
</SPAN>";
if($i==2) echo "<br>";
}
?>
<INPUT type='hidden' name='result'>
<INPUT type='hidden' name='valoreok' value='<?php echo $anim ?>'>
<DIV id='qui'></DIV>
<INPUT type='submit' name='submit' value='invia il modulo'>
</FORM>
<?php
}
else { // form inviato
// controlla il captcha
// se l'immagine cliccata e' uguale all'immagine di riferimento, continua
if($_POST['result']==$_POST['valoreok'] ){
// esamina i dati inviati
$errore='';
if(isset($_POST['nome']) && trim($_POST['nome'])!='')
$nome=htmlentities($_POST['nome']);
else
$errore .= 'nome ';
if(isset($_POST['indirizzo']) && trim($_POST['indirizzo'])!='')
$indirizzo=htmlentities($_POST['indirizzo']);
else
$errore .= 'indirizzo ';
// segnala eventuali dati mancanti
if(trim($errore)!='')
echo "manca " . $errore;
else {
// tutti i dati sono stati inviati e li mostra
echo "Grazie, $nome<br><br>i dati introdotti sono:<br>$nome<br>$indirizzo ....<br><br>";
// eccetera...
}
}
else {
echo "<br>test di sicurezza non superato";
}
}
?>
</DIV>
<DIV align='center'><A HREF='index.php'>altra prova</A></DIV>
</BODY>
</HTML>
