Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

S rastúcou popularitou webových a mobilných aplikácií rastie aj riziko spamu a iných škodlivých aktivít. CAPTCHA môžu byť praktickým bezpečnostným opatrením, ktoré stojí za to integrovať, aby ste predišli týmto typom bezpečnostných hrozieb.

CAPTCHA je funkcia minimálneho zabezpečenia, bežne integrovaná s webovými formulármi, aby sa zabránilo automatizovaným útokom spamovacích robotov. Zabezpečuje, že používateľ pristupujúci k aplikácii je skutočne človek a nie bot spúšťajúci škodlivý kód.

Čo je CAPTCHA?

Skratka CAPTCHA znamená Úplne automatizovaný verejný Turingov test, ktorý rozlíši počítače a ľudí. Ide o počítačom generovaný test, ktorý kontroluje, či konkrétny používateľ interagujúci s vašou aplikáciou je človek a nie robot.

Existujú rôzne typy testov CAPTCHA, ktoré môžete integrovať do svojej aplikácie, napríklad textové a zvukové CAPTCHA. Najpopulárnejším a najúčinnejším typom je však Google reCAPTCHA. Kontroluje rozlíšenie medzi skutočnými používateľmi a robotmi pomocou pokročilých algoritmov analýzy rizika.

instagram viewer

Google reCAPTCHA prichádza v dvoch verziách:

  • reCAPTCHA V3: Táto verzia beží na pozadí a určuje celkové skóre na základe správania používateľa.
  • reCAPTCHA V2: Táto verzia umiestni na overovací formulár začiarkavacie políčko „Nie som robot“.

Táto príručka preskúma Google reCAPTCHA V2. Čítajte ďalej a dozviete sa, ako ho integrovať do aplikácie React.

Zaregistrujte aplikáciu React v správcovskej konzole reCAPTCHA

Ak chcete začať, musíte svoju aplikáciu zaregistrovať na vývojárskej konzole reCAPTCHA. Zamierte k Správcovská konzola reCAPTCHA spoločnosti Google, prihláste sa pomocou svojho účtu Google a vyplňte požadované údaje formulára.

Zadajte názov štítka, vyberte reCAPTCHA V2a v rozbaľovacom poli vyberte požiadavky na overenie pomocou začiarkavacieho políčka „Nie som robot“. Nakoniec zadajte názov domény vašej aplikácie. Pre miestny rozvoj, typ localhost ako názov domény.

Po zaregistrovaní vašej aplikácie vás web presmeruje na novú stránku s vygenerovaným tajným kľúčom a kľúčmi lokality.

Vytvorte klienta React

Tento projekt je dvojaký: vytvoríte klienta React, ktorý vykreslí jednoduchý prihlasovací formulár s Google reCAPTCHA a Expresný backend, ktorý odosiela požiadavky POST do rozhrania API reCAPTCHA na overenie tokenu vygenerovaného po tom, ako používateľ dokončí reCAPTCHA výzva.

Vytvorte lokálny priečinok projektu, do ktorého budú uložené súbory projektu. Ďalšie, vytvorte aplikáciu React a zmeňte aktuálny adresár na adresár klienta. V koreňovom adresári priečinka klienta vytvorte súbor .env na uloženie tajného kľúča API a kľúča lokality.

REACT_APP_reCAPTCHA_SITE_KEY = 'site key'
REACT_APP_reCAPTCHA_SECRET_KEY = 'tajný kľúč'

Kód tohto projektu nájdete v ňom úložisko GitHub.

Nainštalujte požadované balíky

Nainštalujte si Axios, túto knižnicu budete používať na vytváranie požiadaviek HTTP z prehliadača a React-Google-reCAPTCHA. Tento balík poskytuje implementáciu špecifickú pre React pre API reCAPTCHA.

npm install recaptcha-google axios --save

Integrujte Google reCAPTCHA do aplikácie React

Otvor súbor src/App.js, odstráňte štandardný kód reakcie a pridajte kód nižšie:

Tento komponent vykreslí jednoduchý prihlasovací formulár, ktorý obsahuje miniaplikáciu Google reCAPTCHA.

Najprv importujte balíky React, Axios a respond-google-recaptcha:

importovať Reagovať, { useState, useRef } od'reagovať';
importovať Axios od"axios";
importovať ReCAPTCHA od'react-google-recaptcha';

Potom definujte tri stavové premenné: successMsg, errorMsg a validToken. Váš kód aktualizuje tieto stavy po úspešnom odoslaní formulára a overení reCAPTCHA. Okrem toho získajte lokalitu a tajné kľúče zo súboru ENV.

funkciuApp() {
konšt [SuccessMsg, setSuccessMsg] = useState("")
konšt [ErrorMsg, setErrorMsg] = useState("")
konšt [valid_token, setValidToken] = useState([]);
konšt SITE_KEY = process.env. REACT_APP_reCAPTCHA_SITE_KEY;
konšt SECRET_KEY = process.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Definujte háčik useRef, ktorý odkazuje na komponent reCAPTCHA, na zachytenie tokenu vygenerovaného po tom, ako používateľ dokončí výzvy reCAPTCHA.

konšt captchaRef = useRef(nulový);

Potom vytvorte funkciu handleSubmit, ktorá sa bude volať, keď používateľ odošle prihlasovací formulár. Táto funkcia získa token z komponentu reCAPTCHA a potom zavolá resetovať spôsob resetovania reCAPTCHA, aby sa umožnili následné kontroly.

Okrem toho skontroluje, či token existuje, a zavolá funkciuoverToken na overenie tokenu. Po overení tokenu aktualizuje stav validToken pomocou údajov odozvy API.

konšt handleSubmit = async (e) => {
 e.preventDefault();
nech token = captchaRef.current.getValue();
 captchaRef.current.reset();
ak (token) {
nech platný_token = čakať verifikovaťToken (token);
 setValidToken (platný_token);
ak (platný_token[0].úspech pravda) {
konzoly.log("overené");
 setSuccessMsg("Hurá!! odoslali ste formulár")
 } inak {
konzoly.log("Neoverené");
 setErrorMsg(" Prepáč!! Overte si, že nie ste robot")
 }
 }
 }

Nakoniec definujte funkciu authenticToken, ktorá odošle požiadavku POST na koncový bod servera Express pomocou Axios, pričom v tele požiadavky odovzdá token reCAPTCHA a tajný kľúč. Ak je požiadavka úspešná, odošle údaje odpovede do poľa APIResponse a ako výsledok vráti pole.

konšt overiť token = async (token) => {
nech APIResponse = [];
skúste {
nech odpoveď = čakať Axios.post(` http://localhost: 8 000/overovací token, {
 reCAPTCHA_TOKEN: token,
 Secret_Key: SECRET_KEY,
 });
 APIResponse.push (odpoveď['data']);
vrátiť APIResponse;
 } chytiť (chyba) {
konzoly.log (chyba);
 }
 };

Nakoniec vráťte formulár s komponentom reCAPTCHA. Tento komponent používa referenčný hák a kľúč lokality ako rekvizity na konfiguráciu a zobrazenie miniaplikácie reCAPTCHA.

Keď používateľ odošle formulár, komponent vykreslí úspešnú alebo chybovú správu na základe hodnoty stavu validToken. Ak je token reCAPTCHA platný, čo znamená, že používateľ úspešne dokončil výzvy reCAPTCHA, zobrazí sa správa o úspechu, v opačnom prípade sa zobrazí chybové hlásenie.

vrátiť (
"aplikácia">
"Hlavička aplikácie"> 
"prihlasovací formulár">


 {valid_token.length > 0 && platný_token[0].úspech pravda
? <h3className="textSuccess">{SuccessMsg}h3>
: <h3className="textError">{ErrorMsg} h3>}


Používateľské meno</p>
"text" zástupný symbol ="Používateľské meno..." />




Heslo</p>
"heslo" zástupný symbol = "Heslo..." />


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








exportpredvolená App

Nakoniec spustite vývojový server a prejdite do svojho prehliadača http://localhost: 3000 na zobrazenie výsledkov.

Vytvorte expresný backend

Ak chcete začať, v koreňovom adresári celého priečinka projektu vytvorte expresný webový server, a nainštalujte tieto balíčky:

npm install express cors axios body-parser

Nastavte expresný server

Ďalej otvorte súbor index.js v priečinku projektu servera a pridajte tento kód:

konšt vyjadriť = vyžadovať('expresné')
konšt axios = vyžadovať("axios");
konšt kors = vyžadovať('cors');
konšt app = express();
konšt bodyParser = vyžadovať('body-parser');
konšt jsonParser = bodyParser.json();
konšt PORT = process.env. PORT || 8000;


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


app.post("/verify-token", async (req, res) => {
konšt { reCAPTCHA_TOKEN, Secret_Key} = req.body;


skúste {
nech odpoveď = čakať axios.post(` https://www.google.com/recaptcha/api/siteverify? tajomstvo =${Secret_Key}&response=${reCAPTCHA_TOKEN}`);
konzoly.log (údaje o odpovedi);


vrátiť res.status(200.json({
 úspech:pravda,
 správa: "Token úspešne overený",
 overovacie_informácie: response.data
 });
 } chytiť(chyba) {
konzoly.log (chyba);


vrátiť res.status(500.json({
 úspech:falošný,
 správa: "Chyba pri overovaní tokenu"
 })
 }
});
app.listen (PORT, () => konzoly.log(`Aplikácia sa spustila na porte ${PORT}`));

Tento kód robí nasledovné:

  • Server definuje smerovanie príspevku, ktoré odošle asynchrónnu požiadavku HTTP POST do rozhrania reCAPTCHA API spoločnosti Google overte token reCAPTCHA pomocou Axios a odovzdajte tajný kľúč na overenie v adrese URL požiadavky.
  • Ak je token reCAPTCHA úspešne overený, server odpovie objektom JSON obsahujúcim vlastnosť „úspech“ nastavenú na hodnotu true, vlastnosť „správa“ označujúce, že token bol úspešne overený, a vlastnosť „verification_info“ obsahujúca informácie o overovacej odpovedi od spoločnosti Google API.
  • Ak sa počas procesu overovania vyskytne chyba, server odpovie objektom JSON obsahujúcim a vlastnosť „úspech“ nastavená na hodnotu false a vlastnosť „správa“ označujúca, že pri overovaní došlo k chybe žetón.

Nakoniec spustite uzolový server a otestujte funkčnosť funkcie reCAPTCHA.

node index.js

Môže reCAPTCHA zaručiť bezpečnosť pred spamovacími robotmi?

Podľa Google má jeho služba reCAPTCHA úspešnosť viac ako 99 %, čo znamená, že len malé percento spamu dokáže obísť bezpečnostnú funkciu reCAPTCHA.

reCAPTCHA nie je spoľahlivá, pretože odhodlaní zlí herci môžu stále nájsť riešenia. Zostáva však základným nástrojom, ktorý môže výrazne znížiť riziko spôsobené spamovacími robotmi.