Integrirajte Google reCAPTCHA v aplikacijo React

Ker so spletne in mobilne aplikacije postale bolj priljubljene, se je povečalo tudi tveganje za neželeno pošto in druge zlonamerne dejavnosti. CAPTCHA je lahko priročen varnostni ukrep, ki ga je vredno integrirati, da preprečite tovrstne varnostne grožnje.

CAPTCHA je minimalna varnostna funkcija, ki je običajno integrirana s spletnimi obrazci za preprečevanje avtomatiziranih napadov neželene pošte. Zagotavlja, da je uporabnik, ki dostopa do aplikacije, res človek in ne bot, ki izvaja zlonamerno kodo.

Kaj je CAPTCHA?

Kratica CAPTCHA pomeni popolnoma avtomatiziran javni Turingov test za razlikovanje med računalniki in ljudmi. Nanaša se na računalniško ustvarjen test, ki preverja, ali je določen uporabnik, ki komunicira z vašo aplikacijo, človek in ne bot.

Obstajajo različne vrste testov CAPTCHA, ki jih lahko vključite v svojo aplikacijo, na primer CAPTCHA na podlagi besedila in zvoka. Vendar je najbolj priljubljena in učinkovita vrsta Google reCAPTCHA. Preverja razliko med resničnimi uporabniki in boti z uporabo naprednih algoritmov za analizo tveganja.

Google reCAPTCHA je na voljo v dveh različicah:

• reCAPTCHA V3: Ta različica deluje v ozadju in določa skupno oceno na podlagi vedenja uporabnika.
• reCAPTCHA V2: Ta različica na obrazcu za preverjanje pristnosti postavi potrditveno polje »Nisem robot«.

Ta vodnik bo raziskal Google reCAPTCHA V2. Preberite, če želite izvedeti, kako ga integrirati v aplikacijo React.

Registrirajte aplikacijo React na skrbniški konzoli reCAPTCHA

Za začetek morate svojo aplikacijo registrirati na konzoli za razvijalce reCAPTCHA. Pojdite na Googlova skrbniška konzola reCAPTCHA, prijavite se s svojim Google računom in izpolnite zahtevane podatke obrazca.

Vnesite ime oznake, izberite reCAPTCHA V2in v spustnem polju izberite potrditvene zahteve z možnostjo potrditvenega polja »Nisem robot«. Nazadnje navedite ime domene vaše aplikacije. Za lokalni razvoj tip lokalni gostitelj kot ime domene.

Ko registrira vašo aplikacijo, vas bo spletno mesto preusmerilo na novo stran z ustvarjeno skrivnostjo in ključi mesta.

Ustvarite odjemalca React

Ta projekt je dvojen: ustvarili boste odjemalca React, ki upodablja preprost obrazec za prijavo z Google reCAPTCHA in Express backend, ki pošilja zahteve POST API-ju reCAPTCHA za preverjanje žetona, ustvarjenega po tem, ko uporabnik dokonča reCAPTCHA izziv.

Lokalno ustvarite projektno mapo za shranjevanje projektnih datotek. Naslednji, ustvarite aplikacijo React in spremenite trenutni imenik v imenik odjemalca. V korenskem imeniku mape odjemalca ustvarite datoteko .env za shranjevanje skrivnega ključa API-ja in ključa mesta.

REACT_APP_reCAPTCHA_SITE_KEY = 'ključ spletnega mesta'
REACT_APP_reCAPTCHA_SECRET_KEY = 'skrivni ključ'

Kodo tega projekta najdete v Repozitorij GitHub.

Namestite zahtevane pakete

Namestite Axios, to knjižnico boste uporabljali za pošiljanje zahtev HTTP iz brskalnika in React-Google-reCAPTCHA. Ta paket zagotavlja izvedbo, specifično za React, za API reCAPTCHA.

npm namestite react-recaptcha-google axios --save

Integrirajte Google reCAPTCHA v aplikacijo React

Odprite datoteko src/App.js, izbrišite kodo Boilerplate React in dodajte spodnjo kodo:

Ta komponenta bo prikazala preprost obrazec za prijavo, ki vključuje gradnik Google reCAPTCHA.

Najprej uvozite pakete React, Axios in react-google-recaptcha:

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

Nato definirajte tri spremenljivke stanja: successMsg, errorMsg in validToken. Vaša koda bo posodobila ta stanja po uspešni oddaji obrazca in preverjanju reCAPTCHA. Poleg tega pridobite spletno mesto in skrivne ključe iz datoteke ENV.

funkcijoaplikacija() {
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;

Definirajte kljuko useRef, ki se sklicuje na komponento reCAPTCHA, da zajamete žeton, ustvarjen po tem, ko uporabnik opravi izzive reCAPTCHA.

konst captchaRef = useRef(nič);

Nato ustvarite funkcijo handleSubmit za klic, ko uporabnik odda obrazec za prijavo. Ta funkcija pridobi žeton iz komponente reCAPTCHA in nato pokliče ponastaviti metodo za ponastavitev reCAPTCHA, da omogoči poznejša preverjanja.

Poleg tega preveri, ali žeton obstaja, in pokliče funkcijo verifyToken, da preveri žeton. Ko preveri žeton, posodobi stanje validToken s podatki odziva API-ja.

konst handleSubmit = asinh (e) => {
 e.preventDefault();
pustiti žeton = captchaRef.current.getValue();
 captchaRef.current.reset();
če (žeton) {
pustiti veljaven_žeton = čakati verifyToken (žeton);
 setValidToken (veljaven_žeton);
če (veljaven_žeton[0].uspeh prav) {
konzola.log("preverjeno");
 setSuccessMsg("Hura!! oddali ste obrazec")
 } drugače {
konzola.log("Ni preverjeno");
 setErrorMsg("Oprosti!! Preverite, da niste bot")
 }
 }
 }

Končno definirajte funkcijo verifyToken, ki bo poslala zahtevo POST končni točki strežnika Express z uporabo Axios, pri čemer bo posredovala žeton reCAPTCHA in skrivni ključ v telesu zahteve. Če je zahteva uspešna, potisne odzivne podatke v matriko APIResponse in kot rezultat vrne matriko.

konst verifyToken = asinh (žeton) => {
pustiti APIResponse = [];
poskusi {
pustiti odgovor = čakati Axios.post(` http://localhost: 8000/verify-token`, {
 reCAPTCHA_TOKEN: žeton,
 Secret_Key: SECRET_KEY,
 });
 APIResponse.push (odziv['podatki']);
vrnitev APIResponse;
 } ulov (napaka) {
konzola.log (napaka);
 }
 };

Na koncu vrnite obrazec s komponento reCAPTCHA. Ta komponenta uporablja referenčno kljuko in ključ mesta kot rekvizite za konfiguracijo in prikaz gradnika reCAPTCHA.

Ko uporabnik odda obrazec, komponenta upodobi sporočilo o uspehu ali napaki glede na vrednost stanja validToken. Če je žeton reCAPTCHA veljaven, kar pomeni, da je uporabnik uspešno opravil izzive reCAPTCHA, se prikaže sporočilo o uspehu, v nasprotnem primeru pa se prikaže sporočilo o napaki.

vrnitev (
"Aplikacija">
"Glava aplikacije"> 
"obrazec za prijavo">


 {valid_token.length > 0 && veljaven_žeton[0].uspeh prav
? <h3className="textSuccess">{SuccessMsg}h3>
: <h3className="textError">{ErrorMsg} h3>}

Uporabniško ime</p>
"besedilo" placeholder="Uporabniško ime ..." />

Geslo</p>
"geslo" placeholder = "Geslo ..." />
 className="recaptcha"
 sitekey={SITE_KEY}
 ref={captchaRef}
 />
"oddaj">Pošlji</button>
 </form>
 </div>
 </header>
 </div>
 );
}


izvozprivzeto aplikacija

Nazadnje zaženite razvojni strežnik in pojdite v brskalnik http://localhost: 3000 za ogled rezultatov.

Ustvarite Express Backend

Če želite začeti, v korenskem imeniku celotne mape projekta ustvarite spletni strežnik Express, in namestite te pakete:

npm namestite express cors axios body-parser

Nastavite strežnik Express

Nato odprite datoteko index.js v mapi projekta strežnika in dodajte to kodo:

konst izraziti = zahtevati('express')
konst aksios = zahtevati('axios');
konst cors = zahtevati('cors');
konst app = express();
konst bodyParser = zahtevati('body-parser');
konst jsonParser = bodyParser.json();
konst PORT = process.env. PRISTANIŠČE || 8000;
app.use (jsonParser);
app.use (cors());
app.post("/verify-token", asinh (req, res) => {
konst { reCAPTCHA_TOKEN, Secret_Key} = req.body;
poskusi {
pustiti odgovor = čakati axios.post(` https://www.google.com/recaptcha/api/siteverify? skrivnost=${Secret_Key}&odziv=${reCAPTCHA_TOKEN}`);
konzola.log (response.data);
vrnitev res.status(200).json({
 uspeh:prav,
 sporočilo: "Žeton uspešno preverjen",
 verification_info: response.data
 });
 } ulov(napaka) {
konzola.log (napaka);
vrnitev res.status(500).json({
 uspeh:lažno,
 sporočilo: "Napaka pri preverjanju žetona"
 })
 }
});
app.listen (PORT, () => konzola.log(`Aplikacija se je začela na vratih ${PORT}`));

Ta koda naredi naslednje:

• Strežnik definira pot objave, ki pošlje asinhrono zahtevo HTTP POST Googlovemu API-ju reCAPTCHA za preverite žeton reCAPTCHA z uporabo Axios in posredujte skrivni ključ za preverjanje pristnosti v URL-ju zahteve.
• Če je žeton reCAPTCHA uspešno preverjen, se strežnik odzove z objektom JSON, ki vsebuje lastnost "uspeh", nastavljeno na true, lastnost "sporočilo". ki označuje, da je bil žeton uspešno preverjen, in lastnost "verification_info", ki vsebuje informacije o odgovoru pri preverjanju Googlovega API.
• Če med postopkom preverjanja pride do napake, se strežnik odzove z objektom JSON, ki vsebuje a lastnost "success" nastavljena na false in lastnost "message", ki označuje, da je prišlo do napake pri preverjanju žeton.

Na koncu zaženite strežnik vozlišča in preizkusite funkcionalnost funkcije reCAPTCHA.

vozlišče index.js

Ali lahko reCAPTCHA jamči varnost pred neželeno pošto?

Po podatkih Googla ima njegova storitev reCAPTCHA več kot 99-odstotno uspešnost, kar pomeni, da le majhen odstotek neželene pošte lahko obide varnostno funkcijo reCAPTCHA.

reCAPTCHA ni zanesljiva, saj lahko odločni slabi akterji še vedno najdejo rešitve. Vendar ostaja bistveno orodje, ki lahko znatno zmanjša tveganje zaradi neželene vsebine.