UncleCoder.com

UncleCoder.com

Free programming examples and instructions

Recaptcha in Update panel

Demo and code for validating recaptcha in updatepanel. Recaptcha disappear in updatepanel problem

by Athil


Posted on 11 Feb 2017 Category: Asp.net Views: 1981

Edited on 10 Aug 2017


Here I am going to show how to use recaptcha in update panel control.

DEMO

For that, I am going to design a contact form using update panel.

On Client Side

 <asp:UpdatePanel ID="UpdateContact" runat ="server">
               <ContentTemplate>
<table>
    <tr>
    <td>    Name</td>
     <td>   <asp:TextBox ID="txtname" required runat="server"></asp:TextBox></td></tr>
        <br />
       <tr> <td> Email</td>
      <td>  <asp:TextBox ID="txtEmail" required type="mail" runat="server"></asp:TextBox></td></tr> 
        <br />
        <tr><td> Message  </td>
      <td>   <asp:TextBox ID="txtMessage" required TextMode="MultiLine" rows="3" runat="server"></asp:TextBox></td></tr>
    <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
     <tr> <td colspan="2">
         <div id="recaptcha" class="g-recaptcha" data-sitekey=" ...Your Site Key"></div>

          </td> <td>  <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" /> </td> </tr>
    </table>

                   </ContentTemplate>
           </asp:UpdatePanel>


After that go to the link https://www.google.com/recaptcha/admin#list and register your website on the red marked place in the image and you will get site key


 you will get a site key, secret key and script tag and a div tag

 

On Client Side

<div class="g-recaptcha" data-sitekey ......../div>   

 

is to paste on the place where you need a captcha each one will get different data site key so the captcha ill work only when the site is hosted in registered domain space. Add an id to the div of recaptcha eg:-

<div id="recaptcha" class="g-recaptcha" data-sitekey ......../div>   
<script src='https://www.google.com/recaptcha/api.js'></script>

Copy the script tag in you head section  

 

On server side, you need to write the code for an HTTP post request.

  public string recaptchaPost(string EncodedResponse)
        {

            using (WebClient client = new WebClient())
            {

                byte[] response =
                client.UploadValues("https://www.google.com/recaptcha/api/siteverify", new NameValueCollection()
                   {
                       { "secret", "6Lf**** ....................." },  /// Your Secret key copy from the site
                       { "response", EncodedResponse }

                   });

                string result = System.Text.Encoding.UTF8.GetString(response);

                return result;

            }
        }

 

Call the function from the page 

 string EncodedResponse = Request.Form["g-Recaptcha-Response"];

           string recaptchRespone =  recaptchaPost(EncodedResponse);
           dynamic json = JObject.Parse(recaptchRespone);

           if (json.success == true)
          {
                  // Recaptcha validating success
                  // Contact code here
           }
           else
          { 

                      // Recaptcha validating fail
           }
 ScriptManager.RegisterStartupScript(UpdateContact, UpdateContact.GetType(), "loadCaptcha", "grecaptcha.render('recaptcha', {'sitekey': '6 ... Your site key' });", true);
 

 

g-Recaptcha-Response need to load the page, each time the value will be different.

This captcha will not work in localhost, you need to upload the website on the registered domain space, you can register subdomains also to check its working.

 

From Local host

From registered server



Leave a Comment:

                 

j$ Tuesday,11 Jul 2017

If you add "localhost" to the list of accepted domains, it *will* work on localhost. I'm currently developing a site and using this for testing.

Advertisement