Matthew Cox Team : Web Development Tags : Technology Web Development User Experience

Google is killing captcha and it’s about bloody time

Matthew Cox Team : Web Development Tags : Technology Web Development User Experience

Captcha was always a good idea on paper, but in practice it means annoying legitimate users. In the constant arms race between “hackers” and captcha companies it’s gotten to the point where a captcha needs to be nearly illegible in order to not be defeated. This means annoying users with nearly impossible to read text leading to lower conversions and frustrated users.

 Yesterday Google announced an end to all this in the form of a “no captcha reCAPTCHA”. Gone is the indecipherable scrawl of text, replaced with a single unassuming checkbox to indicate that you are in fact human. When you check the box Google does some sort of black magic to determine the presence of a human soul, and failing that check shows you a bunch of kittens. (No really. Read their blog http://googleonlinesecurity.blogspot.com.au/2014/12/are-you-robot-introducing-no-captcha.html)

 So what does it take to get this wizardry on your website? I put together a sample project in about 15mins so it’s pretty damn simple.

 Step 1. Sign up here:

https://www.google.com/recaptcha/admin

 Step 2. Add the recaptcha script to your head tag 

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

 Step 3. Add the captcha container to the page 

<div class="g-recaptcha" data-sitekey="<Site key here>"></div>

 Step 4. Verify the result in server side code

using Newtonsoft.Json;
using System.Configuration;
using System.Net;
using System.Web.Mvc;

namespace RecaptchaTest.Controllers
{
    public class HomeController : Controller
    {
        private static readonly string _recaptchaSecret = ConfigurationManager.AppSettings["Recaptcha.Secret"];

        // GET: Home
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }


        [HttpPost]
        public ActionResult Index(FormCollection form)
        {
            var captchaResponse = form["g-recaptcha-response"];
            var webclient = new WebClient();

            var response = webclient.DownloadString(
                string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}&remoteip={2}",
                _recaptchaSecret,
                captchaResponse,
                Request.UserHostAddress
            ));

            var result = JsonConvert.DeserializeObject<RecaptchaResult>(response);

            ViewBag.PassedCaptcha = result.Success;

            return View();
        }
    }

    public class RecaptchaResult
    {
        [JsonProperty("success")]
        public bool Success { get; set; }

        [JsonProperty("error-codes")]
        public string[] ErrorCodes { get; set; }
    }
}

This is a functional example of how easy it is to implement reCaptcha, it still needs proper error handling and currently will send the wrong IP address to google for users that are using proxies, but it effectively shows how easy it is to get up and running.