Home  Google-api   When to cal ...

When to call the execute method to generate reCAPTCHA tokens

The grecaptcha.execute method is called in the client-side code to generate a reCAPTCHA token, which is then sent to your server for verification. This method can be called at various points in your application, depending on your use case. Here are some common scenarios:

Common Scenarios for Calling grecaptcha.execute

  1. Form Submission:

    • The grecaptcha.execute method is typically called just before a form is submitted. This ensures that the reCAPTCHA token is generated and included in the form data sent to the server.

  2. Page Load:

    • For certain actions where you want to verify the user's legitimacy as soon as they visit the page, you might call grecaptcha.execute on page load.

  3. Button Click:

    • You can also call grecaptcha.execute when a specific button is clicked (e.g., a "Submit" or "Verify" button) to generate a token for that specific action.

Example Integrations

1. Form Submission Example

In this example, grecaptcha.execute is called just before the form is submitted. The token is then included as a hidden field in the form.

<!DOCTYPE html>
<html>
<head>
  <title>reCAPTCHA v3 Example</title>
  <script src="https://www.google.com/recaptcha/api.js?render=your_site_key"></script>
</head>
<body>
  <form id="demo-form" action="/submit" method="POST">
    <!-- Your form fields here -->
    <button type="submit">Submit</button>
  </form>

  <script>
    document.getElementById('demo-form').addEventListener('submit', function(event) {
      event.preventDefault(); // Prevent the default form submission

      grecaptcha.ready(function() {
        grecaptcha.execute('your_site_key', { action: 'submit' }).then(function(token) {
          var form = document.getElementById('demo-form');
          var input = document.createElement('input');
          input.type = 'hidden';
          input.name = 'recaptcha_token';
          input.value = token;
          form.appendChild(input);

          form.submit(); // Submit the form after appending the token
        });
      });
    });
  </script>
</body>
</html>

2. Page Load Example

In this example, grecaptcha.execute is called when the page loads, and the token is sent to the server immediately. This can be useful for actions like logging page visits.

<!DOCTYPE html>
<html>
<head>
  <title>reCAPTCHA v3 Example</title>
  <script src="https://www.google.com/recaptcha/api.js?render=your_site_key"></script>
</head>
<body>
  <script>
    grecaptcha.ready(function() {
      grecaptcha.execute('your_site_key', { action: 'homepage' }).then(function(token) {
        // Send the token to your server via an AJAX request
        fetch('/submit', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ recaptcha_token: token })
        }).then(response => response.json()).then(data => {
          console.log(data); // Handle the response from the server
        });
      });
    });
  </script>
</body>
</html>

3. Button Click Example

In this example, grecaptcha.execute is called when a button is clicked, generating a token for a specific user action.

<!DOCTYPE html>
<html>
<head>
  <title>reCAPTCHA v3 Example</title>
  <script src="https://www.google.com/recaptcha/api.js?render=your_site_key"></script>
</head>
<body>
  <button id="verify-button">Verify Action</button>

  <script>
    document.getElementById('verify-button').addEventListener('click', function() {
      grecaptcha.ready(function() {
        grecaptcha.execute('your_site_key', { action: 'button_click' }).then(function(token) {
          // Send the token to your server via an AJAX request
          fetch('/submit', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ recaptcha_token: token })
          }).then(response => response.json()).then(data => {
            console.log(data); // Handle the response from the server
          });
        });
      });
    });
  </script>
</body>
</html>
Published on: Jul 13, 2024, 04:35 AM  
 

Comments

Add your comment