Google reCAPTCHA for Razor/CSHTML

Web bots/Robots can be good or evil.
Form submission robots waste a ton of time and are mostly in the evil category. To slow them down, we implement reCAPTCHA.

DEMO reCAPTCHA

Google aquired CAPTCHA, and has improved it to make it easy for humans and tougher for robots.
Here is my method of implementing it on a cshtml/Microsoft RAZOR pages.

The client side is well document on the google site and elsewhere, so I only lightly cover it.

First go to https://developers.google.com/recaptcha/docs/start to aquire a api key

Next, put the widget into your html form. It is a div.

now the tricky part;

you can use something like jquery to post the form. Hide the reCAPTCHA response in a hidden field and set it before calling your server code via ajax.

                $('#captchahidden').val($(".g-recaptcha-response").val());

                $('input#submitButton').click( function() {
                    $.post( 'some-url', $('form#myForm').serialize(), function(data) {
                         ... do something with response from server
                       },
                       'json' // I expect a JSON response
                    );
                });
            
with these additions to your form;

On the server side, create a cshtml file (ie; contact.cshtml) and add this code.
            @using System.Linq;
            @using System.Web.Script.Serialization;

            @using System.Web;
            @using System.Web.UI;
            @using System.Web.UI.WebControls;
            @using System.Net;
            @using System.IO;
            @using System;
            @using System.Collections.Generic;

            @functions {
                public class returnobj
                {
                    public bool success { get; set; }
                    public string message { get; set; }
                }
            }

            @{ 
                var requestResponse = Request["field1"] + "";  //add all the fields you want to retrieve from your form.
                var grecaptcharesponse = Request["captchahidden"] + "";

                //Replace [your secret API code] with the api secret code from google.
                var Url = "https://www.google.com/recaptcha/api/siteverify?secret=[your secret API code]&response=" + grecaptcharesponse;

                System.Net.WebClient objWebClient = new System.Net.WebClient();
                System.Text.UTF8Encoding objUTF8 = new System.Text.UTF8Encoding();
                string result = objUTF8.GetString(objWebClient.DownloadData(Url));

                var returnobj = new returnobj();
                if(result.IndexOf(": true")>0){
                    returnobj.success = true;
                    returnobj.message = "Thank you " + inputFirstName + ", message received. ";
                }
                else{
                   returnobj.success = false;
                   if(result.IndexOf("missing-input-response")>0){
                       returnobj.message = "Missing CAPTCHA response.  Please verify you are not a robot.";
                   }
                   else{
                       returnobj.message = "Sorry, Trouble with CAPTCHA bot prevention. Please try again later.";
                   }
                }
                Json.Write(returnobj, Response.Output);
            }
            

That's it! I hope you like it and have no problems implementing Google reCAPTCHA!

Doug
last update: 02/15/2015