Invisible recaptcha是可见的

Invisible recaptcha is visible

我有一个不可见的验证码,它可以正常工作,但对所有用户来说都是完全可见的。我的意思是:

我的控制台显示:

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>

当您使用此行获得 api 时:

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

您没有像这样传递站点密钥:

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

参考:reCAPTCHA v3

您可以获得站点密钥here


当你这样做时:

grecaptcha.execute()

您也需要传递站点密钥,例如:

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

source