Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Pe măsură ce aplicațiile web și mobile au devenit mai populare, la fel a crescut și riscul de spam și alte activități rău intenționate. CAPTCHA-urile pot fi o măsură de securitate utilă care merită integrată pentru a preveni aceste tipuri de amenințări la securitate.

Un CAPTCHA este o caracteristică de securitate minimă, integrată în mod obișnuit cu formularele web pentru a preveni atacurile automate ale spamboților. Se asigură că utilizatorul care accesează o aplicație este într-adevăr uman și nu un bot care execută cod rău intenționat.

Ce este CAPTCHA?

Acronimul CAPTCHA înseamnă testul Turing public complet automatizat pentru a distinge computerele și oamenii. Se referă la un test generat de computer care verifică pentru a determina dacă un anumit utilizator care interacționează cu aplicația dvs. este un om și nu un bot.

instagram viewer

Există diferite tipuri de teste CAPTCHA pe care le puteți integra în aplicația dvs., cum ar fi CAPTCHA-urile bazate pe text și audio. Cu toate acestea, cel mai popular și eficient tip este Google reCAPTCHA. Verifică pentru a distinge între utilizatori reali și roboți folosind algoritmi avansați de analiză a riscurilor.

Google reCAPTCHA vine în două versiuni:

  • reCAPTCHA V3: Această versiune rulează în fundal și determină un scor general bazat pe comportamentul utilizatorului.
  • reCAPTCHA V2: Această versiune plasează caseta de selectare „Nu sunt un robot” pe formularul de autentificare.

Acest ghid va explora Google reCAPTCHA V2. Citiți mai departe pentru a afla cum să îl integrați într-o aplicație React.

Înregistrați aplicația React pe consola de administrare reCAPTCHA

Pentru a începe, trebuie să vă înregistrați aplicația pe consola pentru dezvoltatori reCAPTCHA. Du-te la Consola de administrare reCAPTCHA de la Google, conectați-vă cu contul dvs. Google și completați detaliile solicitate din formular.

Furnizați numele etichetei, selectați reCAPTCHA V2, iar în caseta derulantă, alegeți solicitările de verificare folosind opțiunea de selectare „Nu sunt un robot”. În cele din urmă, furnizați numele de domeniu al aplicației dvs. Pentru dezvoltare locală, tastați gazdă locală ca nume de domeniu.

Odată ce aplicația este înregistrată, site-ul vă va redirecționa către o pagină nouă cu secretul generat și cheile site-ului.

Creați un client React

Acest proiect este dublu: veți crea un client React care redă un formular simplu de conectare cu Google reCAPTCHA și un Backend expres care face solicitări POST către API-ul reCAPTCHA pentru a verifica simbolul generat după ce un utilizator completează reCAPTCHA provocare.

Creați un folder de proiect local pentru a vă găzdui fișierele de proiect. Următorul, creați aplicația React și schimbați directorul curent în cel al clientului. În directorul rădăcină al folderului client, creați un fișier .env pentru a stoca cheia secretă API și cheia site-ului.

REACT_APP_reCAPTCHA_SITE_KEY = „cheie site”
REACT_APP_reCAPTCHA_SECRET_KEY = 'cheie secreta'

Puteți găsi codul acestui proiect în documentul său Depozitul GitHub.

Instalați pachetele necesare

Instalați Axios, veți folosi această bibliotecă pentru a face solicitări HTTP din browser și React-Google-reCAPTCHA. Acest pachet oferă o implementare specifică React pentru API-ul reCAPTCHA.

npm instalează react-recaptcha-google axios --save

Integrați Google reCAPTCHA în aplicația React

Deschide fișierul src/App.js, ștergeți codul boilerplate React și adăugați codul de mai jos:

Această componentă va reda un formular simplu de conectare care include widgetul Google reCAPTCHA.

Mai întâi, importați pachetele React, Axios și react-google-recaptcha:

import Reacționează, { useState, useRef } din'reacţiona';
import Axios din"axios";
import ReCAPTCHA din„react-google-recaptcha”;

Apoi definiți trei variabile de stare: successMsg, errorMsg și validToken. Codul dvs. va actualiza aceste stări după trimiterea cu succes a formularului și validarea reCAPTCHA. În plus, obțineți site-ul și cheile secrete din fișierul ENV.

funcţieApp() {
const [SuccessMsg, setSuccessMsg] = useState("")
const [ErrorMsg, setErrorMsg] = useState("")
const [valid_token, setValidToken] = useState([]);
const SITE_KEY = process.env. REACT_APP_reCAPTCHA_SITE_KEY;
const SECRET_KEY = process.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Definiți un cârlig useRef care face referire la componenta reCAPTCHA, pentru a captura simbolul generat după ce un utilizator finalizează provocările reCAPTCHA.

const captchaRef = useRef(nul);

Apoi, creați o funcție handleSubmit pe care să o apelați atunci când un utilizator trimite formularul de conectare. Această funcție obține jetonul de la componenta reCAPTCHA și apoi apelează resetare metodă de a reseta reCAPTCHA pentru a permite verificări ulterioare.

În plus, verifică dacă token-ul există și apelează funcția verifyToken pentru a verifica jetonul. Odată ce a fost verificat jetonul, acesta va actualiza starea validToken cu datele de răspuns API.

const handleSubmit = asincron (e) => {
 e.preventDefault();
lăsa token = captchaRef.current.getValue();
 captchaRef.current.reset();
dacă (jeton) {
lăsa valid_token = așteaptă verifyToken (jeton);
 setValidToken (jeton_valid);
dacă (jeton_valid[0].succes Adevărat) {
consolă.Buturuga("verificat");
 setSuccessMsg("Ura!! ați trimis formularul")
 } altfel {
consolă.Buturuga("nu e verificat");
 setErrorMsg(„Îmi pare rău!! Verificați că nu sunteți un bot")
 }
 }
 }

În cele din urmă, definiți funcția verifyToken care va trimite o solicitare POST către un punct final al serverului Express folosind Axios, trecând jetonul reCAPTCHA și cheia secretă în corpul cererii. Dacă cererea are succes, împinge datele răspunsului în matricea APIResponse și returnează matricea ca rezultat.

const verifyToken = asincron (jeton) => {
lăsa APIRsponse = [];
încerca {
lăsa răspuns = așteaptă Axios.post(` http://localhost: 8000/verify-token`, {
 reCAPTCHA_TOKEN: simbol,
 Secret_Key: SECRET_KEY,
 });
 APIResponse.push (răspuns['date']);
întoarcere APIRsponse;
 } captură (eroare) {
consolă.log (eroare);
 }
 };

În cele din urmă, returnați un formular cu componenta reCAPTCHA. Această componentă preia cârligul de referință și cheia site-ului ca elemente de recuzită pentru a configura și afișa widget-ul reCAPTCHA.

Când un utilizator trimite formularul, componenta redă un mesaj de succes sau de eroare bazat pe valoarea stării validToken. Dacă simbolul reCAPTCHA este valid, adică un utilizator a finalizat cu succes provocările reCAPTCHA, acesta afișează mesajul de succes, în caz contrar, afișează mesajul de eroare.

întoarcere (
„Aplicație”>
„Aplicație-antet”> 
"formular de conectare">


 {valid_token.length > 0 && valid_token[0].succes Adevărat
? <h3numele clasei=„textSucces”>{SuccessMsg}h3>
: <h3numele clasei=„textError”>{ErrorMsg} h3>}


Nume utilizator</p>
"text" substituent="Nume de utilizator..." />




Parola</p>
"parola" substituent = "Parola..." />


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








exportMod implicit App

În cele din urmă, rulați serverul de dezvoltare și mergeți la browserul dvs http://localhost: 3000 pentru a vizualiza rezultatele.

Creați Express Backend

Pentru a începe, în directorul rădăcină al întregului folder de proiect, creați un server web Express, și instalează aceste pachete:

npm install express cors axios body-parser

Configurați serverul Express

Apoi, deschideți fișierul index.js în folderul de proiect al serverului și adăugați acest cod:

const expres = cere('expres')
const axios = cere("axios");
const cors = cere('cors');
const aplicație = expres();
const bodyParser = cere(„analizator-corp”);
const jsonParser = bodyParser.json();
const PORT = proces.env. PORT || 8000;


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


app.post(„/verify-token”, asincron (req, res) => {
const { reCAPTCHA_TOKEN, Secret_Key} = req.body;


încerca {
lăsa răspuns = așteaptă axios.post(` https://www.google.com/recaptcha/api/siteverify? secret=${Secret_Key}&răspuns=${reCAPTCHA_TOKEN}`);
consolă.log (răspuns.date);


întoarcere starea res.(200).json({
 succes:Adevărat,
 mesaj: „Token verificat cu succes”,
 verification_info: response.data
 });
 } captură(eroare) {
consolă.log (eroare);


întoarcere starea res.(500).json({
 succes:fals,
 mesaj: „Eroare la verificarea simbolului”
 })
 }
});
app.ascultă (PORT, () => consolă.Buturuga(`Aplicația a început pe port ${PORT}`));

Acest cod face următoarele:

  • Serverul definește o rută Post care face o solicitare HTTP POST asincronă către API-ul Google reCAPTCHA pentru verificați jetonul reCAPTCHA folosind Axios, trecând cheia secretă pentru autentificare în adresa URL a solicitării.
  • Dacă simbolul reCAPTCHA este verificat cu succes, serverul răspunde cu un obiect JSON care conține o proprietate „succes” setată la true, o proprietate „message” care indică faptul că simbolul a fost verificat cu succes și o proprietate „verification_info” care conține informații despre răspunsul de verificare de la Google API.
  • Dacă apare o eroare în timpul procesului de verificare, serverul răspunde cu un obiect JSON care conține a Proprietatea „success” setată la false și o proprietate „message” care indică faptul că a existat o eroare la verificarea jeton.

În cele din urmă, rulați serverul nod și testați funcționalitatea caracteristicii reCAPTCHA.

nod index.js

ReCAPTCHAs poate garanta securitatea împotriva spamboților?

Potrivit Google, serviciul său reCAPTCHA are o rată de succes de peste 99%, ceea ce înseamnă că doar un mic procent de spam poate ocoli caracteristica de securitate reCAPTCHA.

reCAPTCHA nu este sigur, deoarece actorii răi hotărâți pot găsi în continuare soluții. Dar rămâne un instrument esențial care poate reduce semnificativ riscul de la spamboți.