Wednesday, May 06, 2009 12:27 PM jrice

Validating Recaptcha using Client-Side Web Service Calls

reCAPTCHA is a free CAPTCHA service that helps to digitize books, newspapers and old time radio shows.

Interactive Web applications may need to dynamically create the reCAPTCHA widget in response to user input. To support such applications, RECAPTCHA offers an AJAX API.

 

Heres a simple Demo on how to create and validate recaptcha using clientside web service call

 

<script type="text/javascript" src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script>
<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>

 

 

<script type="text/javascript">
        $(document).ready(function() {   showRecaptcha('recap') ;    });

        function GetWebService()
        {
            return DemoProject.Services.WebService1;
        }

        function showRecaptcha(element) {
            var RecaptchaOptions = {
                theme: 'custom',
                lang: 'en',
                custom_theme_widget: 'recaptcha_widget'
            };
            Recaptcha.create("xxxxxxxxxxxxxxxxxxxx", element, RecaptchaOptions);
            RecaptchaStr_en.play_again = "replay";
            RecaptchaStr_en.cant_hear_this = "can't hear";
        }

        function ValidateRecaptcha() {          
            GetWebService().ValidateRecaptcha(Recaptcha.get_challenge(),  Recaptcha.get_response(), onValidateRecaptchaSuccess, onValidateRecaptchaFailed);
        }

        function onValidateRecaptchaSuccess(ret) {
            if (ret == true)
            {
                alert('success');
            }
            else
            {
                alert('failed');

                //Reload recaptcha in case it fails
                Recaptcha.reload();
            }

        }

        function onValidateRecaptchaFailed(ret) {
           alert('an error has occured'); 
        }
</script>

 

//Add a scriptmanager to your page

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="~/Services/WebService1.asmx" />
    </Services>
</asp:ScriptManager>

<div id="recap">
        <div id="recaptcha_widget" style='display: block'>
            <span>Please type in both words separated by a space. Words are not
                case-sensitive.</span>
            <div class="recaptcha_only_if_image">
                <span>Having trouble? <a href="javascript:Recaptcha.switch_type('audio')">
                    listen</a> to an audio captcha or <a href="javascript:Recaptcha.reload()">load</a>
                    a different image.</span>
            </div>
            <div class="recaptcha_only_if_audio">
                <a href="javascript:Recaptcha.switch_type('image')">Go back</a>to the image, or
                <a href="javascript:Recaptcha.reload()">load</a> a different audio captcha
            </div>
            <div id="recaptcha_image">
            </div>
            <div class="recaptcha_only_if_incorrect_sol">
                Incorrect please try again</div>
            <span class="recaptcha_only_if_image">Enter the words above:</span> <span class="recaptcha_only_if_audio">
                Enter the words you hear:</span>
            <input type="text" id="recaptcha_response_field" name="recaptcha_response_field"  />
        </div>
</div>
<input type="button" value="validate" onclick="ValidateRecaptcha();"  />

 

//WebService1.asmx


    [WebMethod(true)]
    [System.Web.Script.Services.ScriptMethod()]
        private bool ValidateRecapatcha(string challengeValue, string responseValue)
        {
            try
            {
                Recaptcha.RecaptchaValidator captchaValidtor = new Recaptcha.RecaptchaValidator
                {
                    PrivateKey = "xxxxxxxxxxxxxxxxxxxx",
                    RemoteIP = HttpContext.Current.Request.UserHostAddress,
                    Challenge = challengeValue,
                    Response = responseValue
                };
                Recaptcha.RecaptchaResponse recaptchaResponse = captchaValidtor.Validate();
                return recaptchaResponse.IsValid;
            }
            catch (Exception)
            {
        //log the error

                return false;
            }
        }

 

 

 

 

HTH

Regards

Bilal Shouman

Filed under: ,

Comments

# re: Validating Recaptcha using Client-Side Web Service Calls

Friday, May 08, 2009 5:02 PM by Bill

Remember though that you still have to validate this captcha serverside within the request that does the actual work.

Otherwise an enterprising individual could use a tool like GreaseMonkey and override your validation method to pretend to be true without supplying the captcha.

# re: Validating Recaptcha using Client-Side Web Service Calls

Friday, May 08, 2009 7:16 PM by jrice

thank you for your reply, but this was for a demo purpose, but in this sample captcha is being validated on server side and a bool value was returned to user.. but in real life senarios you call a webservice that calls ur business in case captcha succeeded.

Leave a Comment

(required) 
(required) 
(optional)
(required)