Posted on by david.tigner

ReCaptcha v3 coding placement

I am trying to upgrade from ReCaptcha v1 (in use and working good since 2017) to ReCaptcha v3 as ReCaptcha is not compatible with any of the PHP v8's. I started setting it up (got site and secret keys) and coding for 2 versions of ReCaptcha v3 (1. Automatically bind the challenge and 2. Programmitically invoke the challenge). I like 2. better. Anyway, the coding format for these 2 ReCaptcha v3's are different than what is currently in use on the HTML front side of my on-line submission pages. The coding for 1. & 2. are below. The Curly braces and tab stops (4+ spaces) were removed from the coding to avoid getting the following message: 'Curly braces and tab stops (4+ spaces) may only be used when posting code.'. Each of the 2 versions below has 3 parts. Only part 1 of both (Load the JavaScript API) is the same coding format as the original.

I have a few questions:

  1. Where in the program file would the coding listed under both part 2's go ? (e.g. Add a callback function to handle the token & Call grecaptcha.execute on each action you wish to protect.) As they are <script> functions it looks like they may go in the <head> section with the other <script> stuff.

  2. Where in the program file would the coding listed under both 1. part 3 go ? (e.g. Add attributes to your html button) In the original, in the <body> section in the part where the ReCaptcha appears on the screen is the following: <div align="center" class="g-recaptcha" data-sitekey="(site key code)"></div>

  3. Under 2. part 3: Send the token immediately to your backend with the request to verify (/recaptcha/docs/verify), how is this done ? (I haven't looked at the PHP code in the backend side file yet. Want to get the front end HTML stuff set first then I'll see about configuring ReCaptcha v3 in the PHP file)

ReCaptcha v3 Coding:

  1. Automatically bind the challenge to a button

The easiest method for using reCAPTCHA v3 on your page is to include the necessary JavaScript resource and add a few attributes to your html button.

Part 1 - Load the JavaScript API.

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

Part 2 - Add a callback function to handle the token.

<script>
function onSubmit(token)document.getElementById("demo-form").submit();
</script>

Part 3 - Add attributes to your html button.

<button class="g-recaptcha" 
        data-sitekey="reCAPTCHA_site_key" 
        data-callback='onSubmit' 
        data-action='submit'>Submit</button>
  1. Programmatically invoke the challenge

If you wish to have more control over when reCAPTCHA runs, you can use the execute method in grecaptcha object. To do this, you need to add a render parameter to the reCAPTCHA script load.

Part 1 - Load the JavaScript API with your sitekey.

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

Part 2 - Call grecaptcha.execute on each action you wish to protect.

<script>
function onClick(e)
e.preventDefault();
grecaptcha.ready(function()
grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token)
// Add your logic to submit to your backend server here.););
</script>

Part 3 - Send the token immediately to your backend with the request to verify.