Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Tā kā tīmekļa un mobilās lietojumprogrammas ir kļuvušas populārākas, pieaug arī surogātpasta un citu ļaunprātīgu darbību risks. CAPTCHA var būt ērts drošības pasākums, ko vērts integrēt, lai novērstu šāda veida drošības apdraudējumus.

CAPTCHA ir minimāla drošības funkcija, kas parasti tiek integrēta tīmekļa veidlapās, lai novērstu surogātpasta robotu automatizētus uzbrukumus. Tas nodrošina, ka lietotājs, kurš piekļūst lietojumprogrammai, patiešām ir cilvēks, nevis robots, kas izpilda ļaunprātīgu kodu.

Kas ir CAPTCHA?

Akronīms CAPTCHA apzīmē pilnīgi automatizētu publisko Tjūringa testu, lai atšķirtu datorus un cilvēkus. Tas attiecas uz datora ģenerētu testu, kas pārbauda, ​​vai konkrēts lietotājs, kas mijiedarbojas ar jūsu lietojumprogrammu, ir cilvēks, nevis robots.

Ir dažādi CAPTCHA testu veidi, kurus varat integrēt savā lietojumprogrammā, piemēram, teksta un audio CAPTCHA. Tomēr vispopulārākais un efektīvākais veids ir Google reCAPTCHA. Tā pārbauda, ​​lai atšķirtu reālos lietotājus un robotprogrammatūras, izmantojot uzlabotus riska analīzes algoritmus.

instagram viewer

Google reCAPTCHA ir pieejamas divās versijās:

  • reCAPTCHA V3: šī versija darbojas fonā un nosaka kopējo rezultātu, pamatojoties uz lietotāja uzvedību.
  • reCAPTCHA V2: šī versija autentifikācijas veidlapā ievieto izvēles rūtiņu “Es neesmu robots”.

Šajā rokasgrāmatā tiks pētīts Google reCAPTCHA V2. Lasiet tālāk, lai uzzinātu, kā to integrēt React lietojumprogrammā.

Reģistrējiet React lietojumprogrammu reCAPTCHA administratora konsolē

Lai sāktu, jums ir jāreģistrē sava lietojumprogramma reCAPTCHA izstrādātāja konsolē. Dodieties uz Google reCAPTCHA administratora konsole, pierakstieties ar savu Google kontu un aizpildiet nepieciešamo veidlapas informāciju.

Norādiet etiķetes nosaukumu, atlasiet reCAPTCHA V2un nolaižamajā lodziņā atlasiet verifikācijas pieprasījumus, izmantojot izvēles rūtiņu “Es neesmu robots”. Visbeidzot, norādiet savas lietojumprogrammas domēna nosaukumu. Vietējai attīstībai ierakstiet vietējais saimnieks kā domēna nosaukumu.

Kad jūsu lietotne būs reģistrēta, vietne jūs novirzīs uz jaunu lapu ar jūsu ģenerēto noslēpumu un vietnes atslēgām.

Izveidojiet React klientu

Šis projekts ir divējāds: jūs izveidosit React klientu, kas atveido vienkāršu pieteikšanās veidlapu, izmantojot Google reCAPTCHA un Express aizmugursistēma, kas veic POST pieprasījumus reCAPTCHA API, lai pārbaudītu marķieri, kas ģenerēts pēc tam, kad lietotājs ir pabeidzis reCAPTCHA izaicinājums.

Izveidojiet projekta mapi lokāli, lai tajā ievietotu projekta failus. Nākamais, izveidot lietojumprogrammu React un mainiet pašreizējo direktoriju uz klienta direktoriju. Klienta mapes saknes direktorijā izveidojiet .env failu, lai saglabātu API slepeno atslēgu un vietnes atslēgu.

REACT_APP_reCAPTCHA_SITE_KEY = 'vietnes atslēga'
REACT_APP_reCAPTCHA_SECRET_KEY = 'slepenā atslēga'

Jūs varat atrast šī projekta kodu tajā GitHub repozitorijs.

Instalējiet nepieciešamās pakotnes

Instalējiet Axios. Šo bibliotēku izmantosit, lai veiktu HTTP pieprasījumus no pārlūkprogrammas un React-Google-reCAPTCHA. Šī pakotne nodrošina React specifisku reCAPTCHA API ieviešanu.

npm instalēt react-recaptcha-google axios --save

Integrējiet Google reCAPTCHA lietojumprogrammā React

Atveriet src/App.js failu, izdzēsiet React kodu un pievienojiet tālāk norādīto kodu:

Šis komponents atveidos vienkāršu pieteikšanās veidlapu, kurā ir ietverts Google reCAPTCHA logrīks.

Vispirms importējiet pakotnes React, Axios un react-google-recaptcha:

imports Reaģēt, { useState, useRef } no'reaģēt';
imports Axios no"aksios";
imports ReCAPTCHA no'react-google-recaptcha';

Pēc tam definējiet trīs stāvokļa mainīgos: successMsg, errorMsg un validToken. Pēc veiksmīgas veidlapas iesniegšanas un reCAPTCHA validācijas jūsu kods atjauninās šos stāvokļus. Turklāt iegūstiet vietni un slepenās atslēgas no ENV faila.

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

Definējiet useRef āķi, kas atsaucas uz reCAPTCHA komponentu, lai tvertu marķieri, kas ģenerēta pēc tam, kad lietotājs ir pabeidzis reCAPTCHA izaicinājumus.

konst captchaRef = useRef(null);

Pēc tam izveidojiet HandSubmit funkciju, lai izsauktu, kad lietotājs iesniedz pieteikšanās veidlapu. Šī funkcija iegūst marķieri no reCAPTCHA komponenta un pēc tam izsauc to atiestatīt metode reCAPTCHA atiestatīšanai, lai varētu veikt turpmākās pārbaudes.

Turklāt tas pārbauda, ​​vai marķieris pastāv, un izsauc funkciju verifyToken, lai pārbaudītu marķieri. Kad marķieris ir pārbaudīts, tas atjauninās validToken stāvokli ar API atbildes datiem.

konst HandSubmit = asinhrons (e) => {
 e.preventDefault();
ļaut marķieris = captchaRef.current.getValue();
 captchaRef.current.reset();
ja (token) {
ļaut derīgs_tokens = gaidīt verifyToken (token);
 setValidToken (valid_token);
ja (valid_token[0].veiksmi taisnība) {
konsole.log("pārbaudīts");
 setSuccessMsg("Urā!! jūs esat iesniedzis veidlapu")
 } cits {
konsole.log("Nav pārbaudīts");
 setErrorMsg("Piedod!! Apstipriniet, ka neesat bots")
 }
 }
 }

Visbeidzot, definējiet funkciju verifyToken, kas nosūtīs POST pieprasījumu Express servera galapunktam, izmantojot Axios, nododot reCAPTCHA pilnvaru un slepeno atslēgu pieprasījuma pamattekstā. Ja pieprasījums ir veiksmīgs, tas nosūta atbildes datus uz APIResponse masīvu un kā rezultātā atgriež masīvu.

konst verifyToken = asinhrons (žetons) => {
ļaut APIResponse = [];
mēģināt {
ļaut atbilde = gaidīt Axios.post(` http://localhost: 8000/verify-token”., {
 reCAPTCHA_TOKEN: marķieris,
 Secret_Key: SECRET_KEY,
 });
 APIResponse.push (response['dati']);
atgriezties APIResponse;
 } noķert (kļūda) {
konsole.log (kļūda);
 }
 };

Visbeidzot, atgrieziet veidlapu ar komponentu reCAPTCHA. Šis komponents izmanto atsauces āķi un vietnes atslēgu kā palīgierīces reCAPTCHA logrīka konfigurēšanai un parādīšanai.

Kad lietotājs iesniedz veidlapu, komponents parāda veiksmes vai kļūdas ziņojumu, pamatojoties uz validToken statusa vērtību. Ja reCAPTCHA marķieris ir derīgs, tas nozīmē, ka lietotājs veiksmīgi pabeidza reCAPTCHA izaicinājumus, tiek parādīts veiksmes ziņojums, pretējā gadījumā tiek parādīts kļūdas ziņojums.

atgriezties (
"Lietotne">
"Lietotnes galvene"> 
"pieteikšanās forma">


 {valid_token.length > 0 && derīgs_tokens[0].veiksmi taisnība
? <h3klasesNosaukums="teksts Success">{SuccessMsg}h3>
: <h3klasesNosaukums="textError">{ErrorMsg} h3>}


Lietotājvārds</p>
"teksts" vietturis="Lietotājvārds..." />




Parole</p>
"parole" vietturis = "Parole..." />


 klasesNosaukums="recaptcha"
 sitekey={SITE_KEY}
 ref={captchaRef}
 />








eksportētnoklusējuma App

Visbeidzot, palaidiet izstrādes serveri un dodieties uz savu pārlūkprogrammu http://localhost: 3000, lai skatītu rezultātus.

Izveidojiet Express aizmuguri

Lai sāktu darbu, visas projekta mapes saknes direktorijā izveidot Express tīmekļa serveri, un instalējiet šīs pakotnes:

npm instalēt express cors axios body-parser

Iestatiet Express serveri

Pēc tam atveriet failu index.js servera projekta mapē un pievienojiet šo kodu:

konst izteikt = pieprasīt('izteikt')
konst axios = pieprasīt("aksios");
konst cors = pieprasīt('kors');
konst lietotne = express();
konst bodyParser = pieprasīt("ķermeņa parsētājs");
konst jsonParser = bodyParser.json();
konst PORT = process.env. OST || 8000;


app.use (jsonParser);
app.use (cors());


app.post("/verify-token", asinhrons (req, res) => {
konst { reCAPTCHA_TOKEN, Secret_Key} = req.body;


mēģināt {
ļaut atbilde = gaidīt axios.post(` https://www.google.com/recaptcha/api/siteverify? noslēpums =${Secret_Key}&atbilde=${reCAPTCHA_TOKEN}`);
konsole.log (response.data);


atgriezties res.status(200).json({
 panākumi:taisnība,
 ziņa: "Token veiksmīgi verificēts",
 verification_info: response.data
 });
 } noķert(kļūda) {
konsole.log (kļūda);


atgriezties res.status(500).json({
 panākumi:viltus,
 ziņa: "Kļūda verificējot marķieri"
 })
 }
});
app.listen (PORT, () => konsole.log(`Lietotne startēja portā ${PORT}`));

Šis kods veic šādas darbības:

  • Serveris definē pasta maršrutu, kas veic asinhronu HTTP POST pieprasījumu Google reCAPTCHA API, lai pārbaudiet reCAPTCHA marķieri, izmantojot Axios, nosūtot autentifikācijas slepeno atslēgu pieprasījuma URL.
  • Ja reCAPTCHA marķieris ir veiksmīgi pārbaudīts, serveris atbild ar JSON objektu, kura rekvizīts "veiksmes" ir iestatīts uz patiesu, rekvizītu "message". kas norāda, ka marķieris ir veiksmīgi verificēts, un rekvizītu “verification_info”, kas satur informāciju par verifikācijas atbildi no Google API.
  • Ja verifikācijas procesa laikā rodas kļūda, serveris atbild ar JSON objektu, kas satur a Rekvizīts “veiksmes” ir iestatīts uz false un rekvizīts “message”, kas norāda, ka, pārbaudot žetons.

Visbeidzot, palaidiet mezgla serveri un pārbaudiet reCAPTCHA līdzekļa funkcionalitāti.

mezgla indekss.js

Vai reCAPTCHA var garantēt drošību pret mēstuļu robotiem?

Saskaņā ar Google datiem, tā pakalpojuma reCAPTCHA panākumu līmenis pārsniedz 99%, kas nozīmē, ka tikai neliela daļa surogātpasta var apiet reCAPTCHA drošības līdzekli.

reCAPTCHA nav drošs, jo apņēmīgi slikti aktieri joprojām var atrast risinājumus. Taču tas joprojām ir būtisks rīks, kas var ievērojami samazināt surogātpasta radīto risku.