Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Efterhånden som web- og mobilapplikationer er blevet mere populære, er risikoen for spam og anden ondsindet aktivitet også blevet større. CAPTCHA'er kan være en praktisk sikkerhedsforanstaltning, der er værd at integrere for at forhindre disse typer sikkerhedstrusler.

En CAPTCHA er en minimal sikkerhedsfunktion, der almindeligvis er integreret med webformularer for at forhindre automatiserede angreb fra spambots. Det sikrer, at brugeren, der får adgang til en applikation, faktisk er menneskelig og ikke en bot, der udfører ondsindet kode.

Hvad er CAPTCHA?

Akronymet CAPTCHA står for Completely Automated Public Turing test for at fortælle computere og mennesker fra hinanden. Det refererer til en computergenereret test, der kontrollerer, om en bestemt bruger, der interagerer med din applikation, er et menneske og ikke en bot.

Der er forskellige typer CAPTCHA-tests, du kan integrere i din applikation, såsom tekstbaserede og lydbaserede CAPTCHA'er. Den mest populære og effektive type er dog Google reCAPTCHA. Den kontrollerer for at skelne mellem rigtige brugere og bots ved hjælp af avancerede risikoanalysealgoritmer.

instagram viewer

Google reCAPTCHA kommer i to versioner:

  • reCAPTCHA V3: Denne version kører i baggrunden og bestemmer en samlet score baseret på brugerens adfærd.
  • reCAPTCHA V2: Denne version placerer afkrydsningsfeltet "Jeg er ikke en robot" på godkendelsesformularen.

Denne guide vil udforske Google reCAPTCHA V2. Læs videre for at lære, hvordan du integrerer det i en React-applikation.

Registrer React-applikationen på reCAPTCHA Admin Console

For at komme i gang skal du registrere din applikation på reCAPTCHAs udviklerkonsol. Gå over til Googles reCAPTCHA Admin Console, log ind med din Google-konto, og udfyld de nødvendige formularoplysninger.

Angiv etiketnavnet, vælg reCAPTCHA V2, og på rullemenuen skal du vælge bekræftelsesanmodningerne ved at bruge afkrydsningsfeltet "Jeg er ikke en robot". Angiv endelig din ansøgnings domænenavn. For lokal udvikling, skriv lokal vært som domænenavn.

Når den har registreret din app, omdirigerer webstedet dig til en ny side med din genererede hemmelighed og webstedsnøgler.

Opret en React Client

Dette projekt er todelt: du vil oprette en React-klient, der gengiver en simpel loginformular med Google reCAPTCHA og en Ekspres-backend, der foretager POST-anmodninger til reCAPTCHA's API for at bekræfte det token, der genereres, efter at en bruger har fuldført reCAPTCHA'en udfordring.

Opret en projektmappe lokalt til at rumme dine projektfiler. Næste, oprette React-applikationen og ændre den aktuelle mappe til klientens. I rodmappen i din klientmappe skal du oprette en .env-fil for at gemme API-hemmelige nøgle og webstedsnøgle.

REACT_APP_reCAPTCHA_SITE_KEY = 'webstedsnøgle'
REACT_APP_reCAPTCHA_SECRET_KEY = 'hemmelig nøgle'

Du kan finde dette projekts kode i dens GitHub-depot.

Installer de nødvendige pakker

Installer Axios, du skal bruge dette bibliotek til at lave HTTP-anmodninger fra browseren og React-Google-reCAPTCHA. Denne pakke giver en React-specifik implementering til reCAPTCHA API.

npm installer react-recaptcha-google axios --save

Integrer Google reCAPTCHA i React-applikationen

Åbn src/App.js fil, slet kedelpladen React-koden, og tilføj koden nedenfor:

Denne komponent vil gengive en simpel loginformular, der inkluderer Google reCAPTCHA-widgetten.

Importer først React-, Axios- og react-google-recaptcha-pakkerne:

importere React, { useState, useRef } fra'reagere';
importere Axios fra'aksios';
importere ReCAPTCHA fra'react-google-recaptcha';

Definer derefter tre tilstandsvariable: successMsg, errorMsg og validToken. Din kode vil opdatere disse tilstande efter vellykket formularindsendelse og reCAPTCHA-validering. Få desuden webstedet og de hemmelige nøgler fra ENV-filen.

fungereApp() {
konst [SuccessMsg, setSuccessMsg] = useState("")
konst [ErrorMsg, setErrorMsg] = useState("")
konst [valid_token, setValidToken] = useState([]);
konst SITE_KEY = proces.env. REACT_APP_reCAPTCHA_SITE_KEY;
konst SECRET_KEY = proces.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Definer en useRef-hook, der refererer til reCAPTCHA-komponenten, for at fange det token, der genereres, efter at en bruger har fuldført reCAPTCHA-udfordringerne.

konst captchaRef = brugRef(nul);

Opret derefter en handleSubmit-funktion, der skal kaldes, når en bruger indsender login-formularen. Denne funktion henter tokenet fra reCAPTCHA-komponenten og kalder derefter Nulstil metode til at nulstille reCAPTCHA for at tillade efterfølgende kontrol.

Derudover tjekker den, om tokenet findes, og kalder verifyToken-funktionen for at bekræfte tokenet. Når den har verificeret tokenet, opdaterer den validToken-tilstanden med API-svardata.

konst handleSubmit = asynkron (e) => {
 e.preventDefault();
lade token = captchaRef.current.getValue();
 captchaRef.current.reset();
hvis (polet) {
lade valid_token = vente verifyToken (token);
 setValidToken (gyldig_token);
hvis (gyldig_token[0].succes rigtigt) {
konsol.log("verificeret");
 setSuccessMsg("Hurra!! du har indsendt formularen")
 } andet {
konsol.log("Ikke verificeret");
 setErrorMsg(" Undskyld!! Bekræft, at du ikke er en bot")
 }
 }
 }

Til sidst skal du definere verifyToken-funktionen, som sender en POST-anmodning til et Express-serverslutpunkt ved hjælp af Axios, og videregiver reCAPTCHA-tokenet og den hemmelige nøgle i anmodningsteksten. Hvis anmodningen lykkes, skubber den svardataene til APIResponse-arrayet og returnerer arrayet som et resultat.

konst verifyToken = asynkron (token) => {
lade APIResponse = [];
prøve {
lade svar = vente Axios.post(` http://localhost: 8000/verify-token', {
 reCAPTCHA_TOKEN: token,
 Secret_Key: SECRET_KEY,
 });
 APIResponse.push (svar['data']);
Vend tilbage APIResponse;
 } fangst (fejl) {
konsol.log (fejl);
 }
 };

Til sidst skal du returnere en formular med reCAPTCHA-komponenten. Denne komponent bruger referencekrogen og site-nøglen som rekvisitter til at konfigurere og vise reCAPTCHA-widgetten.

Når en bruger indsender formularen, gengiver komponenten en succes- eller fejlmeddelelse baseret på værdien af ​​validToken-tilstand. Hvis reCAPTCHA-tokenet er gyldigt, hvilket betyder, at en bruger har gennemført reCAPTCHA-udfordringerne med succes, viser den succesmeddelelsen, ellers viser den fejlmeddelelsen.

Vend tilbage (
"App">
"App-header"> 
"logIn-form">


 {valid_token.length > 0 && valid_token[0].succes rigtigt
? <h3klassenavn="tekstsucces">{SuccessMsg}h3>
: <h3klassenavn="tekstfejl">{ErrorMsg} h3>}


Brugernavn</p>
"tekst" pladsholder="Brugernavn..." />




Adgangskode</p>
"adgangskode" pladsholder = "Adgangskode..." />


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








eksportStandard App

Kør endelig udviklingsserveren og gå over til din browser på http://localhost: 3000 for at se resultaterne.

Opret Express Backend

For at komme i gang, i rodmappen i hele projektmappen, oprette en Express-webserver, og installer disse pakker:

npm installer express cors axios body-parser

Konfigurer Express Server

Åbn derefter filen index.js i serverprojektmappen, og tilføj denne kode:

konst udtrykke = kræve('udtrykke')
konst axios = kræve('aksios');
konst cors = kræve('cors');
konst app = express();
konst bodyParser = kræve('body-parser');
konst jsonParser = bodyParser.json();
konst PORT = proces.env. PORT || 8000;


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


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


prøve {
lade svar = vente axios.post(` https://www.google.com/recaptcha/api/siteverify? hemmelighed=${Secret_Key}&svar=${reCAPTCHA_TOKEN}`);
konsol.log (respons.data);


Vend tilbage res.status(200).json({
 succes:rigtigt,
 besked: "Token er blevet bekræftet",
 verification_info: response.data
 });
 } fangst(fejl) {
konsol.log (fejl);


Vend tilbage res.status(500).json({
 succes:falsk,
 besked: "Fejl ved bekræftelse af token"
 })
 }
});
app.lyt (PORT, () => konsol.log(`App startede på port ${PORT}`));

Denne kode gør følgende:

  • Serveren definerer en Post-rute, der laver en asynkron HTTP POST-anmodning til Googles reCAPTCHA API til verificere reCAPTCHA-tokenet ved hjælp af Axios, og videregive den hemmelige nøgle til godkendelse i anmodningens URL.
  • Hvis reCAPTCHA-tokenet er verificeret, svarer serveren med et JSON-objekt, der indeholder en "success"-egenskab sat til true, en "message"-egenskab angiver, at tokenet er blevet bekræftet, og en "verification_info"-egenskab, der indeholder oplysninger om bekræftelsessvaret fra Googles API.
  • Hvis der opstår en fejl under verifikationsprocessen, svarer serveren med et JSON-objekt, der indeholder en egenskaben "success" sat til false og en "message"-egenskab, der angiver, at der var en fejl ved at bekræfte polet.

Kør endelig nodeserveren og test reCAPTCHA-funktionens funktionalitet.

node index.js

Kan reCAPTCHAs garantere sikkerhed mod spambots?

Ifølge Google har dens reCAPTCHA-tjeneste en succesrate på over 99%, hvilket betyder, at kun en lille procentdel af spam kan omgå reCAPTCHA-sikkerhedsfunktionen.

reCAPTCHA er ikke idiotsikker, da beslutsomme, dårlige skuespillere stadig kan finde løsninger. Men det er fortsat et vigtigt værktøj, der kan reducere risikoen fra spambots betydeligt.