Google Invisible ReCaptcha не невидимый

Question

Я просто пытаюсь заставить Google Invisible ReCaptcha работать после отправки формы. Моя проблема в том, что ReCaptcha НЕ невидим, похоже, что "старая" recaptcha выскакивает. Я не понимаю почему. Мой сайт-ключ для невидимой рекапчи. Пожалуйста, помогите мне.

Прежде всего, я загружаю API:

<script src='https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad' async defer></script>

Моя форма выглядит так:

<form method="post" id="contact-form-face" class="clearfix" onsubmit="return false">
<input type="text" required name="name" value="name" onFocus="if (this.value == 'name') this.value = '';" onBlur="if (this.value == '') this.value = 'name';" />
<button type="submit" id="sendButton" data-size="invisible" class="g-recaptcha contact_btn" onclick="onSubmitBtnClick()" value="send" >send</button>
</form>

JS:

window.onScriptLoad = function () {
// this callback will be called by recapcha/api.js once its loaded. If we used
// render=explicit as param in script src, then we can explicitly render reCaptcha at this point

// element to "render" invisible captcha in
var htmlEl = document.querySelector('.g-recaptcha');

// option to captcha
var captchaOptions = {
    sitekey: 'XXXXXXX',
    size: 'invisible',
    // tell reCaptcha which callback to notify when user is successfully verified.
    // if this value is string, then it must be name of function accessible via window['nameOfFunc'],
    // and passing string is equivalent to specifying data-callback='nameOfFunc', but it can be
    // reference to an actual function
    callback: window.onUserVerified
};

// Only for "invisible" type. if true, will read value from html-element's data-* attribute if its not passed via captchaOptions
var inheritFromDataAttr = true;

console.log("render now!");
// now render
recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);
};

// this is assigned from "data-callback" or render()'s "options.callback"
window.onUserVerified = function (token) {
alert('User Is verified');
console.log('token=', token);

};

// click handler for form's submit button
function onSubmitBtnClick () {
var token = window.grecaptcha.getResponse(recaptchaId);

// if no token, mean user is not validated yet
if (!token) {
    // trigger validation
    window.grecaptcha.execute(recaptchaId);
    return;
}

var xhrData = {
    'g-recaptcha-response': token
    // more ajax body/data here
};

};

Чтобы прояснить ситуацию: эта reCaptcha работает нормально, обратный вызов загружается, проверка также работает нормально... Единственная проблема в том, что эта recaptcha должна быть невидимой, хотя это не так:/

Answer 1

Я думаю, что вы пропустите параметр значка в ваших "captchaOptions".
Есть 3 возможных значения: bottomright (по умолчанию), bottomleft и inline (что позволяет настроить CSS рекаптчи).

Answer 2

Я думаю, что ваша проблема в том, что вы явно вызываете метод render()

recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);

};

если вы хотите, чтобы он был невидимым, вы должны включить этот пользовательский DIV

    <div class="g-recaptcha"
      data-sitekey="your_site_key"
      data-callback="onSubmit"
      data-size="invisible">
    </div>

https://developers.google.com/recaptcha/docs/invisible

Сценарий recaptcha будет искать элемент класса div и связывать его там, а затем выполнять обратный вызов при вызове проверки recaptcha.

чтобы вызвать проверку recaptcha, используйте grecaptcha.execute();

следуйте примеру на странице googledev, это довольно просто.

Надеюсь что помогло =)

Answer 3

Что касается документации по API JavaScript, https://developers.google.com/recaptcha/docs/invisible Вам необходимо добавить div с идентификатором для отображения, атрибуты class и data не требуются в элементе button, когда Вы отображаете капчи с помощью JavaScript.

Ваш HTML должен быть:

<form method="post" id="contact-form-face" class="clearfix"   
onsubmit="return false">
    <input type="text" required name="name" value="name" onFocus="if 
    (this.value == 'name') this.value = '';" onBlur="if (this.value == 
    '') this.value = 'name';" />
    <div id="recaptcha"></div>
    <button type="submit" id="sendButton" class="contact_btn" 
    onclick="onSubmitBtnClick()"value="send">send</button>
</form>

И Ваш JS должен быть обновлен до:

// element to "render" invisible captcha in
var htmlEl = 'recaptcha'