Nella guida di oggi vediamo come installare Google Recaptcha sul vostro sito. Versioni v2 e v3.
Panoramica delle versioni di Google Recaptcha
Attualmente esistono 2 versioni di Google Recaptcha la v2 e v3. A sua volta la v2 si ramifica in due sotto-versioni una invisibile e una classica. Analizziamo insieme le differenze nel prossimo schema.
Google Recaptcha v2 – Standard
Sicuramente il piu invasivo ma anche il più solido da utilizzare in siti di produzione. Personalmente però, consiglio di usate la versione invisibile (vedi sotto).
Google Recaptcha v2 – Invisibile
Questo tipo di recaptcha, rispetto al primo molto invasivo, compare solo se l’utente secondo Google ha una soglia di rischio molto alta, e propone il classico challenge del tipo “Clicca sulle insegne” etc.
Google Recaptcha v3
Dalla versione v3 il recaptcha è totalmente invisibile e agisce a ogni hit andando ad accrescere il proprio database di spammer tramite la potenza del proprio machine learning. Esistono vari usi di questa versione v3 non semplicemente legata all’uso “con i form”.
Ad esempio possiamo usarla per filtrare il traffico social dannoso, bloccare ip spammer su analytics oppure andare ad analizzare i tentativi di accesso a un form di login o di registrazione.
Rispetto alla controparte v2 non c’è una “richiesta di validazione” del tipo “fai check su tutti i pulman nelle immagini” perchè, a quanto dice Google, chiunque non passi la verifica del V3 è sicuramente un bot. Questa sicurezza sta nel fatto che Google analizza anche il comportamento dell’utente dall’istante esatto in cui atterra in page.
Ovviamente potete dare voi un messaggio del tipo: ” Spiacenti sei stato individuato come spam, riprova più tardi”.
Come installare Google Recaptcha sul vostro sito – Implementazione Frontend
Nell’articolo qui sotto andremo a implementare la versione V2 Invisibile, a mio avviso la più sicura e “LTS” da usare per ogni tipologia di sito al momento. Il processo di implementazione è comunque pressochè identico nel caso usaste la versione V3 (Anzi quest’ultima è anche molto più semplice da implementare).
Per aggiungere Google Recaptcha andate per prima cosa a collegare lo script all’interno del vostro sito:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>Andate su questo sito collegati con il vostro account Google, cliccate su “admin console” e aggiungete il vostro sito; prelevate i due codici (sito e server) che verranno generati alla fine dell’add.
Dopodichè andate ad aggiungere un div al vostro form da validare:
<form action="form-engine/send.php" method="post" id="ContactForm">
<div class="form-group">
<label class="form-control-label for="name">Nome*</label>
<input type="text" class="form-control" name="name" required="true" id="name">
</div>
<div class="form-group">
<label class="form-control-label" for="surname">Cognome*</label>
<input type="text" class="form-control" name="surname" required="true" id="surname">
</div>
<div class="form-group">
<label class="form-control-label" for="email">Email*</label>
<input type="email" class="form-control" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required="true" id="email">
</div>
<div class="form-group">
<label class="form-control-label" for="message">Messaggio*</label>
<textarea type="text" class="form-control" name="message" rows="5" id="message"></textarea>
</div>
<div class="form-group">
<label for="privacy"><input type="checkbox" name="privacy" value="privacy" required="true" id="privacy"> * Inviando questo modulo acconsento al trattamento dei miei dati personali, che saranno utilizzati nel rispetto di quanto disposto dall’art. 13 del d.lgs. 196/200 e dall’art. 13 del Regolamento UE n. 2016/679 (GDPR)
Leggi <a href="privacy-policy.html"> l'Informativa per il trattamento dei dati personali</a></label>
</div>
<div class="g-recaptcha"
data-sitekey="[CODICE-GOOGLE-FRONTEND]"
data-callback="onSubmit"
data-size="invisible">
</div>
<button id="sendForm" type="submit" class="btn btn-form btn-info">INVIA MODULO</button>
</form>Il div in questione è questo:
<div class="g-recaptcha"
data-sitekey="[CODICE-GOOGLE-FRONTEND]"
data-callback="onSubmit"
data-size="invisible">
</div>Nella fattispecie:
data-sitekey: Va messo al suo interno la chiave del sito che verrà generata dal vostro pannello di Google Recaptcha.
data-callback: Nome della funzione di callback nel caso sia tutto ok
data-size: invisibile (tipologia particolare del recaptcha v2).
Pre-requisiti:
Prima di proseguire vi invito a leggere questi articoli che andranno ad approfondire la vostra conoscenza di alcuni aspetti che vedrete più avanti nell’articolo.
Bene, ora che avete ripassato cos’è jQuery, Serialize e come inviare dei dati con ajax andiamo a vedere come integrare lato frontend Google Recaptcha sul nostro progetto.
data-callback="onSubmit"
//...
function onSubmit(token) {
//TOKEN GENERATO DA GOOGLE RECAPTCHA
}Come primo step andiamo ad collegare la funzione onSubmit specificata nel div posto all’interno del form. Questa funzione verrà richiamata quando:
a) L’utente avrà superato la validazione html5 (o eventualmente js) del form
b) L’utente avrà superato un’eventuale challenge anti-bot di Google Recaptcha.
Pertanto andiamo a piazzare in questa funzione tutto il nostro workflow di invio:
function onSubmit(token) {
//Funzione di submit RECAPTCHA
console.log("TOKEN: "+token);
var data = $("#ContactForm").serialize();
console.log(data);
//chiamata ajax
$.ajax({
type: "POST",
url: "form-engine/send.php",
data: data + "&g-recaptcha-response=" + token,
dataType: "html",
success: function(msg)
{
console.log(msg);
},
error: function(msg)
{
console.log(msg);
}//error
});//ajax
}//onSubmit
Cliccando su Invia dovrebbe comparirvi in console prima il token generato da Google (di validazione) e subito dopo la lista dei campi inviati con “appeso” anche il valore del token stesso.
All’interno della chiamata ajax abbiamo impostato due semplici console.log che stampano il risultato dell’invio, potete ovviamente adattarli aggiungendo alert o notifiche di success o di error.
NOTA: Nel nostro caso stiamo ipotizzando di inviare a un file php /form-engine/send.php
$("#ContactForm").on("submit", function(){
//Al submit procedo con il trigger recaptcha
grecaptcha.execute();
});//Click Per far succedere la magia e triggerare al meglio la funzione onSubmit che abbiamo appena creato ci basterà impostare questo evento al SUBMIT del form.
Utilizzando grecaptcha.execute() potremo infatti far partire in modo programmatico la validazione e la challenge di Google Recaptcha.
Utilizzando on submit invece andremo a richiamarla solo se l’utente avrà compilato correttamente tutti i campi ( e partirà pertanto l’evento submit).
Ricapitolando:
Utente compila con validazione HTML5 –> Utente fa submit –> Google Recaptcha Check –> Se ok evento onSubmit impostato sul div Google Recaptha –> Invio finale
Ovviamente potete facilmente impostare la vostra validazione con js se non vi fidate di quella html5 standard o avete bisogno di qualcosa di più.
Come installare Google Recaptcha sul vostro sito – Implementazione Server Side
A questo punto andiamo a impostare il flusso di validazione server-side, in questo caso useremo PHP.
//Controllo RECAPTCHA
$captcha = $_POST['g-recaptcha-response'];
$recaptchaServerCode = "[CODICE-GOOGLE-SERVER]";
$response=json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptchaServerCode."&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']), true);
if($response['success'] == false)
{
//Errore BOT
return json_encode(array(
'status' => 400,
'message' => 'error'
));
}else{
//CHECK OK
//CODICE DI INVIO FORM CON CONTROLLI SERVER SIDE
//...
//Success INVIO
return json_encode(array(
'status' => 200,
'message' => 'success'
));
}//FINE CONTROLLO RECAPTCHArecaptchaServerCode è la variabile da popolare con la chiave “Server” scaricata in precedenza dalla propria console recaptcha.
Ovviamente a seconda se success o error potete facilmente impostare il vostro motore di invio form o altro.
Come Nascondere il badge di Google Recaptcha
Legalmente non potreste andare a nascondere il badge di recaptcha, tuttavia concordo che rovini l’estetica di molti siti vederlo in basso a destra fisso. Per levarlo potete agire da css:
.grecaptcha-badge{
display: none!important;
}Ricordatevi però di mettere la seguente dicitura sotto il form che validate per essere a posto con la policy di Google:
Questo sito è protetto dal sistema antispam Google Recaptcha.
<a href="https://policies.google.com/privacy">Privacy Policy</a> e <a href="https://policies.google.com/terms">Termini di servizio</a>.Link di approfondimento su Google Recaptcha
Guida Google Invisible Recaptcha
Questo articolo ti è stato utile? Condividilo sui tuoi social network preferiti!
Image credits: “spam” disponibile su Shutterstock
