Integreerige Google reCAPTCHA Reacti rakendusse

Kuna veebi- ja mobiilirakendused on muutunud populaarsemaks, on suurenenud ka rämpsposti ja muu pahatahtliku tegevuse oht. CAPTCHA-d võivad olla mugav turvameede, mida tasub seda tüüpi turvaohtude vältimiseks integreerida.

CAPTCHA on minimaalne turvafunktsioon, mis on tavaliselt veebivormidega integreeritud, et vältida rämpsposti automatiseeritud rünnakuid. See tagab, et rakendusele juurdepääsetav kasutaja on tõepoolest inimene, mitte pahatahtlikku koodi käivitav robot.

Mis on CAPTCHA?

Akronüüm CAPTCHA tähistab Completely Automated Public Turing Test, et eristada arvutit ja inimesi. See viitab arvuti loodud testile, mis kontrollib, kas konkreetne teie rakendusega suhtlev kasutaja on inimene ja mitte robot.

Saate oma rakendusse integreerida erinevat tüüpi CAPTCHA-teste (nt teksti- ja helipõhised CAPTCHA-d). Kõige populaarsem ja tõhusam tüüp on aga Google reCAPTCHA. See kontrollib täpsemate riskianalüüsi algoritmide abil vahet tegelike kasutajate ja robotite vahel.

Google reCAPTCHA on saadaval kahes versioonis:

• reCAPTCHA V3: see versioon töötab taustal ja määrab kasutaja käitumise põhjal üldise skoori.
• reCAPTCHA V2: see versioon lisab autentimisvormile märkeruudu "Ma ei ole robot".

See juhend uurib Google reCAPTCHA V2. Lugege edasi, et õppida, kuidas see Reacti rakendusse integreerida.

Registreerige rakendus React reCAPTCHA administraatorikonsoolis

Alustamiseks peate registreerima oma rakenduse reCAPTCHA arendajakonsoolis. Suunduge poole Google'i reCAPTCHA administraatorikonsool, logige sisse oma Google'i kontoga ja täitke nõutud vormi üksikasjad.

Sisestage sildi nimi, valige reCAPTCHA V2ja valige rippmenüüst kinnitustaotlused, kasutades märkeruutu "Ma ei ole robot". Lõpuks sisestage oma rakenduse domeeninimi. Kohalikuks arendamiseks tippige kohalik host domeeninimena.

Kui see on teie rakenduse registreerinud, suunab sait teid teie loodud saladuse ja saidivõtmetega uuele lehele.

Looge Reacti klient

See projekt on kaheosaline: loote Reacti kliendi, mis renderdab lihtsa sisselogimisvormi Google'i reCAPTCHA ja Kiirtagaprogramm, mis teeb reCAPTCHA API-le POST-päringuid, et kontrollida pärast kasutaja reCAPTCHA lõpetamist loodud märgi väljakutse.

Looge projektifailide majutamiseks kohapeal projekti kaust. Järgmiseks looge rakendus React ja muutke praegune kataloog kliendi omaks. Looge oma kliendikausta juurkataloogis .env-fail API salajase võtme ja saidivõtme salvestamiseks.

REACT_APP_reCAPTCHA_SITE_KEY = "saidi võti"
REACT_APP_reCAPTCHA_SECRET_KEY = 'salajane võti'

Selle projekti koodi leiate sellest GitHubi hoidla.

Installige nõutavad paketid

Installige Axios, saate seda teeki kasutada HTTP-päringute tegemiseks brauserist ja React-Google-reCAPTCHA-st. See pakett pakub reCAPTCHA API jaoks React-spetsiifilist rakendust.

npm install react-recaptcha-google axios --save

Integreerige Google reCAPTCHA rakendusse React

Ava src/App.js faili, kustutage reageerimiskood ja lisage allolev kood:

See komponent renderdab lihtsa sisselogimisvormi, mis sisaldab Google'i reCAPTCHA vidinat.

Esmalt importige paketid React, Axios ja react-google-recaptcha:

importida Reageerida, { useState, useRef } alates'reageeri';
importida Axios alates"axios";
importida ReCAPTCHA alates'react-google-recaptcha';

Seejärel määrake kolm olekumuutujat: successMsg, errorMsg ja validToken. Teie kood värskendab neid olekuid pärast vormi edukat esitamist ja reCAPTCHA valideerimist. Lisaks hankige ENV-failist sait ja salajased võtmed.

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

Määrake useRef konks, mis viitab reCAPTCHA komponendile, et jäädvustada luba, mis genereeritakse pärast seda, kui kasutaja on reCAPTCHA väljakutsed lõpetanud.

konst captchaRef = useRef(null);

Seejärel looge funktsioon handleSubmit, mis kutsub esile, kui kasutaja esitab sisselogimisvormi. See funktsioon hangib reCAPTCHA komponendilt märgi ja kutsub seejärel välja lähtestada meetod reCAPTCHA lähtestamiseks, et võimaldada järgnevaid kontrolle.

Lisaks kontrollib see loa olemasolu ja kutsub funktsiooni verifyToken, et luba kontrollida. Kui see on märgi kinnitanud, värskendab see kehtivTokeni olekut API vastuse andmetega.

konst käepideEsita = asünkr (e) => {
 e.preventDefault();
lase token = captchaRef.current.getValue();
 captchaRef.current.reset();
kui (märk) {
lase kehtiv_märk = ootama verifyToken (märk);
 setValidToken (valid_token);
kui (kehtiv_märk[0].edu tõsi) {
konsool.log("kinnitatud");
 setSuccessMsg("Hurraa!! olete vormi esitanud")
 } muidu {
konsool.log("Kinnitamata");
 setErrorMsg("Vabandust!! Kinnitage, et te pole bot")
 }
 }
 }

Lõpuks määratlege funktsioon verifyToken, mis saadab POST-päringu Expressi serveri lõpp-punktile, kasutades Axiost, edastades päringu kehas reCAPTCHA märgi ja salajase võtme. Kui päring on edukas, edastab see vastuse andmed APIResponse'i massiivi ja tagastab selle tulemusel massiivi.

konst verifyToken = asünkr (märk) => {
lase APIResponse = [];
proovi {
lase vastus = ootama Axios.post(` http://localhost: 8000/kinnitusmärk"., {
 reCAPTCHA_TOKEN: märk,
 Secret_Key: SECRET_KEY,
 });
 APIResponse.push (response['andmed']);
tagasi APIResponse;
 } püüda (viga) {
konsool.log (viga);
 }
 };

Lõpuks tagastage reCAPTCHA komponendiga vorm. See komponent kasutab reCAPTCHA vidina konfigureerimiseks ja kuvamiseks tugikonksu ja saidi võtit.

Kui kasutaja vormi esitab, renderdab komponent validToken oleku väärtusel põhineva edu- või veateate. Kui reCAPTCHA luba on kehtiv, mis tähendab, et kasutaja on reCAPTCHA väljakutsed edukalt lõpetanud, kuvab see eduteate, vastasel juhul kuvab see veateate.

tagasi (
"Rakendus">
"Rakenduse päis"> 
"logIn-vorm">


 {valid_token.length > 0 && kehtiv_märk[0].edu tõsi
? <h3klassi nimi="tekst Edu">{SuccessMsg}h3>
: <h3klassi nimi="teksti viga">{ErrorMsg} h3>}

Kasutajanimi</p>
"tekst" kohatäide="Kasutajanimi..." />

Parool</p>
"parool" kohatäide = "Parool..." />
 klassinimi="recaptcha"
 sitekey={SITE_KEY}
 ref={captchaRef}
 />
"Esita">Esita</button>
 </form>
 </div>
 </header>
 </div>
 );
}


eksportidavaikimisi Rakendus

Lõpuks käivitage arendusserver ja minge oma brauserisse http://localhost: 3000 tulemuste vaatamiseks.

Looge Expressi taustaprogramm

Alustamiseks kogu projekti kausta juurkataloogis luua Expressi veebiserver, ja installige need paketid:

npm install express cors axios body-parser

Seadistage Express Server

Järgmisena avage serveri projekti kaustas fail index.js ja lisage see kood:

konst väljendada = nõuda('väljendama')
konst axios = nõuda("axios");
konst cors = nõuda('kors');
konst rakendus = express();
konst bodyParser = nõuda("kehaparser");
konst jsonParser = bodyParser.json();
konst PORT = process.env. PORT || 8000;
app.use (jsonParser);
app.use (cors());
app.post("/verify-token", asünkr (req, res) => {
konst { reCAPTCHA_TOKEN, Secret_Key} = req.body;
proovi {
lase vastus = ootama axios.post(` https://www.google.com/recaptcha/api/siteverify? saladus=${Secret_Key}&vastus=${reCAPTCHA_TOKEN}`);
konsool.log (response.data);
tagasi res.status(200).json({
 edu:tõsi,
 sõnum: "Token edukalt kinnitatud",
 verification_info: vastus.andmed
 });
 } püüda(viga) {
konsool.log (viga);
tagasi res.status(500).json({
 edu:vale,
 sõnum: "Viga märgi kinnitamisel"
 })
 }
});
app.listen (PORT, () => konsool.log(`Rakendus käivitati pordis ${PORT}`));

See kood teeb järgmist:

• Server määrab postitamise marsruudi, mis teeb asünkroonse HTTP POST-i päringu Google'i reCAPTCHA API-le, et kontrollige reCAPTCHA luba, kasutades Axios, edastades päringu URL-is autentimiseks salajase võtme.
• Kui reCAPTCHA luba on edukalt kinnitatud, vastab server JSON-objektiga, mille atribuut "success" on seatud tõeseks, atribuut "message" mis näitab, et luba on edukalt kinnitatud, ja atribuut "verification_info", mis sisaldab teavet Google'i kinnitusvastuse kohta API.
• Kui kinnitusprotsessi ajal ilmneb tõrge, vastab server JSON-objektiga, mis sisaldab a atribuut "success" on seatud väärtusele false ja atribuut "message", mis näitab, et kontrollimisel ilmnes viga märk.

Lõpuks käivitage sõlmeserver ja testige reCAPTCHA funktsiooni funktsionaalsust.

sõlme indeks.js

Kas reCAPTCHA-d võivad tagada turvalisuse rämpsposti vastu?

Google'i sõnul on selle reCAPTCHA teenuse edukus üle 99%, mis tähendab, et ainult väike osa rämpspostist saab reCAPTCHA turvafunktsioonist mööda minna.

reCAPTCHA ei ole lollikindel, sest sihikindlad halvad näitlejad leiavad endiselt lahendusi. Kuid see on endiselt oluline tööriist, mis võib rämpspostiga seotud ohtu märkimisväärselt vähendada.