Sistema captcha potenziato con PHP e AJAX!

Giovanni Canella

01/11/2013

2915

In un recente articolo vi ho spiegato cos'è e come si crea un captcha con il solo utilizzo di PHP, mostrandovi un esempio banale composto da un form che non effettuava il login finchè il codice inserito non corrispondeva con l'immagine mostrata. L'unico, se lo vogliamo chiamare così, difetto è il fatto che deve aggiornare pagina a ogni conferma, abbastanza scocciante per l'utente finale non vi pare? Bene in questo articolo vediamo come darli una spinta in più con AJAX!

Ma cos'è AJAX? Acrononimo di Asyncronus Javascript and XML, è un insieme di tecnologie volte allo sviluppo di applicazioni web interattive, più precisamente per effettuare chiamate al server in modo asincrono, quindi senza nessun refresh della pagina, in maniera semplice e veloce, tramite:

  • Javascript,
  • l'oggetto XMLHttp,
  • Un linguaggio lato server (PHP, ASP).

Se volete direttamente vedere il risultato, basta andare nella pagina contattami di GInho!

Contattami [Ginho.it] con Captcha potenziato PHP / Ajax

Per poter effettuare queste chiamate ci sono vari modi: creare manualmente la richiesta, procedura abbastanza complessa quando si tratta di siti di grosse dimensioni, oppure affidarci a framework come jQuery o Mootools, che ci mettono a disposizione delle API pronte e compatibili con tutti i browser!

In questo articolo lavoreremo con il primo citato, quindi rechiamoci sul sito ufficiale, e scarichiamo la libreria cliccando su Download jQuery, oppure copiamoci l'url del CDN in fondo alla pagina (scelta consigliata), per poi includerlo nella pagina:

 

HTML

Il codice HTML resta lo stesso dell'ultima volta:


 
Username Password Captcha

JS

Creiamo un nuovo file con estensione .js, e chiamiamolo per esempio login.js, dove al suo interno andranno inseriti i controlli Javascript e la chiamata AJAX. La prima cosa da inserire, che molti si dimenticano, è la funzione per eseguire il codice a DOM caricato, così da evitare qualunque problema:

$(document).ready(function() {
     // Il codice va qua!
});

// Non qua!

Successivamente creiamo l'evento da avviare quando viene compilato e inviato il form, e i controlli al suo interno:

$("#login").submit(function() {
	var username = $("#username").val();
	var password = $("#password").val();
	var captcha = $("#captcha").val();
	
	if(username == "" && password == "") {
		alert("Occorre riempire tutti i campi!");
	} else {
		// Chiamata AJAX bitches!
	}
});

Ora occupiamoci della chiamata AJAX, tramite la funzione $.ajax{} di jQuery, passando come parametri:

  • url: login.php,
  • type: Tipo della richiesta (GET o POST),
  • data: Il dato da passare,
  • dataType: Il tipo di dato,
  • success: Azione da eseguire in caso di successo,
  • error: Azione da eseguire in caso di errore.

I dati da passare li definiamo nella variabile oggetto dati:

var dataString = {
	username: username,
	password: password,
	captcha: captcha
}

E poi:

$.ajax({
    url: "login.php",
    type: "POST",
    data: dati,
    dataType: "json",
    success: function(output) {
        if (output.risultato == "ok") {
        	alert("Login effettuato con successo!");
            });
        } else {
        	 alert("Errore durante il login!: " + output.messaggio);
        }
    },
    error: function() {
          alert("Errore imprevisto");
    }
});

PHP

Creiamo quindi il file login.php (sempre con lo stesso nome di prima) che conterrà la parte PHP modificata di conseguenza per gestire il responso della chiamata effettuata. Prima di tutto però vanno inseriti i controlli, uno per i campi, e uno per il captcha.

Per ogni messaggio che vogliamo mostrare dobbiamo creare un normale array...

if($_POST["username"] == "" && $_POST["password"] == "") {
	$responso = array(
		"risultato" => "errore",
		"messaggio" => "Campi vuoti!"
	);
} else if($_SESSION["Captcha"] != $_POST["captcha"]){
	$responso = array(
		"risultato" => "errore",
		"messaggio" => "Il codice captcha inserito non è corretto!"
	);
} else {
	$responso = array(
		"risultato" => "ok",
		"messaggio" => "Login effettuato con successo!"
	);
}

...  per poi codificarlo con json_encode() prima di passarlo.

die(json_encode($responso));

N.B = La variabile $_SESSION["Captcha"] proviene dallo script che genera il captcha visto nel vecchio articolo.

 

Conclusioni

Come abbiamo potuto vedere l'integrazione non è complessa, anzi se abbiamo capito il meccanismo diventa un gioco da ragazzi! Se avete qualche altra idea o suggerimento non esistate a scrivere un commento! Se vi è tornato utile, condividete! A qualcun'altro potrebbe tornare utile! 

I più letti

Ti potrebbero interessare