Google Invisible ReCaptcha并非隐身 [英] Google Invisible ReCaptcha not invisible

问题描述

我只是在提交表单后尝试让Google Invisible ReCaptcha工作。
我的问题是，ReCaptcha不是看不见的，看起来像是旧的重新出现了。我不明白为什么。我的网站密钥是无形的recaptcha。请帮助我。

I just try to get Google Invisible ReCaptcha to work after submitting a form. My problem is, the ReCaptcha is NOT invisible, it looks like the "old" recaptcha is popping up. I don't understand why. My site-key is for invisible recaptcha. Please help me.

首先我正在加载API：

First of all i'm loading the 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工作正常，回调加载，验证工作正常。 ......唯一的问题是，这个重新包装必须是不可见的，而不是：/

To make things clearer: This reCaptcha works fine, the callback loads, the verification works fine as well.... The only problem is, that this recaptcha must be invisibile, while it's not :/

推荐答案

我想你错过了captchaOptions中的徽章参数。

有3个可能的值：bottomright（默认值），bottomleft和 inline （可让您自定义recaptcha的css）。

I think you are missing the badge parameter in your "captchaOptions".
there are 3 possible values : bottomright (default), bottomleft and inline (which lets you customize the css of the recaptcha).

这篇关于Google Invisible ReCaptcha并非隐身的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！