Die RECAPTCHA-Antwort kann im Typescript + PHP-Projekt nicht ordnungsgemäß abgerufen werden ⇐ JavaScript

[Anonymous]

Ich versuche, eine RECAPTCHA v2-Anfrage + -Antwort in meinem Webprojekt zu erhalten, aber bisher habe ich eine lange g-recaptcha-Antwort in meiner URL, wenn ich die Captcha-Aktion in meinem Projekt auslöse. Ich stelle den folgenden Code bereit:
HTML:

Code: Select all

Submit

validate.captcha.ts:

Code: Select all

class ValidateCaptcha {
private targetElement: string

constructor(element: string) {
this.targetElement = element;
this.validate(element);
}

private validate(_element: string): void {
try {
const form = document.querySelector("#captchaForm") as HTMLFormElement;

if (!form) {
console.error("Form not found");
return;
}

form.addEventListener("submit", async (event: Event) => {
event.preventDefault(); // Prevent form submission

// Verify reCAPTCHA response
const recaptchaResponse = grecaptcha.getResponse();
if (!recaptchaResponse) {
console.error("Please complete the reCAPTCHA");
return;
}

try {
const response = await fetch("../php/captcha_verify.php", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: new URLSearchParams({
"captcha_submit": "true",
"g-recaptcha-response": recaptchaResponse
})
});

if (response) {
const result = await response.json();

if (result.success) {
console.log("CAPTCHA SUCCESS!");
} else {
grecaptcha.reset();
console.error("CAPTCHA verification failed");
}
} else {
console.error("Unable to fetch" + response);
}
} catch (error: unknown) {
console.error("Verification error:", error);
grecaptcha.reset();
}
});
} catch (error: unknown) {
console.error("Validation setup error:", error);
}
}
}

export default ValidateCaptcha;

captcha_verify.php:

Code: Select all