admin 管理员组

文章数量: 1086019

I managed to get ReCaptcha3 working when including it like this:

<script src=".js?render=mykey"></script>
<script>
  grecaptcha.ready(function() {
    grecaptcha.execute('mykey', {action: 'homepage'}).then(function(token) {
       document.getElementById("googletoken").value= token;
    });
</script>

However, in the docs I found the following note:

Note: reCAPTCHA tokens expire after two minutes. If you're protecting an action with reCAPTCHA, make sure to call execute when the user takes the action.

Since I use the reCAPTCHA on a contact form, its likely that a user will take more then two minutes to write something.

Therefore, I tried to execute the key on submit (the alerts are only for testing):

<script src=".js?render=mykey"></script>
<script>
  grecaptcha.ready(function() {
      document.getElementById('contactform').addEventListener("submit", function(event) {
        alert('hi');
        grecaptcha.execute('mykey', {action: 'homepage'}).then(function(token) {
           alert('Iam invisible');
           document.getElementById("googletoken").value= token;
        });
      }, false);
  });
</script>

Now "Hi" is promted, but "Iam invisible" won't show up. Thus, it I get a missing-input-response on the server side. Why is then not fired inside addEventListener?

I managed to get ReCaptcha3 working when including it like this:

<script src="https://www.google./recaptcha/api.js?render=mykey"></script>
<script>
  grecaptcha.ready(function() {
    grecaptcha.execute('mykey', {action: 'homepage'}).then(function(token) {
       document.getElementById("googletoken").value= token;
    });
</script>

However, in the docs I found the following note:

Note: reCAPTCHA tokens expire after two minutes. If you're protecting an action with reCAPTCHA, make sure to call execute when the user takes the action.

Since I use the reCAPTCHA on a contact form, its likely that a user will take more then two minutes to write something.

Therefore, I tried to execute the key on submit (the alerts are only for testing):

<script src="https://www.google./recaptcha/api.js?render=mykey"></script>
<script>
  grecaptcha.ready(function() {
      document.getElementById('contactform').addEventListener("submit", function(event) {
        alert('hi');
        grecaptcha.execute('mykey', {action: 'homepage'}).then(function(token) {
           alert('Iam invisible');
           document.getElementById("googletoken").value= token;
        });
      }, false);
  });
</script>

Now "Hi" is promted, but "Iam invisible" won't show up. Thus, it I get a missing-input-response on the server side. Why is then not fired inside addEventListener?

  • javascript
  • recaptcha-v3
Share Improve this question asked Feb 4, 2020 at 23:57 AdamAdam 29.2k27 gold badges184 silver badges273 bronze badges 2
  • what are say your console log? is there a call to google? Do you set your key in "mykey"? – db1975 Commented Feb 5, 2020 at 0:02
  • @db1975 it seems that grecaptcha.execute is not executed and the form is submitted. I have set the key properly, the first top version is working as expected. – Adam Commented Feb 5, 2020 at 0:04
Add a ment  | 

1 Answer 1

Reset to default 6

The problem is that the form is submitted before the async call grecaptcha.execute is plete. To fix the issue, one need to submit it manually:

<script src="https://www.google./recaptcha/api.js?render=mykey"></script>
<script>
  grecaptcha.ready(function() {
      document.getElementById('contactform').addEventListener("submit", function(event) {

        event.preventDefault();

        grecaptcha.execute('mykey', {action: 'homepage'}).then(function(token) {

           document.getElementById("googletoken").value= token; 
           document.getElementById('contactform').submit();
        });

      }, false);

  });
</script>

本文标签： javascriptReCaptcha3 How to call execute when user takes the actionStack Overflow

版权声明：本文标题：javascript - ReCaptcha3: How to call execute when user takes the action? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744086440a2531217.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。