Integrirajte Google reCAPTCHA u React aplikaciju

Kako web i mobilne aplikacije postaju sve popularnije, tako raste i rizik od neželjene pošte i drugih zlonamjernih aktivnosti. CAPTCHA može biti zgodna sigurnosna mjera koju vrijedi integrirati kako bi se spriječile ove vrste sigurnosnih prijetnji.

CAPTCHA je minimalna sigurnosna značajka, obično integrirana s web obrascima kako bi se spriječili automatski napadi spambota. Osigurava da je korisnik koji pristupa aplikaciji doista čovjek, a ne bot koji izvršava zlonamjerni kod.

Što je CAPTCHA?

Akronim CAPTCHA je kratica za potpuno automatizirani javni Turingov test za razlikovanje računala i ljudi. Odnosi se na računalno generirani test koji provjerava je li određeni korisnik koji komunicira s vašom aplikacijom čovjek, a ne bot.

Postoje različite vrste CAPTCHA testova koje možete integrirati u svoju aplikaciju, kao što su tekstualni i zvučni CAPTCHA testovi. Međutim, najpopularnija i najučinkovitija vrsta je Google reCAPTCHA. Provjerava razliku između stvarnih korisnika i botova pomoću naprednih algoritama analize rizika.

Google reCAPTCHA dolazi u dvije verzije:

• reCAPTCHA V3: ova verzija radi u pozadini i određuje ukupni rezultat na temelju ponašanja korisnika.
• reCAPTCHA V2: Ova verzija postavlja potvrdni okvir "Ja nisam robot" na obrazac za provjeru autentičnosti.

Ovaj vodič će istražiti Google reCAPTCHA V2. Čitajte dalje kako biste saznali kako ga integrirati u React aplikaciju.

Registrirajte React aplikaciju na reCAPTCHA administratorskoj konzoli

Za početak morate registrirati svoju aplikaciju na reCAPTCHA konzoli za razvojne programere. Prijeđite na Googleova reCAPTCHA administratorska konzola, prijavite se svojim Google računom i ispunite tražene podatke obrasca.

Navedite naziv oznake, odaberite reCAPTCHA V2, a na padajućem okviru odaberite zahtjeve za potvrdu pomoću opcije potvrdnog okvira "Nisam robot". Na kraju navedite naziv domene svoje aplikacije. Za lokalni razvoj, tip lokalni domaćin kao naziv domene.

Nakon što registrira vašu aplikaciju, web mjesto će vas preusmjeriti na novu stranicu s vašim generiranim tajnim ključevima i ključevima web mjesta.

Stvorite React klijenta

Ovaj je projekt dvostruk: izradit ćete React klijent koji prikazuje jednostavan obrazac za prijavu s Google reCAPTCHA i Ekspresna pozadina koja šalje POST zahtjeve reCAPTCHA API-ju za provjeru tokena generiranog nakon što korisnik ispuni reCAPTCHA izazov.

Stvorite mapu projekta lokalno za smještaj datoteka projekta. Sljedeći, izraditi React aplikaciju i promijeniti trenutni direktorij u klijentov. U korijenskom direktoriju mape vašeg klijenta stvorite .env datoteku za pohranjivanje tajnog ključa API-ja i ključa web-mjesta.

REACT_APP_reCAPTCHA_SITE_KEY = 'ključ stranice'
REACT_APP_reCAPTCHA_SECRET_KEY = 'tajni ključ'

Kôd ovog projekta možete pronaći u GitHub spremište.

Instalirajte potrebne pakete

Instalirajte Axios, koristit ćete ovu biblioteku za postavljanje HTTP zahtjeva iz preglednika i React-Google-reCAPTCHA. Ovaj paket pruža implementaciju specifičnu za React za reCAPTCHA API.

npm instaliraj react-recaptcha-google axios --save

Integrirajte Google reCAPTCHA u aplikaciju React

Otvori src/App.js datoteku, izbrišite predložak React koda i dodajte kod ispod:

Ova komponenta će prikazati jednostavan obrazac za prijavu koji uključuje Google reCAPTCHA widget.

Prvo uvezite pakete React, Axios i react-google-recaptcha:

uvoz Reagiraj, {useState, useRef} iz'reagirati';
uvoz Axios iz'axios';
uvoz ReCAPTCHA iz'react-google-recaptcha';

Zatim definirajte tri varijable stanja: successMsg, errorMsg i validToken. Vaš će kôd ažurirati ta stanja nakon uspješnog slanja obrasca i reCAPTCHA provjere. Uz to, preuzmite web mjesto i tajne ključeve iz ENV datoteke.

funkcijaaplikacija() {
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 = proces.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Definirajte useRef kuku koja upućuje na reCAPTCHA komponentu, kako biste uhvatili token generiran nakon što korisnik dovrši reCAPTCHA izazove.

konst captchaRef = useRef(ništavan);

Zatim stvorite funkciju handleSubmit koja će se pozvati kada korisnik pošalje obrazac za prijavu. Ova funkcija dobiva token iz komponente reCAPTCHA i zatim poziva resetirati metoda za poništavanje reCAPTCHA-e kako bi se omogućile naknadne provjere.

Osim toga, provjerava postoji li token i poziva funkciju verifyToken za provjeru tokena. Nakon što potvrdi token, ažurirat će stanje validToken podacima o odgovoru API-ja.

konst handleSubmit = asinkroni (e) => {
 e.preventDefault();
neka token = captchaRef.current.getValue();
 captchaRef.current.reset();
ako (token) {
neka valid_token = čekati verifyToken (token);
 setValidToken (važeći_token);
ako (važeći_token[0].uspjeh pravi) {
konzola.log("provjereno");
 setSuccessMsg("Ura!! poslali ste obrazac")
 } drugo {
konzola.log("nije provjereno");
 setErrorMsg(" Oprosti!! Potvrdite da niste bot")
 }
 }
 }

Konačno, definirajte funkciju verifyToken koja će poslati POST zahtjev krajnjoj točki poslužitelja Express koristeći Axios, prosljeđujući reCAPTCHA token i tajni ključ u tijelu zahtjeva. Ako je zahtjev uspješan, on gura podatke odgovora u niz APIResponse i vraća niz kao rezultat.

konst verifyToken = asinkroni (token) => {
neka APIResponse = [];
probati {
neka odgovor = čekati Axios.post(` http://localhost: 8000/verify-token`, {
 reCAPTCHA_TOKEN: oznaka,
 Tajni_ključ: SECRET_KEY,
 });
 APIResponse.push (odgovor['podaci']);
povratak APIResponse;
 } ulov (pogreška) {
konzola.log (greška);
 }
 };

Na kraju, vratite obrazac s komponentom reCAPTCHA. Ova komponenta uzima referentnu kuku i ključ stranice kao rekvizite za konfiguraciju i prikaz reCAPTCHA widgeta.

Kada korisnik podnese obrazac, komponenta prikazuje poruku o uspjehu ili pogrešci na temelju vrijednosti stanja validToken. Ako je reCAPTCHA token valjan, što znači da je korisnik uspješno dovršio reCAPTCHA izazove, prikazuje se poruka o uspjehu, u suprotnom, prikazuje se poruka o pogrešci.

povratak (
"Aplikacija">
"Zaglavlje aplikacije"> 
"obrazac za prijavu">


 {valid_token.length > 0 && valid_token[0].uspjeh pravi
? <h3naziv klase="textSuccess">{SuccessMsg}h3>
: <h3naziv klase="textError">{ErrorMsg} h3>}

Korisničko ime</p>
"tekst" rezervirano mjesto="Korisničko ime..." />

Lozinka</p>
"lozinka" rezervirano mjesto = "Lozinka..." />
 ime klase="recaptcha"
 sitekey={SITE_KEY}
 ref={captchaRef}
 />
"podnijeti">Pošalji</button>
 </form>
 </div>
 </header>
 </div>
 );
}


izvozzadano aplikacija

Na kraju pokrenite razvojni poslužitelj i prijeđite na svoj preglednik http://localhost: 3000 za pregled rezultata.

Stvorite Express Backend

Za početak, u korijenskom direktoriju cijele mape projekta, stvoriti Express web poslužitelj, i instalirajte ove pakete:

npm install express cors axios body-parser

Postavite Express poslužitelj

Zatim otvorite datoteku index.js u mapi projekta poslužitelja i dodajte ovaj kod:

konst izraziti = zahtijevati('izraziti')
konst axios = zahtijevati('axios');
konst cors = zahtijevati('cors');
konst app = express();
konst bodyParser = zahtijevati('parser tijela');
konst jsonParser = bodyParser.json();
konst LUKA = proces.env. LUKA || 8000;
app.use (jsonParser);
app.use (cors());
app.post("/verify-token", asinkroni (req, res) => {
konst { reCAPTCHA_TOKEN, Secret_Key} = req.body;
probati {
neka odgovor = čekati axios.post(` https://www.google.com/recaptcha/api/siteverify? tajna=${Secret_Key}&odgovor=${reCAPTCHA_TOKEN}`);
konzola.log (odgovor.podaci);
povratak res.status(200).json({
 uspjeh:pravi,
 poruka: "Token uspješno potvrđen",
 verification_info: response.data
 });
 } ulov(pogreška) {
konzola.log (greška);
povratak res.status(500).json({
 uspjeh:lažno,
 poruka: "Pogreška pri potvrdi tokena"
 })
 }
});
app.listen (PORT, () => konzola.log(`Aplikacija je pokrenuta na priključku ${PORT}`));

Ovaj kôd čini sljedeće:

• Poslužitelj definira Post rutu koja šalje asinkroni HTTP POST zahtjev Googleovom reCAPTCHA API-ju za provjerite reCAPTCHA token koristeći Axios, prosljeđujući tajni ključ za autentifikaciju u URL-u zahtjeva.
• Ako je reCAPTCHA token uspješno provjeren, poslužitelj odgovara JSON objektom koji sadrži svojstvo "uspjeh" postavljeno na true, svojstvo "poruka" koji pokazuje da je token uspješno provjeren i svojstvo "verification_info" koje sadrži informacije o odgovoru za potvrdu od Google-a API.
• Ako se tijekom postupka provjere dogodi pogreška, poslužitelj odgovara JSON objektom koji sadrži a svojstvo "uspjeh" postavljeno na lažno i svojstvo "poruka" koje pokazuje da je došlo do pogreške pri provjeri znak.

Na kraju pokrenite poslužitelj čvora i testirajte funkcionalnost značajke reCAPTCHA.

indeks čvora.js

Mogu li reCAPTCHA jamčiti sigurnost od neželjenih robota?

Prema Googleu, njegova usluga reCAPTCHA ima stopu uspješnosti od preko 99%, što znači da samo mali postotak neželjene pošte može zaobići sigurnosnu značajku reCAPTCHA.

reCAPTCHA nije sigurna jer odlučni loši akteri još uvijek mogu pronaći zaobilazna rješenja. Ali ostaje bitan alat koji može značajno smanjiti rizik od neželjenih robota.