I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Man mano che le applicazioni Web e mobili sono diventate più popolari, è aumentato anche il rischio di spam e altre attività dannose. I CAPTCHA possono essere una pratica misura di sicurezza che vale la pena integrare per prevenire questo tipo di minacce alla sicurezza.

Un CAPTCHA è una funzionalità di sicurezza minima, comunemente integrata con i moduli Web per prevenire attacchi automatici da parte di spambot. Garantisce che l'utente che accede a un'applicazione sia effettivamente umano e non un bot che esegue codice dannoso.

Cos'è CAPTCHA?

L'acronimo CAPTCHA sta per test di Turing pubblico completamente automatizzato per distinguere computer e esseri umani. Si riferisce a un test generato dal computer che controlla per determinare se un particolare utente che interagisce con la tua applicazione è un essere umano e non un bot.

instagram viewer

Esistono diversi tipi di test CAPTCHA che puoi integrare nella tua applicazione, ad esempio CAPTCHA basati su testo e audio. Tuttavia, il tipo più popolare ed efficace è Google reCAPTCHA. Controlla per distinguere tra utenti reali e bot utilizzando algoritmi avanzati di analisi del rischio.

Google reCAPTCHA è disponibile in due versioni:

  • reCAPTCHA V3: questa versione viene eseguita in background e determina un punteggio complessivo basato sul comportamento dell'utente.
  • reCAPTCHA V2: questa versione inserisce la casella di controllo "Non sono un robot" nel modulo di autenticazione.

Questa guida esplorerà Google reCAPTCHA V2. Continua a leggere per sapere come integrarlo in un'applicazione React.

Registra l'applicazione React sulla console di amministrazione reCAPTCHA

Per iniziare, devi registrare la tua applicazione sulla console per sviluppatori di reCAPTCHA. Vai a Console di amministrazione reCAPTCHA di Google, accedi con il tuo account Google e compila i dettagli del modulo richiesti.

Fornire il nome dell'etichetta, selezionare reCAPTCHA V2e nella casella a discesa, scegli le richieste di verifica utilizzando l'opzione della casella di controllo "Non sono un robot". Infine, fornisci il nome di dominio della tua applicazione. Per lo sviluppo locale, digitare localhost come nome di dominio.

Una volta registrata la tua app, il sito ti reindirizzerà a una nuova pagina con il segreto generato e le chiavi del sito.

Crea un client React

Questo progetto è duplice: creerai un client React che esegue il rendering di un semplice modulo di accesso con Google reCAPTCHA e un Back-end espresso che invia richieste POST all'API di reCAPTCHA per verificare il token generato dopo che un utente ha completato il reCAPTCHA sfida.

Crea una cartella di progetto in locale per ospitare i tuoi file di progetto. Prossimo, creare l'applicazione React e cambiare la directory corrente in quella del client. Nella directory principale della cartella del client, crea un file .env per archiviare la chiave segreta API e la chiave del sito.

REACT_APP_reCAPTCHA_SITE_KEY = 'chiave del sito'
REACT_APP_reCAPTCHA_SECRET_KEY = 'chiave segreta'

Puoi trovare il codice di questo progetto nel suo file Deposito GitHub.

Installa i pacchetti richiesti

Installa Axios, utilizzerai questa libreria per effettuare richieste HTTP dal browser e React-Google-reCAPTCHA. Questo pacchetto fornisce un'implementazione specifica di React per l'API reCAPTCHA.

npm install react-recaptcha-google axios --save

Integra Google reCAPTCHA nell'applicazione React

Apri il src/App.js, elimina il codice standard di React e aggiungi il codice seguente:

Questo componente renderà un semplice modulo di accesso che include il widget Google reCAPTCHA.

Innanzitutto, importa i pacchetti React, Axios e react-google-recaptcha:

importare Reagire, {useState, useRef} da'reagire';
importare Axios da'assio';
importare ReCAPTCHA da'reagire-google-recaptcha';

Quindi definire tre variabili di stato: successMsg, errorMsg e validToken. Il tuo codice aggiornerà questi stati dopo l'invio corretto del modulo e la convalida reCAPTCHA. Inoltre, ottieni il sito e le chiavi segrete dal file ENV.

funzioneApp() {
cost [SuccessMsg, setSuccessMsg] = useState("")
cost [ErrorMsg, setErrorMsg] = useState("")
cost [valid_token, setValidToken] = useState([]);
cost SITE_KEY = process.env. REACT_APP_reCAPTCHA_SITE_KEY;
cost SECRET_KEY = process.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Definisci un hook useRef che fa riferimento al componente reCAPTCHA, per acquisire il token generato dopo che un utente ha completato le sfide reCAPTCHA.

cost captchaRef = useRef(nullo);

Quindi, crea una funzione handleSubmit da chiamare quando un utente invia il modulo di accesso. Questa funzione ottiene il token dal componente reCAPTCHA e quindi chiama il file Ripristina metodo per reimpostare il reCAPTCHA per consentire successivi controlli.

Inoltre, controlla se il token esiste e chiama la funzione verifyToken per verificare il token. Una volta verificato il token, aggiornerà lo stato validToken con i dati di risposta dell'API.

cost handleSubmit = asincrono (e) => {
 e.preventDefault();
permettere token = captchaRef.current.getValue();
 captchaRef.current.reset();
Se (gettone) {
permettere token_valido = aspetta verificareToken (token);
 setValidToken (token_valido);
Se (token_valido[0].successo VERO) {
consolare.tronco d'albero("verificato");
 setSuccessMsg("Evviva!! hai inviato il modulo")
 } altro {
consolare.tronco d'albero("non verificato");
 setErrorMsg(" Scusa!! Verifica di non essere un bot")
 }
 }
 }

Infine, definisci la funzione describeToken che invierà una richiesta POST a un endpoint del server Express utilizzando Axios, passando il token reCAPTCHA e la chiave segreta nel corpo della richiesta. Se la richiesta ha esito positivo, invia i dati della risposta all'array APIResponse e restituisce l'array come risultato.

cost verificaToken = asincrono (token) => {
permettere Risposta API = [];
Tentativo {
permettere risposta = aspetta Axios.post(` http://localhost: 8000/token di verifica`, {
 reCAPTCHA_TOKEN: token,
 Chiave_Segreta: SECRET_KEY,
 });
 APIResponse.push (risposta['dati']);
ritorno Risposta API;
 } presa (errore) {
consolare.log (errore);
 }
 };

Infine, restituisci un modulo con il componente reCAPTCHA. Questo componente accetta l'hook di riferimento e la chiave del sito come oggetti di scena per configurare e visualizzare il widget reCAPTCHA.

Quando un utente invia il modulo, il componente esegue il rendering di un messaggio di esito positivo o di errore in base al valore dello stato validToken. Se il token reCAPTCHA è valido, ovvero un utente ha completato con successo le sfide reCAPTCHA, visualizza il messaggio di successo, altrimenti visualizza il messaggio di errore.

ritorno (
"App">
"Intestazione app"> 
"logIn-modulo">


 {valid_token.length> 0 && token_valido[0].successo VERO
? <h3nome della classe="testosuccesso">{SuccessMsg}h3>
: <h3nome della classe="errore di testo">{Msg di errore} h3>}


Nome utente</p>
"testo" segnaposto="Nome utente..." />




Parola d'ordine</p>
"parola d'ordine" segnaposto = "Parola d'ordine..." />


 nomeclasse="ricapitola"
 chiave del sito={SITE_KEY}
 ref={rifcaptcha}
 />








esportarepredefinito App

Infine, esegui il server di sviluppo e vai al tuo browser di http://localhost: 3000 per visualizzare i risultati.

Crea il back-end rapido

Per iniziare, nella directory principale dell'intera cartella del progetto, creare un server web Express, e installa questi pacchetti:

npm install express cors axios body-parser

Configurare il server Express

Successivamente, apri il file index.js nella cartella del progetto del server e aggiungi questo codice:

cost espresso = richiedere('esprimere')
cost assi = richiedere('assio');
cost cor = richiedere('cor');
cost app = espresso();
cost bodyParser = richiedere('analizzatore del corpo');
cost jsonParser = bodyParser.json();
cost PORTA = process.env. PORTO || 8000;


app.use (jsonParser);
app.use(cors());


app.post("/token di verifica", asincrono (req, res) => {
cost { reCAPTCHA_TOKEN, Secret_Key} = req.body;


Tentativo {
permettere risposta = aspetta axios.post(` https://www.google.com/recaptcha/api/siteverify? segreto=${Chiave_Segreta}&risposta=${reCAPTCHA_TOKEN}`);
consolare.log (response.data);


ritorno res.stato(200).json({
 successo:VERO,
 Messaggio: "Token verificato con successo",
 verifica_info: risposta.dati
 });
 } presa(errore) {
consolare.log (errore);


ritorno res.stato(500).json({
 successo:falso,
 Messaggio: "Errore durante la verifica del token"
 })
 }
});
app.listen (PORTA, () => consolare.tronco d'albero(`App avviata al porto ${PORTA}`));

Questo codice fa quanto segue:

  • Il server definisce un percorso Post che invia una richiesta HTTP POST asincrona all'API reCAPTCHA di Google per verificare il token reCAPTCHA utilizzando Axios, passando la chiave segreta per l'autenticazione nell'URL della richiesta.
  • Se il token reCAPTCHA viene verificato correttamente, il server risponde con un oggetto JSON contenente una proprietà "success" impostata su true, una proprietà "message" che indica che il token è stato verificato correttamente e una proprietà "verification_info" contenente informazioni sulla risposta di verifica da parte di Google API.
  • Se si verifica un errore durante il processo di verifica, il server risponde con un oggetto JSON contenente a proprietà "success" impostata su false e una proprietà "message" che indica che si è verificato un errore durante la verifica del file gettone.

Infine, esegui il server del nodo e testa la funzionalità della funzione reCAPTCHA.

nodo index.js

I reCAPTCHA possono garantire la sicurezza contro gli spambot?

Secondo Google, il suo servizio reCAPTCHA ha una percentuale di successo superiore al 99%, il che significa che solo una piccola percentuale di spam può aggirare la funzione di sicurezza reCAPTCHA.

reCAPTCHA non è infallibile, dal momento che malintenzionati determinati possono ancora trovare soluzioni alternative. Ma rimane uno strumento essenziale che può ridurre significativamente il rischio di spambots.