Come integrare reCAPTCHA in un Form

reCAPTCHA è un sistema sviluppato da Google per proteggere i siti web dagli attacchi automatizzati dei bot. La sua funzione principale è quella di distinguere tra utenti reali e software dannosi, impedendo a questi ultimi di inviare spam o accedere in modo fraudolento a un servizio.

L'implementazione di reCAPTCHA in un form è fondamentale per migliorare la sicurezza e prevenire attacchi come il credential stuffing o il comment spam. In questo articolo, vedremo come funziona reCAPTCHA, come generare le chiavi API e come integrarlo efficacemente nel proprio sito web utilizzando grecaptcha.enterprise.

🔗 Ti piace Techelopment? Dai un’occhiata al sito per tutti i dettagli!

Come Funziona reCAPTCHA

Google reCAPTCHA utilizza diverse tecniche per identificare e bloccare i bot. Può funzionare in modalità visibile, dove all'utente viene richiesto di selezionare immagini o risolvere puzzle, o in modalità invisibile, che analizza automaticamente il comportamento dell'utente per determinare se si tratta di un umano o meno.

Il suo funzionamento si basa su due chiavi:

Chiave pubblica: utilizzata lato client per richiedere la verifica del reCAPTCHA
Chiave privata: utilizzata lato server per invocare le API di Google e verificare se il reCAPTCHA è valido
reCAPTCHA Enterprise:
- È la versione più avanzata, progettata per le grandi aziende.
- Offre funzionalità di analisi del rischio più sofisticate e personalizzabili.
- Fornisce report dettagliati e integrazione con altri servizi di sicurezza di Google Cloud.

Bisogna considerare però che parlare di validazione reCAPTCHA è improprio. Questa tecnologia è in realtà basata sulla generazione di un token. Sarà il token ad essere validato per capire se è valido o meno.

Creazione delle Chiavi API

Per utilizzare reCAPTCHA, è necessario ottenere delle chiavi API da Google. Segui questi passaggi:

Vai alla console di Google reCAPTCHA Enterprise
Crea un nuovo progetto o selezionane uno esistente.
Registra il tuo sito e scegli il tipo di reCAPTCHA desiderato.
Otterrai due chiavi:

Chiave pubblica (site key): viene utilizzata nel client-side per generare il token.
Chiave privata (secret key): viene usata lato server per verificare la validità del token.

Generazione delle chiavi

Differenza tra reCAPTCHA v2 e v3:

reCAPTCHA v2: richiede un'interazione diretta dell'utente (es. selezionare immagini).
reCAPTCHA v3: funziona in modo invisibile, assegnando un punteggio all'utente per valutare se è un bot.

Integrazione di reCAPTCHA nel sito

Per integrare reCAPTCHA nel proprio sito web senza mostrarlo direttamente nel form, è necessario aggiungere lo script JavaScript di Google alla propria pagina:

<head>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=YOUR_API_KEY"></script>
</head>

Dove YOUR_API_KEY deve essere sostituito con la tua chiave pubblica.

Successivamente, quando l'utente tenta di inviare il modulo, dobbiamo generare un token e allegarlo alla richiesta:

<form id="my-form">
    <input type="text" id="username" name="username" placeholder="Username" required>
    <input type="password" id="password" name="password" placeholder="Password" required>
    <button type="submit">Submit</button>
</form>

Dobbiamo definire una funzione di callback per inizializzare l'oggetto e il <div> del reCAPTCHA:

var onloadCallback = function() {
    grecaptcha.enterprise.render('recaptcha_div', {
      'sitekey' : 'YOUR_API_KEY',
    });
};

Definiamo ora la funzione che gestirà il submit del form e invocherà l'API di Google per generare il token del reCAPTCHA:

document.addEventListener('DOMContentLoaded', (e) => {
    document.getElementById("my-form").addEventListener("submit", function(event) {
        event.preventDefault();
        
        grecaptcha.enterprise.ready(async () => {
            const token = await grecaptcha.enterprise.execute('YOUR_API_KEY', {action: 'SUBMIT_FORM'});
          
            let form = document.getElementById("my-form")

            let username = form.querySelector("#username").value;
            let password = form.querySelector("#password").value;
            
            var formData = new FormData();
            formData.append("username", username)
            formData.append("password", password)
            formData.append("recaptcha-response", token);

            fetch("/validateLogin", {
                method: "POST", 
                body: formData
            }).then(response => {
                
                if(response.status=="200"){
                    //go to Home Page
                }else{
                    //login error
                }
            })
            .catch(error => {
                console.error("Login error!", error)
            });
        });
    });
});

Ecco come funziona:

Utilizziamo grecaptcha.enterprise.ready() per assicurarci che il sistema sia caricato.
execute() genera un token basato sull'azione dell'utente.
Creiamo un oggetto FormData per gestire più facilmente i parametri da inviare al server a cui aggiungiamo il token generato.

Verifica del Token Lato Server

Una volta ricevuto il token lato server, dobbiamo verificare la sua validità effettuando una richiesta all'API di Google. Ecco un esempio in JavaScript (Node.js con Express):

const express = require("express");
const fetch = require("node-fetch");
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post("/validateLogin", async (req, res) => {
  const token = req.body["recaptcha-response"];
  const secretKey = "YOUR_SECRET_API_KEY";

  const response = await fetch("https://www.google.com/recaptcha/api/siteverify", {
    method: "POST",
    headers: { 
        "Content-Type": "application/x-www-form-urlencoded" 
    },
    payload: {
        secret: secretKey,
        response: data["recaptcha-response"]
      }
  });

  const data = await response.json();

  const login = await login(req.body["username"], req.body["password"]) //out of scope of this article

  if (data.success && login) {
    res.json({ success: true, status: "200", message: "Login successfully!" });
  } else {
    res.json({ success: false, status: "500", message: "Login failed!" });
  }
});

app.listen(3000, () => console.log("Server listening on port 3000"));

Spiegazione:

Recuperiamo il token dal corpo della richiesta.
Lo inviamo all'endpoint di Google insieme alla chiave segreta.
Google risponde con un oggetto JSON contenente success: true se il token è valido.
In base alla risposta, possiamo accettare o rifiutare l'invio del form.

Da tenere a mente

L'integrazione di reCAPTCHA nel proprio form è un passo essenziale per garantire la sicurezza delle interazioni con gli utenti e proteggersi dagli attacchi automatizzati. Utilizzando reCAPTCHA possiamo migliorare l'esperienza utente senza richiedere interazioni fastidiose, assicurando al contempo un'elevata protezione.

Seguendo questi passaggi, sarai in grado di implementare un sistema di verifica efficace e sicuro per il tuo sito web. 🚀

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog