From 7b22f2d237bc7b858f2981cf549819fbb6cc1778 Mon Sep 17 00:00:00 2001 From: Marek Lesko Date: Fri, 31 Oct 2025 15:57:16 +0000 Subject: [PATCH] feat: integrate reCAPTCHA for contact form validation and submission WIP #8 --- Api/Api.csproj | 1 + Api/Helpers/ReCapthchaAssessment.cs | 62 +++++++ .../contact/contact.component.html | 158 +++++++++--------- .../front-pages/contact/contact.component.ts | 83 ++++++++- Web/src/index.html | 3 +- 5 files changed, 228 insertions(+), 79 deletions(-) create mode 100644 Api/Helpers/ReCapthchaAssessment.cs diff --git a/Api/Api.csproj b/Api/Api.csproj index baa142e..ed7a306 100755 --- a/Api/Api.csproj +++ b/Api/Api.csproj @@ -10,6 +10,7 @@ + diff --git a/Api/Helpers/ReCapthchaAssessment.cs b/Api/Helpers/ReCapthchaAssessment.cs new file mode 100644 index 0000000..ea4c6cd --- /dev/null +++ b/Api/Helpers/ReCapthchaAssessment.cs @@ -0,0 +1,62 @@ +using System; +using Google.Api.Gax.ResourceNames; +using Google.Cloud.RecaptchaEnterprise.V1; + +namespace Api.Helpers +{ + public static class ReCaptchaAssessment + { + // Checks the supplied token with Recaptcha Enterprise and returns true if valid. + // Outputs a short reason when false (invalid reason or exception message). + public static bool CheckToken(string token, out string reason, string projectId = "webserverfarm", string recaptchaKey = "6Lf6df0rAAAAAMXcAx1umneXl1QJo9rTrflpWCvB") + { + reason = string.Empty; + + if (string.IsNullOrWhiteSpace(token)) + { + reason = "empty-token"; + return false; + } + + try + { + var client = RecaptchaEnterpriseServiceClient.Create(); + + var request = new CreateAssessmentRequest + { + Parent = $"projects/{projectId}", + Assessment = new Assessment + { + Event = new Event + { + SiteKey = recaptchaKey, + Token = token + } + } + }; + + var response = client.CreateAssessment(request); + + if (response?.TokenProperties == null) + { + reason = "missing-token-properties"; + return false; + } + + if (!response.TokenProperties.Valid) + { + reason = response.TokenProperties.InvalidReason.ToString(); + return false; + } + + reason = "valid"; + return true; + } + catch (Exception ex) + { + reason = ex.Message; + return false; + } + } + } +} \ No newline at end of file diff --git a/Web/src/app/pages/front-pages/contact/contact.component.html b/Web/src/app/pages/front-pages/contact/contact.component.html index 755167e..c850f64 100755 --- a/Web/src/app/pages/front-pages/contact/contact.component.html +++ b/Web/src/app/pages/front-pages/contact/contact.component.html @@ -11,90 +11,98 @@
-
-
- -
- -
-
-
-
-
-
- - Meno* - - - - - Telefónne číslo* - - - -
-
- - Priezvisko* - - - - - Email* - - - -
+
+ +
+ +
+
+
+
+
+
+ + Meno* + + + + + Telefónne číslo* + + +
+
+ + Priezvisko* + + + + + Email* + + + +
+
-
-
- Dopyt týkajúci sa* - - - - Všeobecný dopyt - Žiadosť o registráciu - - -
+
+
+ Dopyt týkajúci sa* + + + + Všeobecný dopyt + Žiadosť o registráciu + +
-
-
- Správa - - - -
+
+
+
+ Správa + + +
-
-
- - -
-
Kontaktujte nás dnes
-

- Máte otázky alebo potrebujete pomoc? Napíšte nám správu. -

-
- -
-
Naša lokalita
-

- Navštívte nás osobne alebo nájdite naše kontaktné údaje, aby ste sa s nami mohli priamo spojiť. -

-
- - + + +
+
+ +
+
+ + +
+
+ + +
+
Kontaktujte nás dnes
+

+ Máte otázky alebo potrebujete pomoc? Napíšte nám správu. +

+
+ +
+
Naša lokalita
+

+ Navštívte nás osobne alebo nájdite naše kontaktné údaje, aby ste sa s nami mohli priamo spojiť. +

+
+ +
- +
diff --git a/Web/src/app/pages/front-pages/contact/contact.component.ts b/Web/src/app/pages/front-pages/contact/contact.component.ts index bebe19d..de0adae 100755 --- a/Web/src/app/pages/front-pages/contact/contact.component.ts +++ b/Web/src/app/pages/front-pages/contact/contact.component.ts @@ -1,14 +1,91 @@ -import { Component } from '@angular/core'; +import { Component, AfterViewInit, ViewChild, ElementRef, NgZone } from '@angular/core'; import { IconModule } from '../../../icon/icon.module'; import { MaterialModule } from '../../../material.module'; import { FooterComponent } from '../footer/footer.component'; +import { FormsModule } from '@angular/forms'; +import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-contact', - imports: [MaterialModule,IconModule,FooterComponent], + imports: [MaterialModule, IconModule, FooterComponent, FormsModule], templateUrl: './contact.component.html', styleUrl: './contact.component.scss' }) -export class ContactComponent { +export class ContactComponent implements AfterViewInit { + model: any = { + name: '', + surname: '', + phone: '', + email: '', + subject: '', + message: '' + }; + siteKey: string = '6Lf6df0rAAAAAMXcAx1umneXl1QJo9rTrflpWCvB'; + @ViewChild('recaptcha', { static: false }) recaptchaElem!: ElementRef; + widgetId: number | null = null; + constructor(private http: HttpClient) { } + + ngAfterViewInit(): void { + const win: any = window as any; + const renderWidget = () => { + const grecaptcha = win.grecaptcha; + if (grecaptcha && grecaptcha.render && this.recaptchaElem) { + // render widget and keep id + this.widgetId = grecaptcha.render(this.recaptchaElem.nativeElement, { sitekey: this.siteKey }); + } + }; + + // if grecaptcha already loaded, render immediately + if ((win as any).grecaptcha && (win as any).grecaptcha.render) { + renderWidget(); + return; + } + + // otherwise define global callback that the index.html script will call when loaded + (win as any).onRecaptchaLoad = () => { + setTimeout(renderWidget); + }; + } + + onSubmit() { + // get token from grecaptcha + const grecaptchaAny: any = (window as any).grecaptcha; + let token = ''; + if (grecaptchaAny && grecaptchaAny.getResponse) { + token = this.widgetId !== null ? grecaptchaAny.getResponse(this.widgetId) : grecaptchaAny.getResponse(); + } + + if (!token) { + // optionally show UI feedback to complete captcha + alert('Prosím, potvrďte reCAPTCHA.'); + return; + } + + const payload = { + name: this.model.name, + surname: this.model.surname, + phone: this.model.phone, + email: this.model.email, + subject: this.model.subject, + message: this.model.message, + recaptchatoken: token + }; + + // POST to your backend endpoint which must verify the token with Google + this.http.post('/api/webmessages', payload).subscribe({ + next: () => { + alert('Správa odoslaná'); + // reset widget + if (grecaptchaAny && grecaptchaAny.reset) { + if (this.widgetId !== null) grecaptchaAny.reset(this.widgetId); + else grecaptchaAny.reset(); + } + }, + error: (err) => { + console.error(err); + alert('Chyba pri odosielaní — skúste znova.'); + } + }); + } } diff --git a/Web/src/index.html b/Web/src/index.html index 5ad9aca..a773e73 100755 --- a/Web/src/index.html +++ b/Web/src/index.html @@ -16,10 +16,11 @@ + + - \ No newline at end of file