bitty

Integrating the New Google reCAPTCHA With YOURLS

The Problem

URL shortening services are often a target for automated spam form submissions. The traditional way to prevent spam bots from doing this is to require a captcha to be properly filled out before a form can be submitted. Unfortunately, captchas can significantly reduce the quality of a user experience as they require deciphering cryptic text, putting the pieces of a puzzle together, or some other action which can significantly increase the amount of time a user spends trying to complete a form.

The new Google reCAPTCHA service aims to get rid of those traditional problems with captchas by providing what they call the "No CAPTCHA reCAPTCHA experience." This is accomplished by using an "advanced risk analysis system" which can separate actual humans from bots with just the check of a box. More information about this system can be found on the Google reCAPTCHA website.

Because of its easy of use, the new Google reCAPTCHA is ideal for URL Shortening websites since it allows users to create short URLS quickly while preventing spam at the same time. This tutorial will show you how to integrate this service into a YOURLS installation, much like what this website, bitty.link uses.

Tutorial

This tutorial will show how to implement the "No CAPTCHA reCAPTCHA" into the default YOURLS public interface setup. Obviously, it can be tweaked and modified for other public interfaces.

Please note that this tutorial uses the reCAPTCHA API 1.0.

  1. Visit the Google reCAPTCHA website. You will need to "Get reCAPTCHA," which requires a Google account. After filling out the required information, you should receive your site key and secret key. Make sure to keep this information handy.
  2. In your YOURLS installation, open the file includes/functions-html.php. Copy the JavaScript client-side script from the reCAPTCHA website and place it in the described place. [View Example Image]
  3. Open your public interface file. On the reCAPTCHA website, copy the "sitekey" line and paste it in the described place. [View Example Image]
  4. Upload a copy of the captcha.php and recaptchalib.php files to the directory of your YOURLS installation that has your public user interface in it. Although those two files do not use the most recent reCAPTCHA API, they are easier to implement and will still work just fine.
  5. In the captcha.php file, paste in your secret and site keys to the indicated spots.
  6. Open your public user interface file. Paste the following under where it says "Part to be executed if FORM has been submitted:" include('captcha.php'); if ($resp != null && $resp->success) { [View Example Image]
  7. Place a "}" at the end of the text block in the example photo: [View Example Image]

This is the most basic way to get the new Google reCAPTCHA working on your YOURLS instillation. Although it will prevent spam bots from submitting automated requests, if a user fails to fill out the captcha, unfortunately, a reason to why the request failed will not be given unless more code is added.

Please open a support ticket if you need assistance or if you feel any information in this tutorial is incorrect or could be improved.

Tutorial written by Jared Stark. Last updated on April 3, 2015.