Cum să adaugi protecția Google reCAPTCHA la un formular de contact HTML

Formularele de contact sunt o țintă frecventă pentru trimiterile automate de spam. Google reCAPTCHA vă ajută să vă protejați formularele, verificând dacă un vizitator este un utilizator real înainte de a permite trimiterea formularului.

Acest articol arată cum se integrează reCAPTCHA v3 într-un formular de contact HTML standard.

Înainte de a începe

Înainte de a implementa reCAPTCHA, veți avea nevoie de:

• Un cont Google reCAPTCHA
• Un site web înregistrat în panoul de control reCAPTCHA
• O cheie de site și o cheie secretă valabile

Cheia de site este utilizată pe site-ul dvs., în timp ce cheia secretă este utilizată pentru a verifica solicitările pe partea de server.

Pasul 1: Încărcați biblioteca JavaScript reCAPTCHA

Adăugați următorul cod în secțiunea a paginii dvs.:

Acest script încarcă resursele necesare pentru funcționarea reCAPTCHA.

Pasul 2: Adăugați callback-ul de trimitere

Adăugați următorul cod JavaScript înainte de eticheta de închidere sau în antetul paginii:

Această funcție se execută după ce reCAPTCHA validează vizitatorul și trimite formularul.

Pasul 3: Actualizați butonul de trimitere

Adăugați următoarele atribute la butonul care trimite formularul:

<button
    class="g-recaptcha"
    data-sitekey="YOUR_SITE_KEY"
    data-callback="onSubmit"
    data-action="submit">
    Trimite

Înlocuiți YOUR_SITE_KEY cu cheia site-ului generată în contul dvs. Google reCAPTCHA.

Cum funcționează

Când un vizitator face clic pe buton:

1. reCAPTCHA analizează solicitarea în fundal.
2. Se generează un token de verificare.
3. Se execută funcția onSubmit().
4. Formularul este trimis numai după finalizarea validării reCAPTCHA.

Spre deosebire de versiunile anterioare, reCAPTCHA v3 nu le cere de obicei utilizatorilor să rezolve provocări bazate pe imagini. În schimb, evaluează comportamentul vizitatorului și atribuie un scor care poate fi verificat pe partea de server.

Considerații importante privind securitatea

Adăugarea reCAPTCHA la formular protejează partea client a aplicației, dar nu ar trebui să fie singurul mecanism de protecție.

Pentru o validare corectă, tokenul generat trebuie verificat și pe server folosind cheia secretă reCAPTCHA. Acest lucru împiedică atacatorii să ocolească protecția trimițând cereri direct către scriptul de procesare a formularului.

Rezumat

Google reCAPTCHA v3 poate contribui la reducerea trimiterilor automate de spam prin validarea vizitatorilor înainte de trimiterea unui formular. Integrarea necesită încărcarea bibliotecii JavaScript reCAPTCHA, adăugarea unei funcții de callback și actualizarea butonului de trimitere a formularului cu atributele corespunzătoare. Pentru o securitate maximă, ar trebui implementată și verificarea tokenului pe partea de server.