Come integrare Google reCAPTCHA nel tuo form HTML

Condividi su facebook
Condividi su twitter
Condividi su linkedin

Stanco di ricevere a qualsiasi ora del giorno e della notte email riguardo misteriosi prodotti orientali dalle proprietà sconosciute o di avvenenti signorine che si sono innamorate di te? Il modo migliore per risolvere il problema è integrare Google reCAPTCHA nel tuo form HTML.

Google reCAPTCHA

Come prima cosa dovrete registrare il vostro sito in Google reCAPTCHA. Per farlo vi basterà cliccare qui e seguire le istruzioni.

 

Google reCAPTCHA site registration

Una volta registrato il vostro sito otterrete da Google reCAPTCHA una coppia di API Key :

  • Site key – La chiave pubblica che utilezzeremo nell’integrazione lato client
  • Secret key – La chiave segreta che utilezzeremo nell’integrazione lato server

Dopo aver ottenuto la coppia di API Key non ci resta che integrare Google Re-captcha nel nostro form web. Per comodità divideremo l’integrazione in due fasi :

  • Integrazione Lato Client
  • Integrazione Lato Server

Integrazione Lato Client

Per integrare reCAPTCHA lato client dovremo eseguire 2 semplici operazioni.

La prima cosa da fare è aggiungere all’interno del tag HEAD questo tag SCRIPT per il caricamento della libreria javascript di Google reCAPTCHA.

1
<script src="https://www.google.com/recaptcha/api.js?hl=it" async="" defer=""></script>

La seconda operazione da svolgere è inserire il seguente DIV all’interno del vostro form nella posizione che preferite avendo cura di sostituire “== Site Key ==” con la SITE KEY che vi ha fornito Google in fase di registrazione del vostro sito al servizio reCAPTCHA.

1
<div class="g-recaptcha" data-sitekey="== Site Key =="></div>

Dopo aver eseguito queste due operazioni avremo un Google reCAPTCHA perfettamente integrato nel nostro form web. Ci manca ora l’ultimo passo..ossia gestire la validazione lato server del form.

Form WEB con Google reCAPTCHA

Integrazione Lato Server

Quando il form, in cui abbiamo appena integrato il reCAPTCHA, viene inviato al server lo script aggiungerà al POST una variabile boolean ‘g-recaptcha-response’. Verificando il valore di questa variabile sapremo se l’utente ha “checkato” o no il reCAPTCHA.
Di seguito trovate il codice PHP che esegue tale validazione e che dovrete integrare nella funzione PHP richiamata dal submit del vostro form:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--?php
$captcha;
if(isset($_POST['g-recaptcha-response'])){
 $captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha){
echo '

<h2-->reCPATCHA non checkato!

'
;
exit;
}
//inserire nella variable $secretKey la SECRET KEY fornitaci da Google reCAPTCHA
$secretKey = "== SECRET KEY ==";
$ip = $_SERVER['REMOTE_ADDR'];
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&amp;response=".$captcha."&amp;remoteip=".$ip);
$responseKeys = json_decode($response,true);
if(intval($responseKeys["success"]) !== 1) {
echo '
<h2>ROBOT!!</h2>
;'
;
} else {
echo '
<h2>Grazie per aver compilato il form.</h2>
'
;
}
?&gt;

Prima di salutarvi vi linko qui la documentazione Google per sviluppatori.

Buon Lavoro.. 🙂

FuerteDev

FuerteDev

Gli sviluppatori del gruppo. Da oltre 20 anni  ci occupiamo di sviluppo ed implementazione.  Se la soluzione al tuo problema ancora non esiste, niente paura: noi la creiamo!

Leave a Replay

Cosa è FuerteWeb

Crediamo fermamente che l’unione faccia  la forza ed è per questo che ne abbiamo fatto il core della nostra agenzia.
Non è stato un lavoro facile, ma dopo anni siamo riusciti a creare un gruppo eterogeneo di esperti pronti a risolvere qualsiasi esigenza.
Comunicazione, strategia e sviluppo sono il nostro pane quotidiano e siamo pronti a condividere i nostri segreti con te.

Ultimi Articoli

Iscriviti alla nostra Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit