Customize reCaptcha, remove theme. ASP.net

It was my first time to use reCaptcha, and i found out that there is a default theme plugin to it, where all i need to get is just the image, with the link reload captcha and link to play audio, similar to the facebook and twitter. Set the reCaptcha theme to "clean" ( theme: 'clean' ) still looks bad. And it took me a while to configure the API inorder to blend in and work good to the website we have.

Well, custom theming API allows you to do the same thing that Facebook has done. Unfortunately, this customization can't be done without javascript.

In order to use custom theming, you must first set the theme property of the RecaptchaOptions to 'custom'. This tells reCAPTCHA that it should not create a user interface of its own. reCAPTCHA will rely on the presence of HTML elements with the following IDs to display the CAPTCHA to the user:

* An empty div with ID recaptcha_image. This is where the actual image will be placed. The div will be 300x57 pixels.
* A text input with ID and name both set to recaptcha_response_field. This is where the user can enter their answer.
* Optionally, a div which contains the entire reCAPTCHA widget. This ID div should be placed into the custom_theme_widget and the style of the div should be set to display:none. After the reCAPTCHA theming code has fully loaded, it will make the div visible. This element avoids making the page flicker while it loads.

Note: dont forget to export the recaptcha.js before the above code.

On the page you will have this html code:

Incorrect please try again





  
   

     <%--an empty div with ID recaptcha_image --%>
    
 
   
    

     Get another CAPTCHA
     Get an audio CAPTCHA 
     
  
 
<%--a text input with ID and name both set to recaptcha_response_field --%>
 

So its kinda look like this( is use asp.net MVC ):




Have this script also to check if the inputed text is same as the image recaptcha that generated.

$(function() {
         $('#submitLink').click(function() {
             $.ajax({
                 type: "POST",
                 url: "/Home/isCaptchaValid",
                 async: false,
                 data: { "challenge": Recaptcha.get_challenge(), "response": Recaptcha.get_response() },
                 success: function(data) {
                     alert(data);
                 },
                 error: function() { alert('error'); }
             });
         });
     });

Take a look at the URL i call it will go on the HOME controller (as i used the MVC). The code behind for this application:

//be reminded that i use ASP.net MVC
//it will return a JSON boolean.

[AcceptVerbs(HttpVerbs.Post)]
      public bool isCaptchaValid(string challenge,string response)
      {

             // Add your operation implementation here
          Recaptcha.RecaptchaValidator validator = new Recaptcha.RecaptchaValidator
          {
              PrivateKey = "6LcouQcAAAAAAOjcmhymXE9M7jTHAmV9VsIm1UFy",
              RemoteIP=Request.UserHostAddress,
              Challenge=challenge,
              Response=response
        
          };
          Recaptcha.RecaptchaResponse Cresponse = validator.Validate();
          return Cresponse.IsValid;
      }

The parameters Recaptcha.get_challenge() and Recaptcha.get_response() are the helper functions that return the reCAPTCHA challenge string and the response that the user has typed in to the response field. They return null if the widget isn't showing. Can be used with the AJAX API to retrieve the answers so that an XMLHttpRequest can be used to post the reCAPTCHA solution.

View the demo.

For more info visit: ASP.NET CAPTCHA Library for reCAPTCHA


ciao