How to use Google’s new reCaptcha in .NET
Google has replaced its old reCaptcha with a more sophisticated one, it tracks your mouse movements (and other stuff) to identify if you are a bot or not, if you are able to pass this first test by simply checking that “I’m not a robot”, then you’re lucky, if not, then you will have to type in the 2 words like old times to prove that you are human.
So back to our point, how can we use this new reCaptcha in a .NET application, same approach goes for any other technology…
Head over to Google reCaptcha Admin Page, log in if necessary, then register a new website using the provided form.
You will receive a Site Key and a Secret Key, like these:
Now that you have your keys, it’s time to place the widget inside our webpage, to do this, we need to add the following line before the closing head tag.
Now place the following markup wherever you want the reCaptcha box to appear, preferably some place inside a form tag.
<div class="g-recaptcha" data-sitekey="xxxxxxx"></div>
Make sure you replace xxxxxxx with your Site Key.
And here it goes:
So let’s say our reCaptcha is included in a form, where we also have other inputs such as Email, and a button to submit the form, we can receive the following query string for example if we use jQuery’s .serialize() function.
The g-recaptcha-response is automatically generated from the reCaptcha, and it contains a very long string that we must use to verify if validation was successful directly from Google.
After we submit the form, we make a request to our Handler that should capture that string.
We must make a GET request with some parameters to the following URL:
- this is the Secret Key of our application.
- this is the Response
- that we got from the reCaptcha box
The response of this request will be a JSON string which contains a key “success” with a Boolean value of either True or False.
Assuming we have a Handler called ValidateRecaptcha.ashx, we can do the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
And that’s it!