Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Ettersom nett- og mobilapplikasjoner har blitt mer populære, har også risikoen for spam og annen ondsinnet aktivitet blitt mer populær. CAPTCHA-er kan være et praktisk sikkerhetstiltak verdt å integrere for å forhindre denne typen sikkerhetstrusler.

En CAPTCHA er en minimal sikkerhetsfunksjon, vanligvis integrert med nettskjemaer for å forhindre automatiserte angrep fra spambotter. Det sikrer at brukeren som får tilgang til en applikasjon virkelig er menneskelig, og ikke en bot som kjører ondsinnet kode.

Hva er CAPTCHA?

Akronymet CAPTCHA står for Completely Automated Public Turing test for å fortelle Computers and Humans Apart. Det refererer til en datamaskingenerert test som sjekker om en bestemt bruker som samhandler med applikasjonen din er et menneske og ikke en bot.

Det finnes forskjellige typer CAPTCHA-tester du kan integrere i applikasjonen din, for eksempel tekstbaserte og lydbaserte CAPTCHA-er. Den mest populære og effektive typen er imidlertid Google reCAPTCHA. Den sjekker for å skille mellom ekte brukere og roboter ved hjelp av avanserte risikoanalysealgoritmer.

Google reCAPTCHA kommer i to versjoner:

  • reCAPTCHA V3: Denne versjonen kjører i bakgrunnen og bestemmer en samlet poengsum basert på brukerens oppførsel.
  • reCAPTCHA V2: Denne versjonen plasserer avmerkingsboksen "Jeg er ikke en robot" på autentiseringsskjemaet.

Denne veiledningen vil utforske Google reCAPTCHA V2. Les videre for å lære hvordan du integrerer den i en React-applikasjon.

Registrer React-applikasjonen på reCAPTCHA Admin Console

For å komme i gang må du registrere applikasjonen din på reCAPTCHAs utviklerkonsoll. Gå over til Googles reCAPTCHA-administrasjonskonsoll, logg på med Google-kontoen din, og fyll inn de nødvendige skjemadetaljene.

Oppgi etikettnavnet, velg reCAPTCHA V2, og på rullegardinmenyen velger du bekreftelsesforespørslene ved å bruke avmerkingsboksen "Jeg er ikke en robot". Til slutt, oppgi appens domenenavn. For lokal utvikling, skriv lokal vert som domenenavn.

Når den har registrert appen din, vil nettstedet omdirigere deg til en ny side med den genererte hemmeligheten og nettstedsnøklene.

Opprett en React Client

Dette prosjektet er todelt: du vil opprette en React-klient som gjengir et enkelt påloggingsskjema med Google reCAPTCHA og en Express-backend som sender POST-forespørsler til reCAPTCHAs API for å bekrefte tokenet som genereres etter at en bruker fullfører reCAPTCHA utfordring.

Opprett en prosjektmappe lokalt for å inneholde prosjektfilene dine. Neste, opprette React-applikasjonen og endre gjeldende katalog til klientens. Opprett en .env-fil i rotkatalogen til klientmappen for å lagre API-hemmelige nøkkelen og nettstedsnøkkelen.

REACT_APP_reCAPTCHA_SITE_KEY = 'nettstedsnøkkel'
REACT_APP_reCAPTCHA_SECRET_KEY = 'hemmelig nøkkel'

Du kan finne dette prosjektets kode i sin GitHub-depot.

Installer de nødvendige pakkene

Installer Axios, du bruker dette biblioteket til å lage HTTP-forespørsler fra nettleseren og React-Google-reCAPTCHA. Denne pakken gir en React-spesifikk implementering for reCAPTCHA API.

npm installer react-recaptcha-google axios --save

Integrer Google reCAPTCHA i React-applikasjonen

Åpne src/App.js-filen, slett React-koden og legg til koden nedenfor:

Denne komponenten vil gjengi et enkelt påloggingsskjema som inkluderer Google reCAPTCHA-widgeten.

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

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

Definer deretter tre tilstandsvariabler: successMsg, errorMsg og validToken. Koden din vil oppdatere disse tilstandene ved vellykket skjemainnsending og reCAPTCHA-validering. I tillegg kan du hente nettstedet og hemmelige nøkler fra ENV-filen.

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

Definer en useRef-hook som refererer til reCAPTCHA-komponenten, for å fange opp tokenet som genereres etter at en bruker har fullført reCAPTCHA-utfordringene.

konst captchaRef = brukRef(null);

Deretter oppretter du en handleSubmit-funksjon som skal ringes opp når en bruker sender inn påloggingsskjemaet. Denne funksjonen henter tokenet fra reCAPTCHA-komponenten og kaller deretter nullstille metode for å tilbakestille reCAPTCHA for å tillate etterfølgende kontroller.

I tillegg sjekker den om tokenet eksisterer, og kaller opp verifyToken-funksjonen for å bekrefte tokenet. Når den har verifisert tokenet, vil den oppdatere validToken-tilstanden med API-svardataene.

konst handleSubmit = asynkron (e) => {
 e.preventDefault();
la token = captchaRef.current.getValue();
 captchaRef.current.reset();
hvis (token) {
la valid_token = avvente verifyToken (token);
 setValidToken (gyldig_token);
hvis (gyldig_token[0].suksess ekte) {
konsoll.Logg("verifisert");
 setSuccessMsg("Hurra!! du har sendt inn skjemaet")
 } ellers {
konsoll.Logg("ikke bekreftet");
 setErrorMsg(" Beklager!! Bekreft at du ikke er en bot")
 }
 }
 }

Til slutt, definer verifyToken-funksjonen som vil sende en POST-forespørsel til et Express-serverendepunkt ved å bruke Axios, og sende reCAPTCHA-tokenet og den hemmelige nøkkelen i forespørselsteksten. Hvis forespørselen er vellykket, skyver den svardataene til APIResponse-matrisen og returnerer matrisen som et resultat.

konst verifyToken = asynkron (token) => {
la APIResponse = [];
prøve {
la svar = avvente Axios.post(` http://localhost: 8000/verify-token`, {
 reCAPTCHA_TOKEN: token,
 Secret_Key: SECRET_KEY,
 });
 APIResponse.push (respons['data']);
komme tilbake APIResponse;
 } å fange (feil) {
konsoll.log (feil);
 }
 };

Til slutt, returner et skjema med reCAPTCHA-komponenten. Denne komponenten tar inn referansekroken og stedsnøkkelen som rekvisitter for å konfigurere og vise reCAPTCHA-widgeten.

Når en bruker sender inn skjemaet, gjengir komponenten en suksess- eller feilmelding basert på verdien av validToken-tilstanden. Hvis reCAPTCHA-tokenet er gyldig, noe som betyr at en bruker har fullført reCAPTCHA-utfordringene, viser den suksessmeldingen, ellers viser den feilmeldingen.

komme tilbake (
"App">
"App-header"> 
"innloggingsskjema">


 {valid_token.length > 0 && valid_token[0].suksess ekte
? <h3klassenavn="tekstsuksess">{SuccessMsg}h3>
: <h3klassenavn="tekstfeil">{ErrorMsg} h3>}


Brukernavn</p>
"tekst" plassholder="Brukernavn..." />




Passord</p>
"passord" plassholder = "Passord..." />


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








eksportmisligholde App

Til slutt, kjør utviklingsserveren og gå over til nettleseren din http://localhost: 3000 for å se resultatene.

Lag Express Backend

For å komme i gang, i rotkatalogen til hele prosjektmappen, opprette en Express-webserver, og installer disse pakkene:

npm installer express cors axios body-parser

Sett opp Express Server

Deretter åpner du index.js-filen i serverprosjektmappen, og legger til denne koden:

konst uttrykke = krever('uttrykke')
konst axios = krever('aksios');
konst cors = krever('cors');
konst app = express();
konst bodyParser = krever("kropps-parser");
konst jsonParser = bodyParser.json();
konst PORT = prosess.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 {
la svar = avvente axios.post(` https://www.google.com/recaptcha/api/siteverify? hemmelig=${Secret_Key}&svar=${reCAPTCHA_TOKEN}`);
konsoll.log (respons.data);


komme tilbake res.status(200).json({
 suksess:ekte,
 beskjed: "Token ble bekreftet",
 verification_info: response.data
 });
 } å fange(feil) {
konsoll.log (feil);


komme tilbake res.status(500).json({
 suksess:falsk,
 beskjed: "Feil ved bekreftelse av token"
 })
 }
});
app.listen (PORT, () => konsoll.Logg(`App startet på port ${PORT}`));

Denne koden gjør følgende:

  • Serveren definerer en Post-rute som sender en asynkron HTTP POST-forespørsel til Googles reCAPTCHA API til verifiser reCAPTCHA-tokenet ved å bruke Axios, og send den hemmelige nøkkelen for autentisering i forespørsels-URLen.
  • Hvis reCAPTCHA-tokenet er vellykket bekreftet, svarer serveren med et JSON-objekt som inneholder en "success"-egenskap satt til true, en "message"-egenskap som indikerer at tokenet ble bekreftet, og en "verification_info"-egenskap som inneholder informasjon om bekreftelsessvaret fra Googles API.
  • Hvis det oppstår en feil under verifiseringsprosessen, svarer serveren med et JSON-objekt som inneholder en "success"-egenskapen satt til false og en "message"-egenskap som indikerer at det var en feil under verifiseringen token.

Til slutt, kjør nodeserveren og test reCAPTCHA-funksjonen.

node index.js

Kan reCAPTCHAs garantere sikkerhet mot spambotter?

Ifølge Google har reCAPTCHA-tjenesten en suksessrate på over 99 %, noe som betyr at bare en liten prosentandel av spam kan omgå reCAPTCHA-sikkerhetsfunksjonen.

reCAPTCHA er ikke idiotsikker, siden målbevisste dårlige skuespillere fortsatt kan finne løsninger. Men det er fortsatt et viktig verktøy som kan redusere risikoen fra spambotter betydelig.