I've tried to insert a download link into a form with a reCaptcha (as per Google's instructions) but the submit button opens the link even if you don't pass the captcha challenge.
The code is very simple:
<head>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<form action="download link">
<input type="submit" value="download">
<div class="g-recaptcha" data-sitekey="xxx"></div>
</form>
</body>
Does anyone know why this isn't working? Thanks!
I think you've gotten a bit confused as to how Google reCaptcha works -- it does not prevent a POST (a user could easily circumnavigate such a thing), it's used to allow server side code to check that the user is not a robot.
This means you have to have something on the server side to check what's being submitted, too. You can't just do it all client side. (Although it looks like Google is doing everything client side, the reCaptcha button is actually in an iframe, on another server.)
For example. see Google's demo here: https://www.google.com/recaptcha/api2/demo
Notice that it still POSTs the data back to the server when you click submit -- it's the server that responds to say whether you're human or not.
As Google's documentation states:
You basically need to check whether the POST request
secret
matches your secret key from your Recaptcha account. If it does, then you should give the user a download link, if it doesn't, return an error message.You can learn more about this process in the reCaptcha documentation: https://developers.google.com/recaptcha/docs/verify
Update: If you don't care about a someone being able fake the result, you can do it using JavaScript like so: JSFiddle
There are a number of solutions to this, the primary issue is that the form action is the download link, so the form never has to validate at all.
You could write PHP code that validates and then initiates the download and use the page that is put on as your form action if you wish to validate via Google if you want true Google re-captcha authentication.
Alternatively, you can create javascript that alters the form action using the data-callback g-recaptcha tag attribute so that the form action is not a link until after recaptcha. This wont validate the customer's response via external servers and can be spoofed, but it will still prevent the link from being the form action until after recaptcha is pressed.
More information about tag attributes available to attach javascript actions to can be found here: https://developers.google.com/recaptcha/docs/display