Question

Google Invisible ReCaptchaにフォームを送信してもらうようにしてみましょう。 私の問題は、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がinvisibでなければならないことですそれはありませんがILE、：/

Answer 1

私はあなたの問題はあなたが明示的にrender（）メソッド

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

}を呼び出しているということだと思います。

あなたはそれが見えないようにしたい場合は、あなたがreCAPTCHAのスクリプトが呼び出しを実行し、divのクラス要素を探し、そこに結合するであろう、このカスタム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検証が呼び出されたときに戻る。

recaptcha検証を使用するにはgrecaptcha.execute（）;を呼び出します。

googledevページの例に従えば、かなり簡単です。

私は=助けたことを願っています）

Answer 2

私はあなたの「captchaOptions」でbadgeパラメータが不足していると思います。
bottomright（デフォルト）、bottomleft、inline（これにより、recaptchaのCSSをカスタマイズできます）の3つの値があります。