Google recaptcha v2 integration

Anvil Q&A
1

Hi,

I just wonder if there is any way to integrate google recaptcha v2 into anvil apps?
Client side integration is quite easy with custom HTML

<form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
</form>

However, server side is really a problem, what should be put in the action?
Thank you

2

I found it, just add data-callback=“done” make the function

<div class="g-recaptcha" data-sitekey="key" data-callback="done"></div>

<script>
function done(){
   alert("done")
 }
</script>
1 Like
3

Hi @Tony.Nguyen,

Great to hear you solved your problem! (And of course, once you can trigger a JS function based on the CAPTCHA, you can use anvil.call() to trigger Python code).

When you (or anyone else) have solved your problem, make sure to click the “Solution” box at the bottom of the post:

image

image

4

Hi @meredydd,

Thanks for your reminder and introducing the anvil.call(), which is a great feature.

Here is the complete client code, I got issue with the the first argument is a DOM element of the anvil.call(), but managed to get it.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
	<div class="g-recaptcha" data-sitekey="your_key" data-callback="get_token"></div>

<script>
function get_token(){
  var linkElement = $('.g-recaptcha');
  anvil.call(linkElement, "my_method", "World").then(function (r) {
    console.log("The function returned:", r);
  });
}
</script>

def my_method(self, name):
    alert(f"Hello, {name}")
    return 42

The server code is quite tricky

def _get_google_response(response):
  resp = anvil.http.request(    
    url=f"https://www.google.com/recaptcha/api/siteverify?secret=your_key&response={response}",
    method="POST",
    json=True,
  )
  return resp
1 Like
5

https://anvil.works/build#clone:NHKXNFGNIJAD7TYZ=TRWIALRL6RNWHVVLP43F2FQW

Works within domains for anvil.works and anvil.app
Not sure how long I’ll leave that site key and secret key active. So don’t rely on it, and register your own for a more reliable outcome :slight_smile:

I am now trying to work out how to use this either as a splash screen, before entering the main standard anvil app site that I am trying to protect.
Or maybe as a component on the main anvil app page, which prevents a user from submitting data while ever the recaptcha is not verified as ‘I am not a robot’. Hope that makes sense :slight_smile:

Thanks for sharing! I would never have even known where to start.

OK. Now with Globals between forms, and a splash page verifier version…

1 Like
6

Still missing the bit which gets to call the server function with the response from the reCAPTCHA.
And getting this response on recaptcha portal page…

image
image784×336 18.2 KB

7

OK, improved things. With a second confirm event working now. I will modify the original demo code, and publish back up here in the next day or so. Else please ping me if you’re getting into reCAPTHCA on anvil.

image
image883×438 27.1 KB

1 Like
8

I am glad that it works now.