google recaptcha example

Tags | google reCAPTCHA example javascript, Google reCAPTCHA example c#, Google reCAPTCHA v2 example code, Google reCAPTCHA 2.0 example, Google reCAPTCHA example asp.net, Google reCAPTCHA validation asp.net, Google reCAPTCHA required validation

Google reCAPTCHA example javascript

In this article, I will demonstrate how to implement Google reCAPTCHA  v2 on Client Side using JavaScript, jQuery in ASP.Net. The new reCAPTCHA is here. A significant number of your users can now attest they are human without having to solve a CAPTCHA. We’re calling it the No CAPTCHA reCAPTCHA experience.

Google reCAPTCHA validation asp.net

The Google reCAPTCHA version 2 ASP.Net allows validating the Captcha response on the client side using its Callback functions. In this example, the Google new reCAPTCHA will be validated using ASP.Net RequiredField Validator. Find the source code below:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo.aspx.cs" Inherits="Demo" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How can i validate google recaptcha using javascript/jquery</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
    <script type="text/javascript">
        var onloadCallback = function () {
            grecaptcha.render('dvCaptcha', {
                'sitekey': '<%=ReCaptcha_Key %>',
                'callback': function (response) {
                    $.ajax({
                        type: "POST",
                        url: "Demo.aspx/VerifyCaptcha",
                        data: "{response: '" + response + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (r) {
                            var captchaResponse = jQuery.parseJSON(r.d);
                            if (captchaResponse.success) {
                                $("[id*=txtCaptcha]").val(captchaResponse.success);
                                $("[id*=rfvCaptcha]").hide();
                            } else {
                                $("[id*=txtCaptcha]").val("");
                                $("[id*=rfvCaptcha]").show();
                                var error = captchaResponse["error-codes"][0];
                                $("[id*=rfvCaptcha]").html("RECaptcha error. " + error);
                            }
                        }
                    });
                }
            });
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h2>Google recaptcha javascript validation</h2>
        <div id="dvCaptcha">
        </div>

        <asp:TextBox ID="txtCaptcha" runat="server" Style="display: none" />
        <asp:RequiredFieldValidator ID="rfvCaptcha" ErrorMessage="The CAPTCHA field is required." ControlToValidate="txtCaptcha"
            runat="server" ForeColor="Red" Display="Dynamic" />
       
        <br />
        <asp:Button ID="btnSubmit" Text="Submit" runat="server" />

    </form>
</body>
</html>

using System.Net;
using System.Web.Services;

public partial class Demo : System.Web.UI.Page
{
    public static string ReCaptcha_Key = "6Lcl9UAUAAAAAERzuRAJF7ZE40tCRb7QS2Pj7hsd";
    public static string ReCaptcha_Secret = "6Lcl9UAUAAAAAA7_tCFtYro1ClRGlCKN8G_d24dF";
   

    [WebMethod]
    public static string VerifyCaptcha(string response)
    {
        string url = "https://www.google.com/recaptcha/api/siteverify?secret=" + ReCaptcha_Secret + "&response=" + response;
        return (new WebClient()).DownloadString(url);
    }
}

Download Source Code

Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

LEAVE A REPLY

Please enter your comment!
Please enter your name here