Come creare un CAPTCHA con PHP e JavaScript

Indice dei contenuti

Fin dall’avvento di internet, gli utenti sentono il bisogno di proteggersi dallo spam e dai dannosi bot, che circolano senza sosta nella rete alla ricerca di ignare vittime a cui inviare continui messaggi e richieste pericolose. Questo problema affligge da sempre anche gli sviluppatori di siti web nel quale sono presenti moduli e form che permettono di inviare messaggi, ad esempio nelle comuni pagine di contatto. Ad oggi esistono numerosi sistemi e tecniche per evitare o attenuare il problema dello spam nei siti e la tecnica più famosa consiste nell’adottare un captcha all’interno dei form.

I captcha, seppur non infallibili, consentono di verificare se un determinato utente sia una vera persona fisica oppure un bot, attraverso un semplice sistema di “domanda e risposta”, che può essere ad esempio un’addizione matematica.

L’implementazione di un captcha all’interno di un sito web è possibile in differenti modi. Il più famoso e affidabile è sicuramente Google reCaptcha, tuttavia nulla vieta ad uno sviluppatore di creare o integrarne uno di diverso tipo.

Se sei interessato a creare e implementare un captcha tutto tuo in un sito, attraverso l’uso di PHP e JavaScript, in questa guida ti spiegherò passo passo come fare.

Creare un captcha con PHP, JavaScript e HTML

Un captcha è un elemento di informatico che permette di verificare se un utente in visita presso il nostro sito (più precisamente in una pagina dove è presente un modulo di contatto) sia o no una vera persona fisica che sta operando al computer, richiedendo la sua interazione diretta esponendole una richiesta di qualche tipo, come la selezione di una o più immagini (stile reCaptcha 2) oppure la scrittura di caratteri alfanumerici pre-generati (visibili in una sorta di immagine auto generata dal sistema).

Nel caso in cui la richiesta del captcha venga soddisfatta, molto probabilmente ad operare sul dispositivo è una vera persona; in caso contrario invece si tratta molto probabilmente di un bot o di un software automatizzato per lo spam.

Il compito di un captcha dunque è fondamentale, infatti i form privi di questo elemento sono spesso soggetti a intenso spam.

Tipologia del Captcha

Di tipologie captcha ne esistono a decine, tuttavia per non rendere più difficoltosa la guida, qui ci concentreremo nella creazione di un captcha numerico, che richieda all’utente di eseguire una semplice somma matematica tra due numeri (es. “5+9=?”).

Se “mastichi” un po’ di programmazione PHP e JavaScript, potrai facilmente modificare e lo script per differenti risultati.

Perché bisogna usare PHP?

PHP è il linguaggio di programmazione lato server, che permette di inviare richieste tramite moduli (form HTML) e di elaborare i dati (inviare una email ad esempio).

I moduli online dei siti web usano PHP per inviare le richieste al server (PHP o altri linguaggi), dunque è necessario il suo uso per la creazione di un captcha.

Inoltre PHP ci serve per generare i numeri da mostrare a schermo per la verifica del captcha.

Perché bisogna usare JavaScript?

Nel nostro caso JavaScript serve a generare il contenuto del canvas con elementi grafici non leggibili ai bot, con l’ausilio dell’elemento HTML <canvas>. Detto in breve, un canvas è un area di disegno virtuale, compilabile generalmente con JavaScript (ad esempio si possono disegnare linee, rettangoli, cerchi oppure scrivere testo sotto forma di immagine).

Il codice

Il codice è suddiviso in più parti. La prima sezione è sviluppata in PHP e va inserita all’inizio della pagina web, prima del tag <!doctype..> e <html>. Il formato del file ovviamente deve essere “.php“.

<?php

  //NUMERI CASUALI da 1 a 9 da mostrare nel CANVAS
      $c1 = rand(0,9);
      $c2 = rand(0,9); 

  // MODULO INVIATO
        if(isset($_POST['emailUtente']) && 
           isset($_POST['n1']) && 
           isset($_POST['n2']) && 
           isset($_POST['captchaResult'])) 
               {
            $cc = $_POST['n1'] + $_POST['n2'];
       
            if( $cc != $_POST['captchaResult']){
   //CAPTCHA NON CORRETTO - ERRORE - riprova
            }

            else{ 
   //CAPTCHA CORRETTO - fai qualcosa - invia un email o esegui azione.
            }
        }
?>

In questo script, dopo l’invio di un form (vedi codice seguente) viene verificata se la somma dei due numeri causali ($n1 e $n2) sia uguale a quella digitata dall’utente ($_POST['captcha']). Tutti questi dati provengono da elementi di input HTML presenti nella pagina web in questione.

<html>
   <head>
   </head>
   <body>
      <form>
          <input type="email" name="emailUtente">
          <input type="hidden" value="<?php echo $c1; ?>" name="n1">
          <input type="hidden" value="<?php echo $c2; ?>" name="n2">
          <canvas id="myCanvas" height="50" width="150"></canvas>
          <input type="number" name="captchaResult" placeholder="Risultato?">
          <input type="submit" value="Invia">
      </form>
      <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.font = "30pt Arial";
//Colore del testo
        ctx.fillStyle = "#000";
//Colore del bordo
        ctx.strokeStyle = "#C12442";
//Creazione del testo
        ctx.fillText("<?php echo $c1; ?>+<?php echo $c2; ?>=", 10, 40+<?php echo $c1; ?>);
//Creazione del bordo sfalsato
        ctx.strokeText("<?php echo $c1; ?>+<?php echo $c2; ?>=", 9, 37+<?php echo $c2; ?>); 
      </script>
   </body>
</html>

Nella pagina HTML sono presenti i tag per la compilazione del form, con l’aggiunta di un canvas per ospitare graficamente il captcha. A fondo pagina invece è presente lo script JavaScript per la generazione automatica del captcha, per mostrare i numeri da sommare (variabili PHP $c1 e $c2, create nel listato PHP visto in precedenza).

Ho aggiunto altri parametri superflui per la creazione del canvas, per rendere meno leggibili i numeri.

Questo è approssimativamente il risultato ottenuto:

esempio di captcha creato con php e javascript

Mancano ovviamente degli elementi estetici per migliorare la grafica generale del form, ma non è lo scopo di questa guida. Modifica a tuo piacimento l’estetica con CSS.

Prova il codice descritto nel nostro editor interattivo.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti: