Hello,
I am trying to create a recaptcha enterprise widget to integrate in our applications. I thought I was succesful till I deployed it to acceptance. Then i got the following error: Invalid action name: only A-Z, a-z, and _ are allowed.
The recaptcha id on TST contained only alphanumeric characters, while the id on acc en prd contained a '-'. If I try again with the id from tst, then everything works again, but not on acc.
Any idea what could be wrong in my code? Or is my code not working for the enterprise version of recaptcha?
// Define interface for props
interface RecaptchaEnterpriseContainerProps {
siteKey: DynamicValue<string>; // SiteKey as DynamicValue
token: EditableValue<string>; // EditableValue to interact with the Mendix attribute
onVerify: { execute: () => void }; // Callback for verification
}
// Component to handle reCAPTCHA Enterprise logic
const ReCaptchaEnterprise = ({
siteKey,
token,
onVerify,
}: RecaptchaEnterpriseContainerProps): ReactElement => {
const { executeRecaptcha } = useGoogleReCaptcha();
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const [isInitialized, setIsInitialized] = useState<boolean>(false);
const handleVerify = async () => {
const siteKeyValue = siteKey.status === "available" && siteKey.value ? siteKey.value : "";
if (!executeRecaptcha) {
setErrorMessage("Recaptcha is not initialized. Please try again later.");
return;
}
try {
console.info("before execute:" + siteKeyValue);
const mtoken = await executeRecaptcha(siteKeyValue); // Verify CAPTCHA using the site key
console.info("after execute:" + siteKeyValue);
token.setValue(mtoken); // Update the Mendix token attribute
console.info("after setvalue:" + mtoken);
onVerify?.execute(); // Trigger the verification callback
console.info("after onverify");
console.info("Finished verifying captcha:", mtoken);
} catch (error) {
setErrorMessage("Failed to verify reCAPTCHA. Please try again.");
console.error("Error during reCAPTCHA verification:", error);
}
};
useEffect(() => {
if (executeRecaptcha) {
setIsInitialized(true);
handleVerify();
} else {
setErrorMessage("Recaptcha is not initialized. Please try again later.");
}
}, [executeRecaptcha]); // Dependency array includes executeRecaptcha to ensure it runs when executeRecaptcha is available
return (
<div>
{errorMessage && !isInitialized && <p style={{ color: "red" }}>{errorMessage}</p>}
</div>
);
};