Google reCAPTCHA
ReCAPTCHA è un plugin fornito da google per validare i form, e materialmente viene implementato così
Indice
Registrazione
Per abilitare reCAPTCHA è necessario un account Google e registrare il sito dove lo si utilizza: https://www.google.com/recaptcha/admin
Come Configurare Google Recaptcha V3 in Un Form Php
fonte: https://www.ma-no.org/it/programmazione/php/come-configurare-google-recaptcha-v3-in-un-form-php
Un semplice esempio che mostra come aggiungere il nuovo Google reCAPTCHA v3 a un modulo PHP.
reCAPTCHA v3 aiuta a rilevare il traffico abusivo senza dar fastidio agli utenti del nostro sito web.
Google reCAPTCHA è diventata una delle soluzioni più popolari per quanto riguarda la prevenzione dello lo spam ed il traffico abusivo sui siti web.
Se da un punto di vista della protezione è ottimo, dall'altro infastidisce gli utenti che spesso si vedono obbligati a risolvere quesiti matematici o logici, a fare clic su un certo numero di veicoli in una piazza o cartelli stradali...
reCAPTCHA v3 ha lo scopo di fornire le stesse capacità di filtraggio dello spam, ma anche di minimizzare l'impatto negativo sull'utente, facilitandone un'esperienza più semplice e positiva. Lo fa tracciando le attività dell'utente e assegnandogli un punteggio. È quindi possibile eseguire azioni rilevanti a seconda di questo punteggio, come il blocco dell'invio, la verifica manuale o la possibilità di passare attraverso di esso.
1. Registrazione
Il primo passo è andare alla pagina reCAPTCHA ed effettuare il login con un account Google. Una volta effettuato l'accesso, andate alla casella "Registra un nuovo sito" e:
Dopo la registrazione, vi verrà fornita sia una "Chiave del sito" (site Key) che una "Chiave segreta" (secret Key).
Queste saranno necessarie per configurare il modulo sui domini forniti nel passaggio precedente.
2. Integrazione Client Side
Per questo esempio useremo un modulo di contatto molto semplice: conterrà solo 3 campi (Nome, Indirizzo e-mail, Messaggio) e il classico pulsante "Invia messaggio".
- Inserite un'etichetta (conviene scrivere il nome del sito)
- Scegliete 'reCAPTCHA v3'
- Aggiungiete tutti i domini o sottodomini che vi interessano (omettendo http, https, www)
- cliccate su 'Registrati'
- Per praticità metteremo codice PHP e Javascript in un unico file.
Creare un file chiamato 'index.php' e aggiungere quanto segue:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google reCAPTCHA v3</title>
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_RECAPTCHA_SITE_KEY"> </script>
<script>grecaptcha.ready(function () {
grecaptcha.execute('YOUR_RECAPTCHA_SITE_KEY',
{ action: 'contact' }).then(function (token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
});
});
</script>
</head>
Sostituire 'YOUR_RECAPTCHA_SITE_KEY' con la chiave pubblica fornita nel pannello di controllo reCAPTCHA.
La funzione grecaptcha.ready viene eseguita quando il servizio è completamente caricato e ha creato un token per l'utente corrente. L'azione dovrebbe riferirsi alla pagina corrente o all'operazione in corso. In questo caso sto usando contact' in quanto viene applicato ad un modulo di contatto. Abbiamo configurato la funzione in modo tale che possa prendere un campo imput nascosto e passargli il token attraverso il valore dell'input stesso.
Il codice sottostante è stato usato per creare il modulo di contatto:
<body>
<section class="section">
<div class="container">
<form method="POST">
<h1 class="title">reCAPTCHA v3 esempio</h1>
<div class="field">
<label class="label">Nome</label>
<div class="control">
<input type="text" name="name" class="input" placeholder="Name" required>
</div>
</div>
<div class="field">
<label class="label">Email</label>
<div class="control">
<input type="email" name="email" class="input" placeholder="Email Address" required>
</div>
</div>
<div class="field">
<label class="label">Messaggio</label>
<div class="control">
<textarea name="message" class="textarea" placeholder="Message" required></textarea>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button type="submit" class="button is-link">Invia messaggio</button>
</div>
</div>
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
</form>
</div>
</section>
</body>
</html>
Questo e' tutto ció che serve per far funzionare il servizio dal lato del cliente. Ora il reCAPTCHA resta analizzando l'utente, per poi creare un token, assegnandolo a un input nascosto.
3. Integrazione Server Side
È giunto il momento dell'entrata in scena del PHP, affiché l'utente possa essere convalidato.
Si trattadi una semplice richiesta POST ad un URL di Google, cosa che in realtà, può essere eseguita in più linguaggi.
Sostituire 'YOUR_RECAPTCHA_SECRET_KEY' con la chiave segreta fornita nel pannello di controllo e aggiungere quanto segue appena sopra il modulo:
<?php
// Controlla se il form è stato inviato:
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['recaptcha_response'])) {
// Costruire il POST request:
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY';
$recaptcha_response = $_POST['recaptcha_response'];
// Istanziare e decidoficare la richiesta POST:
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
$recaptcha = json_decode($recaptcha);
// Azioni da compiere basate sul punteggio ottenuto:
if ($recaptcha->score >= 0.5) {
// Verificato - invia email
} else {
// Non verificato - mostra errore
}
}
?>
Questo codice sta costruendo la richiesta POST e inviandola a Google. A seconda del punteggio ricevuto, è possibile eseguire azioni rilevanti per la propria applicazione. Secondo la documentazione '1.0 è molto probabilmente una buona interazione, 0.0 è quasi sicuramente un bot'. Per semplicità, nell'esempio accetteremo tutti i contributi di qualsiasi utente con un punteggio di 0.5 o superiore.
Ed ecco un esempio dell'oggetto restituito:
<?php ( [success] => 1 [challenge_ts] => 2018-11-01T22:31:14Z [hostname] => recaptcha.local [score] => 0.9 [action] => contact ) ?>
Per saperne di più sulla configurazione lato server clicca qui.
Conclusione
Come detto in precedenza, questo è un esempio molto semplice. Quando viene utilizzato in produzione, dovete assicirarvi che venga utilizzata un'ottima validazione lato client e lato server, come per qualsiasi form.
Se si richiede una validazione più complessa, potrebbe valere la pena dare un'occhiata alla libreria PHP.
