How to wait until the user finished the tasks after grecaptcha.execute()? reCAPTCHA v2 invisible

Question

How to wait until the user finished the tasks after grecaptcha.execute()? reCAPTCHA v2 invisible

1.8k views Asked by Jakob At 21 September 2024 at 12:57

I would like to make my own website, where I use reCAPTCHA. However, I don't know how to wait after grecaptcha.execute() until the user has completed the tasks. Because now the link is called directly without passing the tasks. For the rest I use the standard Google Script https://developers.google.com/recaptcha/docs/invisible It is the reCAPTCHA v2 invisible.

I would be happy about answers.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         grecaptcha.execute().then(var vslg = document.getElementById("vslg").value;
         window.location.replace("url");
       }
     </script>
  </head>
  <body>
    <a class="button"></a>
    <div class="topBar">
    </div>
    <div class="underTopBar">
            <form action="JavaScript:onSubmit()" class="flex-itemform form" method="POST" id="formV">
                <table>
                    <tr>
                        <td>
                            <div>
                                <input type="text"  id="vslg" required>
                            </div>
                        </td>
                        <td>
                            <div>
                                <div class="g-recaptcha"
                                  data-sitekey="..."
                                  data-callback="onSubmit"
                                  data-size="invisible">
                                </div>
                                <input type="submit" class="buttonDesign" value="Senden">
                            </div>
                        </td>
                    <tr>
                </table>
        </form>
    </div>

Original Q&A

There are 2 answers

Sina Atalay On 11 September 2022 at 00:14

I have spent more than 3 hours on this nonsense. It turned out to be a straightforward problem. I hope I can help somebody with this answer.

First, you must realize that you need 2 JavaScript functions.

1- A one that is executed after the submit button is pressed. In this function, always use: event.preventDefault() to avoid form submission! You don't want to submit your form yet. grecaptcha.execute() to initiate the reCAPTCHA.

You can execute this function with the submit button (onClick property).

2- A one that is executed after the reCAPTCHA is solved successfully. For this function, you only need: document.getElementById("form").submit() to submit your form.

To execute this function, use data-callback property in your reCAPTCHA div element. As you can see in the docs, data-callback property is defined as

The name of your callback function, executed when the user submits a successful response. The g-recaptcha-response token is passed to your callback.

That's all you need. Make sure that your form only gets submitted with the second function you created, nothing else.

**Patrick** · Accepted Answer · 2020-10-12 20:49:12

The following code does this:

The <button class="g-recaptcha"... is the Automatically bind the challenge to a button. It will automatically trigger the invisible recaptcha when the button is clicked.
Once the recaptcha is completed it will add a hidden field named g-recaptcha-response which contains the token and then run the onSubmit callback which submits the form.

  <head>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit() {
         document.getElementById("formV").submit();
       }
     </script>
  </head>
  <body>
    <a class="button"></a>
    <div class="topBar">
    </div>
    <div class="underTopBar">
            <form class="flex-itemform form" method="POST" id="formV">
                <table>
                    <tr>
                        <td>
                            <div>
                                <button 
                                  class="g-recaptcha buttonDesign"
                                  data-sitekey="..."
                                  data-callback="onSubmit"
                                  data-size="invisible">Senden</button>
                            </div>
                        </td>
                    <tr>
                </table>
        </form>
    </div>

Important: You still need to verify the token g-recaptcha-response server side. See Verifying the user's response. Without verifying the token, adding the recaptcha to the frontend doesn't stop anyone from submitting the form.

TechQA.

How to wait until the user finished the tasks after grecaptcha.execute()? reCAPTCHA v2 invisible

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in RECAPTCHA

Related Questions in INVISIBLE-RECAPTCHA

Popular Questions

Popular Tags

Trending Questions