How to implement reCaptcha V3 in ASP.NET

Question

Does anyone have a full implementation demo of reCaptcha V3 in ASP.NET?

I found this article: Google Recaptcha v3 example demo

At the moment I am using reCaptcha V2 with the following code:

public bool RecaptchaValidate()
    {
        string Response = Request.Form["g-recaptcha-response"];//Getting Response String Append to Post Method
        bool Valid = false;
        //Request to Google Server
        var CaptchaSiteKey = Settings["NewUserRegCaptchaSecretSiteKey"].ToString();
        HttpWebRequest req = (HttpWebRequest)WebRequest.Create
        (" https://www.google.com/recaptcha/api/siteverify?secret=" + CaptchaSiteKey + "&response=" + Response);
        try
        {
            //Google recaptcha Response
            using (WebResponse wResponse = req.GetResponse())
            {

                using (StreamReader readStream = new StreamReader(wResponse.GetResponseStream()))
                {
                    string jsonResponse = readStream.ReadToEnd();

                    JavaScriptSerializer js = new JavaScriptSerializer();
                    ReCaptchaObject data = js.Deserialize<ReCaptchaObject>(jsonResponse);// Deserialize Json

                    Valid = Convert.ToBoolean(data.success);
                }
            }

            return Valid;
        }
        catch (WebException ex)
        {
            throw ex;
        }
    }

On the view.ascx page I have:

<%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>

<script src='https://www.google.com/recaptcha/api.js'></script>

<scrip>
var recap = grecaptcha.getResponse();
if (recap.length == 0) {
                $("#verifyhuman").css("display", "block");
            }
</script>

 <div class="g-recaptcha" data-sitekey="<%=ReCaptchaPublicKey%>" id="recaptcha" data-callback="recaptchaCallback"></div>

Solution 1

The simplest implementation:

1. In your cshtml file (at the top)

   @section Scripts
   {
       <script src="https://www.google.com/recaptcha/api.js?render=your site key"></script>
       <script>
           grecaptcha.ready(function () {
               grecaptcha.execute('your site key', { action: 'homepage' }).then(function (token) {
                   document.getElementById("foo").value = token;
               });
           });
       </script>
   }
   

2. In your cshtml, inside the form (just before </form>):

   <input type="hidden" id="foo" name="foo" />
   

3. A function inside your Pagemodel class. See the documentation for the response object:

   public static bool ReCaptchaPassed(string gRecaptchaResponse)
   {
       HttpClient httpClient = new HttpClient();
   
       var res = httpClient.GetAsync($"https://www.google.com/recaptcha/api/siteverify?secret=your secret key no quotes&response={gRecaptchaResponse}").Result;
   
       if (res.StatusCode != HttpStatusCode.OK) 
       {
           return false;
       }
       string JSONres = res.Content.ReadAsStringAsync().Result;
       dynamic JSONdata = JObject.Parse(JSONres);
   
       if (JSONdata.success != "true" || JSONdata.score <= 0.5m)
       {
           return false;
       }
   
       return true;
   }
   

4. Finally, inside your OnPostAsync() handler, at the top:

   if (!ModelState.IsValid) 
   {
       return Page();
   }
   else
   {
       if (!ReCaptchaPassed(Request.Form["foo"]))
       {
           ModelState.AddModelError(string.Empty, "You failed the CAPTCHA.");
           return Page();
       }
   }
   

Solution 2

Edit : I have added a demo project . Check this github repository . https://github.com/NIHAR-SARKAR/GoogleRecaptchav3-example-In-asp.net

From frontend (.aspx page) you need to send ajax request to pass the token to backend server . Using "recaptcha.execute" U can get the response , and pass the token using ajax request .Please check the code block .

 <script src="http://www.google.com/recaptcha/api.js?render=recaptchaSiteKey"></script>
<script>
 grecaptcha.ready(function() {
 grecaptcha.execute('recaptchaSiteKey', {action: 'homepage'}).then(function(token) {

            $.ajax({
                //pass the toket to Webmethod using Ajax
            });
          });
     });
</script>

Reference link: https://developers.google.com/recaptcha/docs/verify https://developers.google.com/recaptcha/docs/display#js_api

Now in the aspx.cs you need to write a "[WebMethod]" to receive the token from Ajax request .

    [WebMethod]
    public static void CaptchaVerify(string token)
    {
            var responseString = RecaptchaVerify(token);
            ResponseToken response = new ResponseToken();
            response = Newtonsoft.Json.JsonConvert.DeserializeObject<ResponseToken>(responseString.Result);

    }

To get the response from google recapcha api u need to use async call using httpClient . you also need to create a class which will contain same properties like the response string . After getting the "responseString" u need to convert the response to ResponseToken object by using Newtonsoft.Json. response = Newtonsoft.Json.JsonConvert.DeserializeObject<ResponseToken>(responseString.Result);

private string apiAddress = "https://www.google.com/recaptcha/api/siteverify";

private string recaptchaSecret = googleRecaptchaSecret;

        public async Task<string> RecaptchaVerify(string recaptchaToken)
        {
            string url = $"{apiAddress}?secret={recaptchaSecret}&response={recaptchaToken}";
            using (var httpClient = new HttpClient())
            {
                try
                {

                    string responseString=  httpClient.GetStringAsync(url).Result;
                    return responseString;

                }
                catch (Exception ex)
                {
                    throw new Exception(ex.Message);
                }
            }
        }


        public class ResponseToken
        {

            public DateTime challenge_ts { get; set; }
            public float score { get; set; }
            public List<string> ErrorCodes { get; set; }
            public bool Success { get; set; }
            public string hostname { get; set; }
        }

Solution 3

The accepted answer on this page is totally wrong!!! Google returns a score between 0 and 1 to indicate whether the submission is likely to be a bot or likely to be a human.

The success property returned only means that the recaptcha token was processed correctly.

It is the score property that should be checked, not the success property

These lines are the probelem

if (JSONdata.success != "true")
    return false;

return true;

The actual score to compare will probably be in a variable that can be adjusted if need be. Google recommends starting with 0.5.

So the code should change to something like:

var recaptchaScore = 0.5m; // this could be in appSettings or whereever/however you are storing your constants

if (JSONdata.success != "true" || JSONdata.score <= recaptchaScore)
    return false;

return true;

Of course you will likely want to add logging etc to this answer but this is the bare logic that is required.

Solution 4

There are several Recaptcha libraries available for ASP.Net. I chose to use reCAPTCHA.AspNetCore because it provides an HtmlHelper.

Please note that this library only supports one ReCatpcha per page, and it doesn't support Recaptcha v3 passive monitoring on non-form pages.

View more solutions

Comments

[Gonzalo Lorieto]

Hope it helps mehmetcakmaz.com.tr/google-recaptcha-v3-kullanimi

[Tig7r]

Can someone give an answer without using MVC? The link above makes more sense but it is in Turkish.

[Gonzalo Lorieto]

Did you try to translate it?

[cSkillzMartin]

You looking to use this with WebForms?

[cSkillzMartin]

I'd add the '<WebMethod>' attribute above your RecaptchaValidate method and call it with $.ajax.

[Tig7r]

I would just like to mention that since using ReCaptcha V3, I have been getting a lot of false positives. Yes, you can change the threshold but there is no way for a user to be able to prove they are indeed a human once the code prevents them sending a form or etc. I would say, stay with V2 for now until Google improves this.

[Mike W]

Re: c) doc says it should be a POST not a GET developers.google.com/recaptcha/docs/verify

[Garrett Banuk]

ReCaptchaPassed() is returning if the captcha token is valid. I think you want to return JSONdata.number and test if the number is over a certain amount to see if they passed the captcha.

[nefen]

Mike W, it has no meaning to be in GET. You want to test the captcha after the submit button is pressed. I use it in POST and works fine.

[MunsterMan]

I got this to work, but some additions: you didn't mention adding a "form submit button" (Possibly assumed). Also I had to deserialize the response JSON.

[Ariel Popovsky]

Be careful with the HttpClient usage. In this way it will exhaust the sockets on your server. thecodebuzz.com/…

[Ariel Popovsky]

Be careful with the HttpClient usage. In this way it will exhaust the sockets on your server. thecodebuzz.com/…

[Salim]

is there any way to call on page load rather then a button submit or post the page?

[Jeremy Caney]

@Salim: You likely don't want to retrieve the token on page load, as the token expires within two minutes. As such, if a user takes more than two minutes to fill out a form after loading the page, the reCAPTCHA token validation will fail.

[Westley Bennett]

@Nihar Sarkar I have taken your fantastic test project to learn from, did a ton of Googling and learning, and built an "easy to use" solution for the ASP.NET Framework that anyone should be able to implement. I'd be curious to learn your opinion of this. I do mention you as the primary source of knowledge for much of the project: github.com/WestleyBennett/reCAPTCHAv3

[Nihar Sarkar]

@Westley Bennett your source code looks good .