1 year ago

#249619

test-img

geuxor

JS - recaptcha v3 - how to verify captcha and submit form data to another file

I'm just starting with JS and like to implement a form that verifies for robots/humans by using captcha v3 on the client side and if verification succeeds the data should be submitted to another file.

This is what I got so far. I know it's wrong, but unsure what the correct logic is. Hope someone can shed a light. Thx!

<script src="https://www.google.com/recaptcha/api.js?render=6Lc3UZkeAAAAAMt6wcA-bYjLenFZPGv3K5AqfvuQ"></script>
<script type="text/javascript" src="/js/libs/jquery-1.11.3.min.js"></script>


<section class="cc-column-component regular-grid">
    <form id="bank-form" class="form clear one-full cf-contact-form" action="?" method="POST" data-tracking="contact_sales"> 
      <div>                         
              <label class="label mandatory bank-color bank-label" for="firstName">First Name</label>
              <input id="firstName" value="Pepe" type="text" class="one-full bank-color-grey bank-input" name="firstName" placeholder="First Name" autocomplete="off" data-validate="true" data-type="text" data-min="3" value="<?php isset($this) ? print $this->getFirstName() : print ''; ?>">
              <br/>
              <label class="label mandatory bank-color bank-label" for="lastName">Last Name</label>
              <input id="lastName" value="Chanches" type="text" class="one-full bank-color-grey bank-input" name="lastName" placeholder="Last Name" autocomplete="off" data-validate="true" data-type="text" data-min="3" value="<?php isset($this) ? print $this->getLastName() : print ''; ?>">
              <br/>
              <label class="label mandatory bank-color bank-label" for="email">Email</label>
              <input value="asdf@asdf.com" id="email" type="text" class="one-full bank-color-grey bank-input" name="email" placeholder="Email"  autocomplete="off" data-validate="true" data-type="email" value="<?php isset($this) ? print $this->getEmail() : print ''; ?>">
              <br/>
      </div>
        <div class="row inline one-full">
        <br/>
                <!-- <div class="g-recatpcha" data-sitekey="6Lc3UZkeAAAAAMt6wcA-bYjLenFZPGv3K5AqfvuQ"></div> -->
                <button type="submit"
                        id="form-submit"
                        value="submit"
                        >
                        <a>Submit form</a>
                </button>

            <div class="field inline one-full">
            <br/>
                    </div>
            <!-- <input type="hidden" name="recaptcha_response" id="recaptchaResponse"> -->
        </div>
    </form>
</section>

<script>
    $('#bank-form').submit(function(event) {
        console.log('subtmitting');
        event.preventDefault();
        grecaptcha.ready(function() {
            grecaptcha.execute('6Lc3UZkeAAAAAMt6wcA-bYjLenFZPGv3K5AqfvuQ', {action: 'submit'}).then(function(token) {
                console.log('🚀 ~ grecaptcha.execute ~ token', token)
                $('#bank-form').prepend('<input type="hidden" name="token" value="' + token + '">');
                $('#bank-form').prepend('<input type="hidden" name="action" value="submit">');
                // $('#bank-form').unbind('submit').submit();
            });;
        });
        CheckCaptcha(token)
  });
 

  
  function CheckCaptcha(token) {
             var token = $("#token").val()
            console.log('🚀 ~ token', token)
            var action = $("#action").val()
            var RECAPTCHA_V3_SECRET_KEY = "6Lc3UZkeAAAAAIG8bVZDpkheOxM56AiMnIKYRd6z"
            $.ajax({
                type: "POST",
                url: "http://www.google.com/recaptcha/api/siteverify",
                data: JSON.stringify([{secret: RECAPTCHA_V3_SECRET_KEY }, {response : token }]),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    // __doPostBack('form-submit', '');
                    if(response["score"] >= 0.7) {
                      console.log('Passed the token successfully');
                    }
                },
                failure: function (response) {
                  // set error message and redirect back to form?
                  console.log('Robot submit', response);
                }
              })
       return false;
    }

    </script>

javascript

recaptcha

form-data

verification

recaptcha-v3

0 Answers

Your Answer

Accepted video resources