Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

I takt med att webb- och mobilapplikationer har blivit mer populära, har även risken för spam och annan skadlig aktivitet ökat. CAPTCHA kan vara en praktisk säkerhetsåtgärd värd att integrera för att förhindra dessa typer av säkerhetshot.

En CAPTCHA är en minimal säkerhetsfunktion, vanligen integrerad med webbformulär för att förhindra automatiska attacker från spambots. Det säkerställer att användaren som kommer åt en applikation verkligen är mänsklig och inte en bot som exekverar skadlig kod.

Vad är CAPTCHA?

Förkortningen CAPTCHA står för Completely Automated Public Turing-test för att tala om för datorer och människor. Det hänvisar till ett datorgenererat test som kontrollerar om en viss användare som interagerar med din applikation är en människa och inte en bot.

Det finns olika typer av CAPTCHA-tester du kan integrera i din applikation, till exempel textbaserade och ljudbaserade CAPTCHA. Den mest populära och effektiva typen är dock Google reCAPTCHA. Den kontrollerar för att skilja mellan riktiga användare och bots med hjälp av avancerade riskanalysalgoritmer.

instagram viewer

Google reCAPTCHA finns i två versioner:

  • reCAPTCHA V3: Denna version körs i bakgrunden och bestämmer en total poäng baserat på användarens beteende.
  • reCAPTCHA V2: Denna version placerar kryssrutan "Jag är inte en robot" på autentiseringsformuläret.

Den här guiden kommer att utforska Google reCAPTCHA V2. Läs vidare för att lära dig hur du integrerar det i en React-applikation.

Registrera React Application på reCAPTCHA Admin Console

För att komma igång måste du registrera din applikation på reCAPTCHAs utvecklarkonsol. Gå över till Googles reCAPTCHA-administratörskonsol, logga in med ditt Google-konto och fyll i de nödvändiga formuläruppgifterna.

Ange etikettens namn, välj reCAPTCHA V2, och välj verifieringsförfrågningarna i rullgardinsmenyn med kryssrutan "Jag är inte en robot". Ange slutligen ditt programs domännamn. För lokal utveckling, skriv lokal värd som domännamn.

När den har registrerat din app kommer webbplatsen att omdirigera dig till en ny sida med din genererade hemlighet och webbplatsnycklar.

Skapa en React Client

Detta projekt är tvådelat: du kommer att skapa en React-klient som återger ett enkelt inloggningsformulär med Googles reCAPTCHA och en Express-backend som gör POST-förfrågningar till reCAPTCHA: s API för att verifiera token som genereras efter att en användare slutfört reCAPTCHA utmaning.

Skapa en projektmapp lokalt för att hysa dina projektfiler. Nästa, skapa React-applikationen och ändra den aktuella katalogen till klientens. Skapa en .env-fil i rotkatalogen i din klientmapp för att lagra API: s hemliga nyckel och platsnyckel.

REACT_APP_reCAPTCHA_SITE_KEY = 'webbplatsnyckel'
REACT_APP_reCAPTCHA_SECRET_KEY = 'hemlig nyckel'

Du kan hitta detta projekts kod i dess GitHub-förråd.

Installera de nödvändiga paketen

Installera Axios, du kommer att använda det här biblioteket för att göra HTTP-förfrågningar från webbläsaren och React-Google-reCAPTCHA. Detta paket tillhandahåller en React-specifik implementering för reCAPTCHA API.

npm installera react-recaptcha-google axios --save

Integrera Google reCAPTCHA i React-applikationen

Öppna src/App.js-filen, ta bort reaktorkoden och lägg till koden nedan:

Den här komponenten återger ett enkelt inloggningsformulär som inkluderar Google reCAPTCHA-widgeten.

Importera först paketen React, Axios och react-google-recaptcha:

importera Reagera, { useState, useRef } från'reagera';
importera Axios från"axios";
importera ReCAPTCHA från"reagera-google-recaptcha";

Definiera sedan tre tillståndsvariabler: successMsg, errorMsg och validToken. Din kod kommer att uppdatera dessa tillstånd efter lyckad formulärinlämning och reCAPTCHA-validering. Hämta dessutom webbplatsen och hemliga nycklar från ENV-filen.

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

Definiera en useRef-hook som refererar till reCAPTCHA-komponenten, för att fånga den token som genereras efter att en användare slutfört reCAPTCHA-utmaningarna.

konst captchaRef = useRef(null);

Skapa sedan en handleSubmit-funktion att anropa när en användare skickar in inloggningsformuläret. Denna funktion hämtar token från reCAPTCHA-komponenten och anropar sedan återställa metod för att återställa reCAPTCHA för att tillåta efterföljande kontroller.

Dessutom kontrollerar den om token finns och anropar verifyToken-funktionen för att verifiera token. När den har verifierat token kommer den att uppdatera validToken-tillståndet med API-svarsdata.

konst handleSubmit = asynkron (e) => {
 e.preventDefault();
låta token = captchaRef.current.getValue();
 captchaRef.current.reset();
om (token) {
låta valid_token = vänta verifyToken (token);
 setValidToken (giltig_token);
om (valid_token[0].Framgång Sann) {
trösta.logga("verifierad");
 setSuccessMsg("Hurra!! du har skickat in formuläret")
 } annan {
trösta.logga("obekräftat");
 setErrorMsg(" Förlåt!! Verifiera att du inte är en bot")
 }
 }
 }

Slutligen definierar du verifyToken-funktionen som skickar en POST-begäran till en Express-serverslutpunkt med Axios, och skickar reCAPTCHA-token och den hemliga nyckeln i förfrågningskroppen. Om begäran lyckas, skickar den svarsdata till APIResponse-matrisen och returnerar matrisen som ett resultat.

konst verifyToken = asynkron (token) => {
låta APIResponse = [];
Prova {
låta svar = vänta Axios.post(` http://localhost: 8000/verifiera-token"., {
 reCAPTCHA_TOKEN: token,
 Secret_Key: SECRET_KEY,
 });
 APIResponse.push (svar['data']);
lämna tillbaka APIResponse;
 } fånga (fel) {
trösta.log (fel);
 }
 };

Till sist, returnera ett formulär med reCAPTCHA-komponenten. Den här komponenten tar in referenskroken och platsnyckeln som rekvisita för att konfigurera och visa reCAPTCHA-widgeten.

När en användare skickar formuläret återger komponenten ett framgångs- eller felmeddelande baserat på värdet för validToken-tillståndet. Om reCAPTCHA-tokenen är giltig, vilket betyder att en användare har slutfört reCAPTCHA-utmaningarna framgångsrikt, visar den framgångsmeddelandet, annars visar den felmeddelandet.

lämna tillbaka (
"App">
"App-header"> 
"Inloggningsformulär">


 {valid_token.length > 0 && valid_token[0].Framgång Sann
? <h3klassnamn="textframgång">{SuccessMsg}h3>
: <h3klassnamn="textfel">{ErrorMsg} h3>}


Användarnamn</p>
"text" platshållare="Användarnamn..." />




Lösenord</p>
"Lösenord" platshållare = "Lösenord..." />


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








exporterastandard App

Slutligen, kör utvecklingsservern och gå över till din webbläsare på http://localhost: 3000 för att se resultaten.

Skapa Express Backend

För att komma igång, i rotkatalogen för hela projektmappen, skapa en Express-webbserver, och installera dessa paket:

npm installera express cors axios body-parser

Konfigurera Express Server

Öppna sedan filen index.js i serverprojektmappen och lägg till den här koden:

konst uttrycka = behöva('uttrycka')
konst axios = behöva("axios");
konst cors = behöva('cors');
konst app = express();
konst bodyParser = behöva("kroppstolkare");
konst jsonParser = bodyParser.json();
konst PORT = process.env. PORT || 8000;


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


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


Prova {
låta svar = vänta axios.post(` https://www.google.com/recaptcha/api/siteverify? hemlig=${Secret_Key}&svar=${reCAPTCHA_TOKEN}`);
trösta.log (response.data);


lämna tillbaka res.status(200).json({
 Framgång:Sann,
 meddelande: "Token har verifierats",
 verification_info: response.data
 });
 } fånga(fel) {
trösta.log (fel);


lämna tillbaka res.status(500).json({
 Framgång:falsk,
 meddelande: "Fel vid verifiering av token"
 })
 }
});
app.lyssna (PORT, () => trösta.logga(`App startade på port ${PORT}`));

Den här koden gör följande:

  • Servern definierar en Post-rutt som gör en asynkron HTTP POST-begäran till Googles reCAPTCHA API för att verifiera reCAPTCHA-tokenen med Axios och skicka den hemliga nyckeln för autentisering i begäran-URL: n.
  • Om reCAPTCHA-token har verifierats, svarar servern med ett JSON-objekt som innehåller en "success"-egenskap inställd på true, en "message"-egenskap som indikerar att token har verifierats, och en "verification_info"-egenskap som innehåller information om verifieringssvaret från Googles API.
  • Om ett fel uppstår under verifieringsprocessen, svarar servern med ett JSON-objekt som innehåller en "success"-egenskapen inställd på false och en "message"-egenskap som indikerar att det uppstod ett fel vid verifiering av tecken.

Kör slutligen nodservern och testa reCAPTCHA-funktionen.

nod index.js

Kan reCAPTCHAs garantera säkerhet mot spambots?

Enligt Google har dess reCAPTCHA-tjänst en framgångsgrad på över 99 %, vilket betyder att endast en liten andel skräppost kan kringgå säkerhetsfunktionen reCAPTCHA.

reCAPTCHA är inte idiotsäker, eftersom beslutsamma dåliga skådespelare fortfarande kan hitta lösningar. Men det är fortfarande ett viktigt verktyg som avsevärt kan minska risken från spambots.