Integrirajte Google reCAPTCHA v aplikacijo React

Integrirajte Google reCAPTCHA v aplikacijo React
Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

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.





kako obrniti iskanje slik na telefonu

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

 Nastavitve Google reCAPTCHA

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





 Ključi reCAPTCHA

Ustvarite odjemalca React

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

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