Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Naarmate web- en mobiele applicaties populairder zijn geworden, neemt ook het risico van spam en andere kwaadaardige activiteiten toe. CAPTCHA's kunnen een handige beveiligingsmaatregel zijn die de moeite waard is om te integreren om dit soort beveiligingsbedreigingen te voorkomen.

Een CAPTCHA is een minimale beveiligingsfunctie die gewoonlijk wordt geïntegreerd met webformulieren om geautomatiseerde aanvallen door spambots te voorkomen. Het zorgt ervoor dat de gebruiker die een applicatie opent inderdaad een mens is en niet een bot die kwaadaardige code uitvoert.

Wat is CAPTCHA?

De afkorting CAPTCHA staat voor Completely Automated Public Turing test to tell Computers and Humans Apart. Het verwijst naar een door de computer gegenereerde test die controleert of een bepaalde gebruiker die met uw applicatie communiceert een mens is en geen bot.

Er zijn verschillende soorten CAPTCHA-tests die u in uw toepassing kunt integreren, zoals op tekst gebaseerde en op audio gebaseerde CAPTCHA's. Het meest populaire en effectieve type is echter Google reCAPTCHA. Het controleert om onderscheid te maken tussen echte gebruikers en bots met behulp van geavanceerde algoritmen voor risicoanalyse.

instagram viewer

Google reCAPTCHA komt in twee versies:

  • reCAPTCHA V3: Deze versie draait op de achtergrond en bepaalt een totaalscore op basis van het gedrag van de gebruiker.
  • reCAPTCHA V2: Deze versie plaatst het selectievakje "Ik ben geen robot" op het authenticatieformulier.

Deze gids zal Google reCAPTCHA V2 verkennen. Lees verder om te leren hoe u het in een React-toepassing kunt integreren.

Registreer de React-applicatie in de reCAPTCHA-beheerconsole

Om aan de slag te gaan, moet u uw applicatie registreren op de ontwikkelaarsconsole van reCAPTCHA. Ga naar De reCAPTCHA-beheerdersconsole van Google, log in met uw Google-account en vul de vereiste formuliergegevens in.

Geef de labelnaam op, selecteer reCAPTCHA V2, en kies in de vervolgkeuzelijst de verificatieverzoeken met behulp van de optie "Ik ben geen robot". Geef ten slotte de domeinnaam van uw toepassing op. Typ voor lokale ontwikkeling localhost als de domeinnaam.

Zodra het uw app heeft geregistreerd, zal de site u omleiden naar een nieuwe pagina met uw gegenereerde geheim en sitesleutels.

Maak een React-client aan

Dit project is tweeledig: je maakt een React-client die een eenvoudig inlogformulier weergeeft met de Google reCAPTCHA en een Express-backend die POST-verzoeken doet aan de API van reCAPTCHA om het token te verifiëren dat is gegenereerd nadat een gebruiker de reCAPTCHA heeft voltooid uitdaging.

Maak lokaal een projectmap aan om uw projectbestanden in op te slaan. Volgende, maak de React-applicatie en wijzig de huidige directory in die van de client. Maak in de hoofdmap van uw clientmap een .env-bestand om de geheime API-sleutel en de sitesleutel op te slaan.

REACT_APP_reCAPTCHA_SITE_KEY = 'sitesleutel'
REACT_APP_reCAPTCHA_SECRET_KEY = 'geheime sleutel'

U kunt de code van dit project vinden in de bijbehorende GitHub-opslagplaats.

Installeer de vereiste pakketten

Installeer Axios, u gebruikt deze bibliotheek om HTTP-verzoeken te doen vanuit de browser en React-Google-reCAPTCHA. Dit pakket biedt een React-specifieke implementatie voor de reCAPTCHA API.

npm install react-recaptcha-google axios --save

Integreer Google reCAPTCHA in de React-applicatie

Open de src/App.js-bestand, verwijder de boilerplate React-code en voeg de onderstaande code toe:

Dit onderdeel geeft een eenvoudig inlogformulier weer dat de Google reCAPTCHA-widget bevat.

Importeer eerst de pakketten React, Axios en react-google-recaptcha:

importeren Reageren, { useState, useRef } van'Reageer';
importeren Axio's van'axios';
importeren ReCAPTCHA van'reageer-google-recaptcha';

Definieer vervolgens drie statusvariabelen: successMsg, errorMsg en validToken. Uw code zal deze statussen bijwerken na succesvolle formulierverzending en reCAPTCHA-validatie. Haal bovendien de site- en geheime sleutels op uit het ENV-bestand.

functieapp() {
const [Succesbericht, setSuccesbericht] = useState("")
const [ErrorMsg, setErrorMsg] = useState("")
const [valid_token, setValidToken] = useState([]);
const SITE_KEY = proces.env. REACT_APP_reCAPTCHA_SITE_KEY;
const SECRET_KEY = proces.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Definieer een useRef-hook die verwijst naar de reCAPTCHA-component, om het token vast te leggen dat wordt gegenereerd nadat een gebruiker de reCAPTCHA-uitdagingen heeft voltooid.

const captchaRef = gebruikRef(nul);

Maak vervolgens een functie handleSubmit om aan te roepen wanneer een gebruiker het aanmeldingsformulier indient. Deze functie verkrijgt het token van de reCAPTCHA-component en roept vervolgens het resetten methode om de reCAPTCHA opnieuw in te stellen om latere controles mogelijk te maken.

Bovendien wordt gecontroleerd of het token bestaat en wordt de functie ExploreToken aangeroepen om het token te verifiëren. Zodra het token is geverifieerd, wordt de validToken-status bijgewerkt met de API-antwoordgegevens.

const handleSubmit = asynchroon (e) => {
 e.preventDefault();
laten token = captchaRef.current.getValue();
 captchaRef.current.reset();
als (fiche) {
laten valid_token = wachten verifiërenToken (token);
 setValidToken (geldig_token);
als (geldige_token[0].succes WAAR) {
troosten.log("geverifieerd");
 setSuccesMsg("Hoera!! je hebt het formulier verzonden")
 } anders {
troosten.log("niet geverifieerd");
 setFoutMsg(" Sorry!! Controleer of u geen bot bent")
 }
 }
 }

Definieer ten slotte de functie verificatieToken die een POST-verzoek naar een Express-servereindpunt zal sturen met behulp van Axios, waarbij het reCAPTCHA-token en de geheime sleutel in de hoofdtekst van het verzoek worden doorgegeven. Als het verzoek succesvol is, duwt het de antwoordgegevens naar de APIResponse-array en retourneert de array als resultaat.

const verificatieToken = asynchroon (fiche) => {
laten APIReactie = [];
poging {
laten reactie = wachten Axios.post(` http://localhost: 8000/verify-token`, {
 reCAPTCHA_TOKEN: teken,
 Secret_Key: SECRET_KEY,
 });
 APIResponse.push (antwoord['gegevens']);
opbrengst APIReactie;
 } vangst (fout) {
troosten.log (fout);
 }
 };

Retourneer ten slotte een formulier met de reCAPTCHA-component. Deze component gebruikt de reference hook en site key als rekwisieten om de reCAPTCHA-widget te configureren en weer te geven.

Wanneer een gebruiker het formulier indient, geeft de component een succes- of foutbericht weer op basis van de waarde van validToken state. Als het reCAPTCHA-token geldig is, wat betekent dat een gebruiker de reCAPTCHA-uitdagingen met succes heeft voltooid, wordt het succesbericht weergegeven, anders wordt het foutbericht weergegeven.

opbrengst (
"App">
"App-header"> 
"login formulier">


 {geldige_token.lengte > 0 && valid_token[0].succes WAAR
? <h3naam van de klasse="tekstSucces">{Succesbericht}h3>
: <h3naam van de klasse="tekstfout">{Foutbericht} h3>}


Gebruikersnaam</p>
"tekst" tijdelijke aanduiding="Gebruikersnaam..." />




Wachtwoord</p>
"wachtwoord" tijdelijke aanduiding = "Wachtwoord..." />


 classNaam="recaptcha"
 sitekey={SITE_KEY}
 ref={captchaRef}
 />








exporterenstandaard app

Voer ten slotte de ontwikkelingsserver uit en ga naar uw browser van http://localhost: 3000 om de resultaten te bekijken.

Maak de Express-backend

Om te beginnen, in de hoofdmap van de hele projectmap, een Express-webserver maken, en installeer deze pakketten:

npm install express cors axios body-parser

Stel de Express-server in

Open vervolgens het bestand index.js in de serverprojectmap en voeg deze code toe:

const uitdrukken = vereisen('nadrukkelijk')
const axio = vereisen('axios');
const koren = vereisen('cors');
const app = uitdrukken();
const bodyParser= vereisen('body-parser');
const jsonParser = bodyParser.json();
const PORT = proces.env. HAVEN || 8000;


app.gebruik (jsonParser);
app.gebruik (cors());


app.post("/verify-token", asynchroon (req, res) => {
const { reCAPTCHA_TOKEN, Secret_Key} = req.body;


poging {
laten reactie = wachten axios.post(` https://www.google.com/recaptcha/api/siteverify? geheim=${Secret_Key}&antwoord=${reCAPTCHA_TOKEN}`);
troosten.log (antwoord.gegevens);


opbrengst res.status(200.json({
 succes:WAAR,
 bericht: "Token succesvol geverifieerd",
 verificatie_info: respons.data
 });
 } vangst(fout) {
troosten.log (fout);


opbrengst res.status(500.json({
 succes:vals,
 bericht: "Fout bij verifiëren token"
 })
 }
});
app.listen (PORT, () => troosten.log(`App gestart op poort ${PORT}`));

Deze code doet het volgende:

  • De server definieert een Post-route die een asynchrone HTTP POST-aanvraag naar de reCAPTCHA-API van Google stuurt verifieer het reCAPTCHA-token met behulp van Axios en geef de geheime sleutel door voor authenticatie in de aanvraag-URL.
  • Als het reCAPTCHA-token met succes is geverifieerd, reageert de server met een JSON-object dat een "succes"-eigenschap bevat die is ingesteld op true, een "message"-eigenschap die aangeeft dat het token met succes is geverifieerd, en een 'verification_info'-eigenschap met informatie over het verificatieantwoord van Google's API.
  • Als er een fout optreedt tijdens het verificatieproces, reageert de server met een JSON-object dat een eigenschap "succes" ingesteld op false en een eigenschap "bericht" die aangeeft dat er een fout is opgetreden bij het verifiëren van het teken.

Voer ten slotte de knooppuntserver uit en test de functionaliteit van de reCAPTCHA-functie.

knooppunt index.js

Kunnen reCAPTCHA's beveiliging tegen spambots garanderen?

Volgens Google heeft de reCAPTCHA-service een slagingspercentage van meer dan 99%, wat betekent dat slechts een klein percentage van de spam de reCAPTCHA-beveiligingsfunctie kan omzeilen.

reCAPTCHA is niet onfeilbaar, aangezien vastberaden kwaadwillenden nog steeds oplossingen kunnen vinden. Maar het blijft een essentiële tool die het risico van spambots aanzienlijk kan verkleinen.