Convalida Google reCAPTCHA utilizzando JavaScript
Google reCAPTCHA è una scelta popolare per proteggere i moduli del sito Web da spam e bot. Il reCAPTCHA chiede agli utenti di risolvere semplici enigmi facili per gli umani ma difficili per i robot. Di conseguenza, è possibile risparmiare spazio sul server dall’inserimento di record di spam non necessari nel database. Ci fa anche risparmiare tempo poiché non riceviamo mai commenti spam nella nostra casella di posta.
Quando aggiungiamo un reCAPTCHA di Google nei moduli del sito Web, dobbiamo scrivere un pezzo di codice per convalidare la risposta di reCAPTCHA. Se una risposta è valida, solo il nostro modulo dovrebbe procedere.
Ci sono 2 modi per convalidare la risposta, uno è lato server e l’altro è lato client. In questo articolo, ci concentriamo sulla convalida lato client e quindi studiamo come convalidare Google reCAPTCHA utilizzando JavaScript.
Se stai cercando la convalida lato server, fai riferimento all’articolo Utilizzo di Google reCAPTCHA sui moduli del tuo sito web con PHP.
Registra il sito e ottieni le chiavi API
Per iniziare, devi registrare il tuo sito qui – https://www.google.com/recaptcha/admin.
Scegli l’opzione "reCAPTCHA v2" che fornisce una casella di controllo "Non sono un robot".
Una volta inseriti i dettagli nel modulo sopra, otterrai la chiave del sito e la chiave segreta. Poiché abbiamo a che fare con la convalida lato client, abbiamo solo bisogno di una chiave del sito.
Se vuoi testarlo su un server locale, aggiungi "localhost" come dominio.
Convalida Google reCAPTCHA utilizzando JavaScript
Innanzitutto, devi aggiungere Google reCAPTCHA al tuo modulo. Puoi farlo usando il codice qui sotto.
<form method="post" onsubmit="return submitUserForm();">
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="verifyCaptcha"></div>
<div id="g-recaptcha-error"></div>
<input type="submit" name="submit" value="Submit" />
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>Nel codice sopra, sto usando onsubmitevent. Questo perché quando l’utente invia un modulo, dobbiamo controllare la risposta reCAPTCHA e quindi consentirgli di inviare un modulo.
Quindi ho aggiunto un "verifyCaptcha" come nome di una funzione di callback all’attributo "data-callback". Userò questo metodo di callback per rimuovere il messaggio di errore una volta passata la convalida. Ho anche aggiunto un div con un id "g-recaptcha-error" per visualizzare il messaggio di errore.
Dovresti sostituire il segnaposto "YOUR_SITE_KEY" con la tua chiave del sito effettiva.
Infine, scriviamo un codice JavaScript che gestisca la risposta reCAPTCHA. E in base alla risposta mostra un messaggio di errore o consente al modulo di procedere.
<script>
function submitUserForm() {
var response = grecaptcha.getResponse();
if(response.length == 0) {
document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
return false;
}
return true;
}
function verifyCaptcha() {
document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>Nel metodo submitUserFormotteniamo la risposta reCAPTCHA usando grecaptcha.getResponse(). Questa è una funzione integrata fornita dal servizio Google reCAPTCHA.
Se la risposta non è valida, restituisce 0. Significa che un utente non ha ancora convalidato reCAPTCHA. E così, genera un errore e si aggiunge al div che ha id ‘g-recaptcha-error’.
Quando Google reCAPTCHA invia una risposta valida, restituisco un valore vero, che consente al modulo di procedere ulteriormente.
Il verifyCaptchametodo riceve una chiamata quando risolvi tutti gli enigmi di reCAPTCHA. Stiamo quindi rimuovendo il messaggio di errore una volta risolto un enigma.
Il nostro codice finale è:
<form method="post" onsubmit="return submitUserForm();">
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="verifyCaptcha"></div>
<div id="g-recaptcha-error"></div>
<input type="submit" name="submit" value="Submit" />
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function submitUserForm() {
var response = grecaptcha.getResponse();
if(response.length == 0) {
document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
return false;
}
return true;
}
function verifyCaptcha() {
document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>Spero che tu capisca come convalidare Google reCAPTCHA utilizzando JavaScript. Provalo nel tuo progetto e condividi i tuoi pensieri o suggerimenti nella sezione commenti qui sotto.
articoli Correlati
- Integra Google Invisible reCAPTCHA con PHP
- Una guida sull’aggiunta di Google reCAPTCHA v3 al tuo sito web Laravel
- Come aggiungere Non sono un robot captcha In Laravel Forms