Integrujte Google reCAPTCHA do aplikácie React

Integrujte Google reCAPTCHA do aplikácie React
Č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.





nemožno spustiť Windows 10 v núdzovom režime

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.

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 V2 a 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.

 Nastavenia Google reCAPTCHA

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.





ako prinútiť pascu poraziť v garáži
 kľúče reCAPTCHA

Vytvorte klienta React

Tento projekt je dvojaký: vytvoríte klienta React, ktorý vykreslí jednoduchý prihlasovací formulár s Google reCAPTCHA a expresný backend, ktorý odošle POST žiadosti do API reCAPTCHA na overenie tokenu vygenerovaného po tom, čo používateľ dokončí výzvu reCAPTCHA.

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 = 'secret key'