javascript - Invisible recaptcha是可见的

Question

我有一个不可见的 recaptcha，它可以工作，但对所有用户来说都是完全可见的。我的意思是:

我的控制台说:

Uncaught Error: Missing required parameters: sitekey
at new jl (VM19165 recaptcha__ru.js:575)
at new $Y (VM19165 recaptcha__ru.js:584)
at mt (VM19165 recaptcha__ru.js:599)
at VM19165 recaptcha__ru.js:590
at Array.forEach (<anonymous>)
at hE (VM19165 recaptcha__ru.js:590)
at rI (VM19165 recaptcha__ru.js:593)
at ib (VM19165 recaptcha__ru.js:585)
at VM19165 recaptcha__ru.js:600
at VM19165 recaptcha__ru.js:620

我的js代码是:

function onSubmit(token) {
alert('thanks ' + document.getElementById('fields[Email]').value);
}

function validate(event) {
event.preventDefault();
grecaptcha.execute();
}

function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}


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

而 html 是:

    <input type="text" id="fields[Email]" value="" name="fields[Email]" class="add_field" placeholder="Email" />
<div id='recaptcha' class="g-recaptcha" data-sitekey="6LcaXXXXXXXXXXXXXXXcTqa9o5k"  data-callback="onSubmit" data-size="invisible">
  </div>
</div>
</div>
<div class="col-bs">   
  <button type='submit' id='submit' class="sub-rassilka" >SUBMIT</button>
  </div>

有什么问题，我错过了什么？

UPD:我将 api 行更改为这一行，但在控制台中出现相同的错误并且 recapcha 仍然显示自己

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

Answer 1

当您通过此行获取 api 时:

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

您不会像这样传递您的站点 key :

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

引用:reCAPTCHA v3

您可以获得站点 key here

---

当你这样做时:

grecaptcha.execute()

您还需要传递站点 key ，例如:

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

source