I’m trying to get reCAPTCHA to work on out custom HTML website. I wanted to use V3 enterprise but our website doesn’t use Word Press. My form is a simple one and uses an input for form submission. I’ve integrated the v3 Captcha but I don’t know how I can verify it.
We use Namecheap hosting and I believe that I can use python but I can’t seem to figure out how to integrate it all to just work.
Script in the head:
<script src="https://www.google.com/recaptcha/enterprise.js?render=MY ACTUAL KEY"></script>
Form:
<form
id="wf-form-Contact-Form"
name="wf-form-Contact-Form"
data-name="Contact Form"
method="get"
data-wf-page-id="6271900268b7c1836acc3047"
data-wf-element-id="e23db74d-4c3c-4a5a-dcc3-e16717d2b392"
data-turnstile-sitekey="0x4AAAAAAAQTptj2So4dx43e">
<input
class="text-field w-input"
maxlength="256"
name="name"
data-name="Name"
placeholder="Your Name (required)"
type="text"
id="name"
required="" /><input
class="text-field w-input"
maxlength="256"
name="email"
data-name="Email"
placeholder="Your Email (required)"
type="email"
id="email"
required="" /><input
class="text-field w-input"
maxlength="256"
name="Phone"
data-name="Phone"
placeholder="Phone Number"
type="tel"
id="Phone" /><input
class="text-field w-input"
maxlength="256"
name="Subject"
data-name="Subject"
placeholder="Subject (required)"
type="text"
id="Subject"
required="" /><textarea
id="Message"
name="Message"
maxlength="5000"
data-name="Message"
placeholder="Your Message (required)"
required=""
class="text-field multiline w-input"></textarea>
<input
type="submit"
id="submit-btn"
class="button w-button"
value="Submit" />
</form>Script at the end on the body:
<script>
document
.getElementById("wf-form-Contact-Form")
.addEventListener("submit", function (event) {
event.preventDefault(); // Stop the form from sending immediately
const form = event.target;
grecaptcha.enterprise.ready(function () {
grecaptcha.enterprise
.execute("MY ACTUAL KEY", {
action: "submit",
})
.then(function (token) {
// 1. Create a hidden input to hold the token
const hiddenInput = document.createElement("input");
hiddenInput.setAttribute("type", "hidden");
hiddenInput.setAttribute("name", "g-recaptcha-response");
hiddenInput.setAttribute("value", token);
// 2. Add it to the form
form.appendChild(hiddenInput);
// 3. Submit the form to Webflow/Your Server
form.submit();
});
});
});
</script>I have the Python script that Google provides but I’m unsure how to tie it all together to get it to verify:
from google.cloud import recaptchaenterprise_v1
from google.cloud.recaptchaenterprise_v1 import Assessment
def create_assessment(
project_id: str, recaptcha_key: str, token: str, recaptcha_action: str
) -> Assessment:
"""Create an assessment to analyze the risk of a UI action.
Args:
project_id: Your Google Cloud Project ID.
recaptcha_key: The reCAPTCHA key associated with the site/app
token: The generated token obtained from the client.
recaptcha_action: Action name corresponding to the token.
"""
client = recaptchaenterprise_v1.RecaptchaEnterpriseServiceClient()
# Set the properties of the event to be tracked.
event = recaptchaenterprise_v1.Event()
event.site_key = recaptcha_key
event.token = token
assessment = recaptchaenterprise_v1.Assessment()
assessment.event = event
project_name = f"projects/{project_id}"
# Build the assessment request.
request = recaptchaenterprise_v1.CreateAssessmentRequest()
request.assessment = assessment
request.parent = project_name
response = client.create_assessment(request)
# Check if the token is valid.
if not response.token_properties.valid:
print(
"The CreateAssessment call failed because the token was "
+ "invalid for the following reasons: "
+ str(response.token_properties.invalid_reason)
)
return
# Check if the expected action was executed.
if response.token_properties.action != recaptcha_action:
print(
"The action attribute in your reCAPTCHA tag does"
+ "not match the action you are expecting to score"
)
return
else:
# Get the risk score and the reason(s).
# For more information on interpreting the assessment, see:
# https://cloud.google.com/recaptcha-enterprise/docs/interpret-assessment
for reason in response.risk_analysis.reasons:
print(reason)
print(
"The reCAPTCHA score for this token is: "
+ str(response.risk_analysis.score)
)
# Get the assessment name (id). Use this to annotate the assessment.
assessment_name = client.parse_assessment_path(response.name).get("assessment")
print(f"Assessment name: {assessment_name}")
return response