There are many reasons to switch over to Google’s reCAPTCHA 2.0. Most notably is the improved user experience. It is unbelievably easy to incorporate it into an existing static page, but what about those dynamic pages? I will walk you through the steps it takes to add reCAPTCHA 2.0 into a dynamic webpage or even a dynamically generated form.
1. Include the Script
First things first, we need to include the reCAPTCHA js library somewhere on the page. As soon as the library is done loading it will attempt to find your captcha on the page and render it. For this reason it is important to add the render=explicit parameter to the url so that we can decide when (and where) the captcha is rendered.
<script src="https://www.google.com/recaptcha/api.js?render=explicit"></script>You can also specify a callback function that will be executed once the script loads.For more information look here.
<script>
var onReCaptchaLoad = function() {
// magic happens here
};
</script>
<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onReCaptchaLoad"></script>2. Render the reCAPTCHA
Make sure your form has an empty <div> that we can target for the captcha (you can also insert one dynamically).
<form>
<input/>
...
<div id="myCaptcha"></div>
</form>Using the id of the <div>, lets render the captcha. Note! the first parameter to the render function is the id of the div without the # symbol. Save yourself a few minutes.
var captchaWidgetId = grecaptcha.render( 'myCaptcha', {
'sitekey' : 'your_site_key', // required
'theme' : 'light', // optional
'callback': 'verifyCallback' // optional
});3. Get the reCAPTCHA Response
We can accomplish this several ways. The first is via callback. This must be defined as a parameter in the grecaptcha.render method (as shown above) OR as an attribute: <div id=”myCaptcha” data-callback=”verifyCallback”>.
var verifyCallback = function( response ) {
console.log( 'g-recaptcha-response: ' + response );
};The other method is to react to the form submission or button click etc..
document.getElementById("submit").onclick = function() {
// Grab the captcha response. Note that we have to use the widget id that we stored earlier (not the <div> id!).
var response = grecaptcha.getResponse( captchaWidgetId );
console.log( 'g-recaptcha-response: ' + response );
// proceed to submit the form or whatever you happen to be doing.
};4. Send Data to the Server
Regardless of the method you chose above, we need to send the response of the captcha back to the server along with the form submission. Here is a simple example using jQuery:
var postData = $( '#form' ).serialize();
$.post( '/form/submission/route', postData, function( data ) {
// were we successful?
});When the user successfully completes the captcha, a new field (g-recaptcha-response) will be added to your form. Alternatively, we can build up the post data manually using the captcha response obtained earlier.
var postData = { ... }
postData[ 'g-recaptcha-response' ] = response; // This is the response we found earlier from step 35. reVERIFY the reCAPTCHA on the Server
Although the captcha was verified on the frontend by Google, this response can easily be faked/modified before going to your server. For this reason, we will need to re-verify the captcha response on the backend. Just to see the big picture, here is what the entire process looks like.
Whatever your server is written in, you will need to do the following:
- Grab the g-recaptcha-response value from the POST data (assuming it was a POST request).
- Send a POST request to Google @ `https://www.google.com/recaptcha/api/siteverify` with the following parameters:
- + secret: (your site’s reCaptcha secret key)
- + response: (the captcha response you recieved from the front-end `g-recaptcha-response`)
- + remoteip: (optional: the user’s ip address)
