reCaptcha

🔐 1. Google reCAPTCHA v3 (leggyakoribb)

🧩 Előfeltétel:

• https://www.google.com/recaptcha/admin oldalon regisztrálod a domaint → kapsz egy site key-t.

---

✅ Lépések Angular 19-ben

1. RecaptchaService – script betöltése:

@Injectable({ providedIn: 'root' })
export class RecaptchaService {
  public loadRecaptcha(): void {
    const script = document.createElement('script');
    script.src = `https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY`;
    script.async = true;
    script.defer = true;

    document.head.appendChild(script);
  }

  public execute(action: string): Promise<string> {
    return new Promise((resolve) => {
      // @ts-ignore
      grecaptcha.ready(() => {
        // @ts-ignore
        grecaptcha.execute('YOUR_SITE_KEY', { action }).then((token: string) => {
          resolve(token);
        });
      });
    });
  }
}

2. A komponensben:

constructor(private recaptchaService: RecaptchaService) {}

ngOnInit(): void {
  this.recaptchaService.loadRecaptcha();
}

onSubmit(): void {
  this.recaptchaService.execute('contact_form').then((token) => {
    // A token-t továbbítod a backend felé
    this.http.post('/api/contact', { ...formData, recaptchaToken: token }).subscribe();
  });
}

---

🧪 2. Backend oldalon (NestJS példa)

Validálod a token-t:

@Post('contact')
async handleContact(@Body() body: any) {
  const { recaptchaToken } = body;
  const secret = process.env.RECAPTCHA_SECRET;

  const response = await this.httpService
    .post(`https://www.google.com/recaptcha/api/siteverify`, null, {
      params: {
        secret,
        response: recaptchaToken
      }
    })
    .toPromise();

  const { success, score } = response.data;

  if (!success || score < 0.5) {
    throw new ForbiddenException('Bot gyanú');
  }

  // egyéb adatfeldolgozás
}

---

🛡️ Alternatívák

Típus	Jellemző
reCAPTCHA v2 (checkbox)	látható, kevesebb kontroll
hCaptcha	privacy-barát alternatíva
FriendlyCaptcha / Cloudflare Turnstile	GDPR-barátabb opciók

---

🧩 Összefoglalás

Frontend teendő	Backend teendő
Script betöltés (grecaptcha)	Token ellenőrzés
Token generálás execute(action)	Google API hívás siteverify-re
Token továbbítása formával együtt	Score/kimenet ellenőrzése

---

Ha szeretnéd, elkészítem neked a RecaptchaService teljes TypeScript állományát és az integrált űrlapot standalone Angular komponensben.