reCAPTCHA PHP esempio form Captcha Google

Continuiamo ad affrontare il tema di blocco dei bot, stavolta lato codice invece che lato configurazione. Oggi parliamo di come integrare il reCAPTCHA in PHP per proteggere una form. Abbiamo già parlato in precedenza di reCAPTCHA in un articolo nel quale abbiamo spiegato le differenze tra reCAPTCVHA v2 e v3. Vi abbiamo anche già mostrato come creare un form in php per salvare dati in un database. Oggi vediamo alcuni esempi di come integrare Google reCAPTCHA in una form con PHP. Alla fine dell’articolo mi metterò inoltre a disposizione il download di esempio di form php con reCaptcha.

Indice dei contenuti reCAPTCHA PHP

Let’s go!

Crea una chiave API per Google reCaptcha

Affinchè si possa integrare reCAPTCHA con PHP in una form, la prima cosa da fare è quella di procurarsi una coppia di chiavi per utilizzare le API reCAPTCHA. Visitate quindi la pagina dedicata alla creazione delle chiavi API.

Prima di creare le chiavi è importante scegliere il tipo di reCAPTCHA che si vuole configurare. Se non sai ancora qualche scegliere, ti consigliamo di leggere la nostra guida alle differenze tra reCAPTCHA v2 e reCAPTCHA v3.

Nel nostro esempio di reCAPTCHA in una form html con PHP, utilizzeremo la versione v2 di reCAPTCHA.

Affinché possiamo ricevere i valori delle chiavi, dobbiamo compilare i seguenti campi:

• Etichetta: inserire un nome che indichi il servizio per il quale state creando le chiavi.
• Tipo di reCAPTCHA: scegliere tra reCAPTCHA V3 o V2 ed eventualmente, nel caso sceglieste la v2, scegliete il tipo di V2 che vorrete utilizzare.
• Domini: scegliete l’FQDN per il quale il reCAPTCHA verrà utilizzato (es: iegri.com)

Una volta compilati tutti i campi obbligatori, riceveremo in cambio la nostra coppia di chiavi da utilizzare per il reCAPTCHA.

Esempio di form html con reCAPTCHA e PHP

Ora che abbiamo a disposizione le chiavi possiamo scrivere la nostra form html con recaptcha che andrà a richiamare, per le verifiche di backend, una pagina php, che chiameremo appunto recaptcha.php.

<form action="recaptcha.php" method="post">
    <div>
        <label for="name">Nome:</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
    </div>
    <div>
        <label for="message">Messaggio:</label>
        <textarea id="message" name="message"></textarea>
    </div>
    <div class="g-recaptcha" data-sitekey="your_recaptcha_site_key"></div>
        <input type="submit" value="Invia">
</form>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Nel caso in cui vogliate vedere come appare la pagina, potete visitare la pagine di esempio di form html con reCAPTCHA e PHP.

Ovviamente, NON limitatevi a copiare e incollare il testo in una pagina HTML. Se non modificherete la riga 14, ovvero quella relativa alla data-sitekey, la vostra form non funzionerà e riaverete l’errore:

ERROR for site owner: Invalid site key.

Quindi, affinché la form possa funzionare, cancellate la stringa: your_recaptcha_site_key e sostituitela con la “chiave del sito“, anche chiamata site key, creata allo step precedente. Copiate il contenuto della prima delle due righe dell’immagine e incollatela al posto di your_recaptcha_site_key.

Affinché si possa concludere la configurazione, creiamo ora la pagina php che prenderà in carico la verifica della risposta del reCaptcha e che eseguirà le attività lato server. Chiameremo la pagina di esempio: recaptcha.php.

Esempio pagina php per verifica captcha:

<?php
  if (isset($_POST['g-recaptcha-response'])) {
      $secret = "your_recaptcha_secret_key";
      $response = $_POST['g-recaptcha-response'];
      $remoteip = $_SERVER['REMOTE_ADDR'];
      $url = "https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$response&remoteip=$remoteip";
      $response = file_get_contents($url);
      $response = json_decode($response);

  if ($response->success) {
      $name = $_POST['name'];
      $email = $_POST['email'];
      $message = $_POST['message'];
      
      echo "reCaptcha verificato correttamente.";
      // Qui puoi inserire i dati nella form, oppure inviare una email.
      // Process the form data and DO SOMETHING
} else {
  // Handle the error
  echo "reCaptcha non verificato";
}
  }
?>

Anche qui dovremo fare una sostituzione. Alla riga 3 cancelliamo la stringa your_recaptcha_secret_key e sostituiamola con la secret key, ricevuta al momento della registrazione. Nell’immagine precedente è la stringa segnalata come CHIAVE SEGRETA.

Aggiungi messaggio di errore personalizzato in caso di mancato OK del reCaptcha

Nel caso in cui il reCAPTCHA sia stato verificato correttamente, potrete inserire il vostro codice, come per esempio quello dell’invio di una mail o l’inserimento di valori in un database, al posto della riga 15 del codice appena elencato. Se vi occorre un esempio, potete visitare la nostra guida su come inserire record in un database mysql tramite php.

Ma cosa fare se invece il controllo del captcha non viene superato? In questo caso è importante avvisare l’utente dandogli un’informazione che non lo tragga in errore.

Infatti, nella nostra pagina PHP di esempio, abbiamo riportato un semplice messaggio di errore che potete trovare alla riga 20 della pagina php, in cui abbiamo scritto un semplice messaggio “reCaptcha non verificato”.

Ovviamente potete gestire l’errore come meglio credete, come per esempio mostrando una pagina di errore o reindirizzando nuovamente l’utente alla pagina di inserimento dei dati. Sta a voi scegliere cosa mostrare all’utente, ma l’importante è farlo, sopratutto per una questione di User Experience.

Testa la tua form di esempio PHP con reCAPTCHA

Prima di pubblicare la form protetta da reCAPTCHA in un ambiente di produzione, è bene fare tuti i test del caso. Per test intendo, per esempio, la compilazione parziale dei campi della form, oppure la sottomissione della form senza aver eseguito la validazione del reCAPTCHA.

Verificate come si comporta il vostro codice. Se per esempio la vostra form serve ad inviare email, controllate che la mail NON venga spedita se non è stato prima verificato correttamente il reCAPTCHA. Verificate inoltre che dopo che il reCPATCHA è stato validato, la mail arrivi effettivamente al destinatario.

Monitora le metriche di sicurezza del reCAPTCHA

Per capire se l’integrazione del vostro reCAPTCHA sta funzionando correttamente è importante monitorarne le metriche che tracciano la sicurezza dell’integrazione del reCAPTCHA nella form html con php. Per farlo, è sufficiente andare nella pagina di amministrazione del recaptcha e vedere l’andamento del grafico che apparirà:

Da qui potrete capire se ci sono tentativi di attacco da parte di bot e se il vostro reCAPTCHA sta funzionando correttamente.

Teoricamente, il totale delle verifiche positive, evidenziate in verde nel grafico, dovrebbe combaciare come numero, con le azioni portate a termine dalla form (es. invio e mail o inserimenti in database). Se la vostra form invia email, e le colonne verdi contano 10 risultati, dovreste aver inviato proprio 10 email.

Nel caso i numeri non tornassero, evidentemente sono necessarie delle verifiche sul nostro codice.

Form PHP Captcha demo download

Al fine di aiutarvi nello sviluppo della vostra form php protetta da captcha reCAPTCHA di Google, ho Crato un pacchetto che potreste scaricare. Il file è scaricaribile direttamente dal nostro sito.

Il file si chiama form-php-recaptcha-demo.tar.gz e potete scaricarlo qui: download form PHP Captcha demo.

Prima di scompattare il file verificate che il suo md5 corrisponda alla seguente stringa: 72cba566e4d803c66f3fb7c2acbc37bc

FAQ Errori comuni reCAPTCHA in form PHP

Ci sono alcuni errori comuni che si presentano nell’utilizzo di reCAPTCHA. Andiamo ad affrontare gli errori più comuni e vediamo le cause e come risolverli.

Conclusioni

Vi abbiamo mostrato come integrare il reCAPTCHA in una form html con PHP, come creare le chiavi e come gestire gli errori più comuni che si presentano nell’utilizzo del recaptcha in una form.

Spero che l’articolo vi sia risultato utile, in tal caso, potreste condividerlo 🙂 .

Se avete dei dubbi o se volete condividere il vostro punto di vista, scrivete nei commenti e cercherò di rispondere al più presto.

Se volete restare in contatto, vi lascio anche il link della mia newsletter di LinkedIn.

Fabio Iegri

Principal Web Solutions Architect – Technology & Architecture Manager @ Accenture – Google Cloud Certified – Professional Cloud Architect
Parla di #web, #cloud, #websecurity, #webperformance e #webarchitecture

https://www.linkedin.com/in/fabio-iegri/