{"id":24819,"date":"2021-05-22T11:40:00","date_gmt":"2021-05-22T08:40:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24819"},"modified":"2021-10-18T03:11:25","modified_gmt":"2021-10-18T00:11:25","slug":"convalida-google-recaptcha-utilizzando-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/convalida-google-recaptcha-utilizzando-javascript\/","title":{"rendered":"Convalida Google reCAPTCHA utilizzando JavaScript"},"content":{"rendered":"

Google reCAPTCHA \u00e8 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, \u00e8 possibile risparmiare spazio sul server dall’inserimento di record di spam non necessari nel database. Ci fa anche risparmiare tempo poich\u00e9 non riceviamo mai commenti spam nella nostra casella di posta.<\/p>\n

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 \u00e8 valida, solo il nostro modulo dovrebbe procedere.<\/p>\n

Ci sono 2 modi per convalidare la risposta, uno \u00e8 lato server e l’altro \u00e8 lato client. In questo articolo, ci concentriamo sulla convalida lato client e quindi studiamo come convalidare Google reCAPTCHA utilizzando JavaScript.<\/p>\n

Se stai cercando la convalida lato server, fai riferimento all’articolo Utilizzo di Google reCAPTCHA sui moduli del tuo sito web con PHP<\/a>.<\/p>\n

Registra il sito e ottieni le chiavi API<\/h3>\n

Per iniziare, devi registrare il tuo sito qui \u2013 <\/a>https:\/\/www.google.com\/recaptcha\/admin<\/a>.<\/p>\n

\"Convalida<\/a><\/p>\n

Scegli l’opzione "reCAPTCHA v2" che fornisce una casella di controllo "Non sono un robot".<\/p>\n

Una volta inseriti i dettagli nel modulo sopra, otterrai la chiave del sito e la chiave segreta. Poich\u00e9 abbiamo a che fare con la convalida lato client, abbiamo solo bisogno di una chiave del sito.<\/p>\n

Se vuoi testarlo su un server locale, aggiungi "localhost" come dominio.<\/p>\n

Convalida Google reCAPTCHA utilizzando JavaScript<\/h3>\n

Innanzitutto, devi aggiungere Google reCAPTCHA al tuo modulo. Puoi farlo usando il codice qui sotto.<\/p>\n

<form method=\"post\" onsubmit=\"return submitUserForm();\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"g-recaptcha\" data-sitekey=\"YOUR_SITE_KEY\" data-callback=\"verifyCaptcha\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<div id=\"g-recaptcha-error\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script><\/code><\/pre>\n
Nel codice sopra, sto usando onsubmit<\/code>event. Questo perch\u00e9 quando l’utente invia un modulo, dobbiamo controllare la risposta reCAPTCHA e quindi consentirgli di inviare un modulo.<\/p>\n
Quindi ho aggiunto un "verifyCaptcha" come nome di una funzione di callback all’attributo "data-callback". User\u00f2 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.<\/p>\n
Dovresti sostituire il segnaposto "YOUR_SITE_KEY" con la tua chiave del sito effettiva.<\/p>\n
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.<\/p>\n
<script>\nfunction submitUserForm() {\n\u00a0\u00a0\u00a0\u00a0var response = grecaptcha.getResponse();\n\u00a0\u00a0\u00a0\u00a0if(response.length == 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '<span style=\"color:red;\">This field is required.<\/span>';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return true;\n}\n\u00a0\nfunction verifyCaptcha() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '';\n}\n<\/script><\/code><\/pre>\n
Nel metodo submitUserForm<\/code>otteniamo la risposta reCAPTCHA usando grecaptcha.getResponse()<\/code>. Questa \u00e8 una funzione integrata fornita dal servizio Google reCAPTCHA.<\/p>\n
Se la risposta non \u00e8 valida, restituisce 0. Significa che un utente non ha ancora convalidato reCAPTCHA. E cos\u00ec, genera un errore e si aggiunge al div che ha id ‘g-recaptcha-error’.<\/p>\n
Quando Google reCAPTCHA invia una risposta valida, restituisco un valore vero, che consente al modulo di procedere ulteriormente.<\/p>\n
Il verifyCaptcha<\/code>metodo riceve una chiamata quando risolvi tutti gli enigmi di reCAPTCHA. Stiamo quindi rimuovendo il messaggio di errore una volta risolto un enigma.<\/p>\n
Il nostro codice finale \u00e8:<\/p>\n
<form method=\"post\" onsubmit=\"return submitUserForm();\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"g-recaptcha\" data-sitekey=\"YOUR_SITE_KEY\" data-callback=\"verifyCaptcha\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<div id=\"g-recaptcha-error\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script>\n<script>\nfunction submitUserForm() {\n\u00a0\u00a0\u00a0\u00a0var response = grecaptcha.getResponse();\n\u00a0\u00a0\u00a0\u00a0if(response.length == 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '<span style=\"color:red;\">This field is required.<\/span>';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return true;\n}\n\u00a0\nfunction verifyCaptcha() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '';\n}\n<\/script><\/code><\/pre>\n
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.<\/p>\n
articoli Correlati<\/h4>\n