Pinnacle Marketing
Management Inc

L: (613)-828-6980
TF: 866-999-4057

P.O. Box 23129
Fairlawn Plaza PO

Ottawa ON K2A 4E2
Click for the BBB Business Review of this Internet Marketing Services in Ottawa ON

[Guide] Installing the new Invisible reCaptcha on your Website

Home/Technical/[Guide] Installing the new Invisible reCaptcha on your Website

[Guide] Installing the new Invisible reCaptcha on your Website

Google has recently introduced a new update to their reCaptcha service called the Invisible reCaptcha. It’s based on the same technology as the previous version (the “no captcha reCaptcha”), but simplifies the process to remove even the checkbox step. The captcha functionality is now tied completely to the submit button.

This article will cover the process of installing the Invisible reCaptcha on your site, detailing both the front and backend functionality. JavaScript will be used on the frontend and PHP on the backend.

We’ll split this article into three parts: Requesting the reCaptcha keys, Implementing the frontend, and Implementing the backend.

Requesting the reCaptcha keys

The first and easiest step to installing reCaptcha will be to request the public and private keys from the reCaptcha website. These are used as a unique site identifier, and also to prove that the real site owner is verifying their user’s identity.

Visit the reCaptcha website and click Get reCaptcha. Select Invisible reCAPTCHA from the radio box, enter your site’s domain(s) and hit register. You’ll now be given your personalized Site Key (public key) and Secret key (private key). Do not share your Secret Key with anybody, as otherwise they will be able to impersonate you.

Implementing the Frontend

To get started in the actual implementation, we’re first going to create a very simple HTML form named form.html.

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Form</title>
	</head>
	<body>
		<form id="contact" method="post">
			<label>First <input type="text" name="first"></label><br>
			<label>Last <input type="text" name="last"></label><br>
			<button>Submit</button>
		</form>
	</body>
	</html>

Now let’s add some reCaptcha functionality. First you’ll need to link the reCaptcha API script in the <head> tag.

	<script src="https://www.google.com/recaptcha/api.js" async defer></script>

This is used to do two things:

  • Prevents the submit button from immediately navigating away when clicked
  • Contacts Google with relevant user metrics to determine if they’re suspicious or not

In the previous version of reCaptcha, we would normally insert a new element above the submit button to be clicked. In the Invisible reCaptcha, we integrate directly with the submit button instead.

	<button class="g-recaptcha" data-sitekey="" data-callback="captchaSubmit">Submit</button>

You’ll need to update the data-sitekey field with your own key from Google. Site keys are unique but are not secret, so don’t worry that this is public facing.

At this point the reCaptcha library will be loaded and will prevent the submit button from being clicked. This is where the data-callback field comes in. A callback function is a special type of function that is executed after a certain task has finished. In this case, it’s a JavaScript function named captchaSubmit that will be called after the button is clicked and Google’s measured the user metrics. As such, we’ll need to create a new JavaScript function with that name.

	<script>
		function captchaSubmit(data) {
			document.getElementById("contact").submit();
		}
	</script>

This code first accepts an argument (here called data) which carries the reCaptcha response data. You could add any client-side verification in at this point, but we’re simply going to submit the form.

Also note that getElementById("contact") refers to the ID used by the form, so it must match your <form> ID. Ours is simply named “contact”.

With these changes, our frontend is fully functional. Once submit is clicked the script will send data to Google and then complete the form. All that’s left is visual changes and cleanup.

You might have noticed the reCaptcha badge in the lower right corner of the screen. This exists to let users know that a form is protected by reCaptcha now that the verification checkbox has been removed. It’s possible to hide this badge however by configuring it to be inline, and then modifying it with CSS.

	<button class="g-recaptcha" data-sitekey="" data-callback="captchaSubmit" data-badge="inline">Submit</button>
	<style>
		.grecaptcha-badge {display: none;}
	</style>

Please note that because Google collects user information to enable reCaptcha functionality, their terms of service require you to alert users to its use. If you hide the badge you’ll want to add an informational paragraph somewhere on the page instead.

Finally, let’s prepare for the next step. Add an action attribute to your form so we can send our results to the next page.

	<form id="contact" action="results.php" method="post">

Now with the frontend code finished, let’s put it all together. Our completed form.html page now looks like this:

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Form</title>
		<script src="https://www.google.com/recaptcha/api.js" async defer></script>
		<script>
			function captchaSubmit(data) {
				document.getElementById("contact").submit();
			}
		</script>
		<style>
			.grecaptcha-badge {display: none;}
		</style>
	</head>
	<body>
		<form id="contact" action="results.php" method="post">
			<label>First <input type="text" name="first"></label><br>
			<label>Last <input type="text" name="last"></label><br>
			<button class="g-recaptcha" data-sitekey="" data-callback="captchaSubmit" data-badge="inline">Submit</button>
			<p>Please note this form is protected by reCaptcha.</p>
		</form>
	</body>
	</html>

Implementing the Backend

The backend is where we validate the user’s input, and decide which actions to take as a result.

We’ll start by creating a new file called results.php. Note that the file extension should be .php, as it will require server-side code.

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Results</title>
	</head>
	<body>
		<p>Thank you for entering the form.</p>
	</body>
	</html>

We’ve started with an empty template that simply thanks the user for submitting the form. Form data will be visible in the $_POST variable, which we’ll use shortly.

Next up is processing the reCaptcha response to verify the user is human. We’ll start by setting up our variables.

	// reCaptcha info
	$secret = "";
	$remoteip = $_SERVER["REMOTE_ADDR"];
	$url = "https://www.google.com/recaptcha/api/siteverify";
  • $secret is your Secret Key from reCaptcha. As this is being entered on the server-side, this will be completely hidden from the user.
  • $remoteip is the user’s IP address. This is an optional field, though improves accuracy.
  • $url is the URL we need to query to receive our response from reCaptcha.

Next up is collecting and processing the form data. $response will hold a reference to the user’s session, which is necessary for getting a proper response back.

	// Form info
	$first = $_POST["first"];
	$last = $_POST["last"];
	$response = $_POST["g-recaptcha-response"];

Finally we have all the ingredients we need to query reCaptcha and verify the user’s humanity. For this purpose we’ll use a curl script.

	// Curl Request
	$curl = curl_init();
	curl_setopt($curl, CURLOPT_URL, $url);
	curl_setopt($curl, CURLOPT_POST, true);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($curl, CURLOPT_POSTFIELDS, array(
		'secret' => $secret,
		'response' => $response,
		'remoteip' => $remoteip
		));
	$curlData = curl_exec($curl);
	curl_close($curl);

$curlData has now captured the JSON response from reCaptcha. To make sense of this response, we’ll decode the JSON into an associative array.

	// Parse data
	$recaptcha = json_decode($curlData, true);

Finally we can simply read the “success” property to receive our result.

	if ($recaptcha["success"])
		echo "Success!";
	else
		echo "Failure!";

Once again, let’s put it all together to see our (hopefully) working script.

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Results</title>
	</head>
	<body>
		<p>Thank you for entering the form.</p>

		<?php
			// reCaptcha info
			$secret = "";
			$remoteip = $_SERVER["REMOTE_ADDR"];
			$url = "https://www.google.com/recaptcha/api/siteverify";

			// Form info
			$first = $_POST["first"];
			$last = $_POST["last"];
			$response = $_POST["g-recaptcha-response"];

			// Curl Request
			$curl = curl_init();
			curl_setopt($curl, CURLOPT_URL, $url);
			curl_setopt($curl, CURLOPT_POST, true);
			curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
			curl_setopt($curl, CURLOPT_POSTFIELDS, array(
				'secret' => $secret,
				'response' => $response,
				'remoteip' => $remoteip
				));
			$curlData = curl_exec($curl);
			curl_close($curl);

			// Parse data
			$recaptcha = json_decode($curlData, true);
			if ($recaptcha["success"])
				echo "Success!";
			else
				echo "Failure!";
		?>
	</body>
	</html>

Please note that this example doesn’t include error handling, such as if this page were accessed directly.

In this example we’re only printing “Success” or “Failure” based on the result of the captcha, but you can extend this to instead send an email, enable a user registration, or allow another action.

With all three pieces of the puzzle put together, we’re finished! You should now have a working implementation of Google’s Invisible reCaptcha on your form.

For more technical details or other questions, reCaptcha’s documentation can be found on Google’s Developer site.

By | 2017-04-24T17:17:26+00:00 March 21st, 2017|Technical|12 Comments

About the Author:

12 Comments

  1. J.C. April 17, 2017 at 10:28 pm - Reply

    Doesn’t work for me.

    • admin April 20, 2017 at 10:37 am - Reply

      Hi J.C.,

      What problem are you having exactly? You may be able to look at your Javascript console to view any errors reported.

      Best of luck!

  2. David Fallows April 24, 2017 at 4:10 pm - Reply

    Hi there,

    Thanks for the tutorial, it’s a really in-depth and concise explanation.

    Unfortunately however I end up with an eternal cycle of Captcha puzzles which pop up when my button is pressed. Any idea how to get around this one?

    Give it a try: http://davidfallows.net/

    Thanks!
    David.

    • admin April 24, 2017 at 5:00 pm - Reply

      Hi David!

      Thanks for the kind words.

      From a quick look at your site, the page is throwing a Javascript error when you press Submit (as shown in the Console). The reason is that it’s trying to bind to the form ID, but it can’t find it. It looks like you have a duplicate #contact ID. Try running document.getElementById("contact") in your console to see.

      Giving it a unique ID and then updating the script tag in the header should resolve the problem.

      I’ll update the article to make this more explicit.

      Cheers.

      • David Fallows April 25, 2017 at 12:42 pm - Reply

        Thanks very much! I’m very busy over the next couple of days, so I’ll try again on Thursday/Friday. 🙂

  3. Kevin Gibson May 2, 2017 at 9:21 pm - Reply

    Tried this, thanks for sharing! Seems to work ok-ish, only problem is I’m getting a 3×3 image grid before I can confirm the reCaptcha. Obviously not very invisible. Any reason for this?

    • admin May 2, 2017 at 9:41 pm - Reply

      Hi Kevin,

      This occurs when Google suspects that you may be a spambot, and so they apply a higher level of scrutiny to your submission. The same occurred with the previous Checkbox method.

      The reason for this is likely to be that you submitted the form many times while installing/testing it, and that behavior would look suspicious to Google. It should subside over time in that case. Another possibility is that you’re blocking information that Google uses to analyze your input (eg. Javascript, cookies), and so the only way they can verify if you’re a real user is to pop up the extra 3×3 image squares.

      Hopefully that helps. I’m glad the installation itself worked for you.

  4. Riyas May 3, 2017 at 1:05 pm - Reply

    Hi,

    Excellent!!!

    it’s working perfectly!!!!

    I have two forms but the captcha only working with the first form not sure what’s happening with the second form, I curious to know how its work with multiple forms in a single page.

    Thanks!

  5. Riyas May 4, 2017 at 4:54 pm - Reply

    Hi, is any chance to work in multiple forms in the same page?

  6. Belinda Chisholm May 6, 2017 at 7:45 am - Reply

    Works! Thankyou!

  7. asdas May 20, 2017 at 2:29 pm - Reply

    Super helpful. Thanks

  8. Lowell Klassen May 22, 2017 at 1:07 am - Reply

    Works! This is the best walkthrough I’ve found so far! Thank you!

Leave A Comment