10/13/2017

Invisible reCAPTCHA Beta for Discuz! 隱藏式驗證碼

參考來源
https://stackoverflow.com/questions/41079335/implement-the-new-invisible-recaptcha-from-google

 

原始代碼

<script type="text/javascript">
var onloadCallback = function() {
for (var i = 0; i < document.forms.length; ++i) {
var form = document.forms[i];
var holder = form.querySelector('.recaptcha-holder');
if (null === holder){
continue;
}

(function(frm){
var holderId = grecaptcha.render(holder,{
'sitekey': 'your_site_key',
'size': 'invisible',
'badge' : 'bottomright',
'callback' : function (token) {
HTMLFormElement.prototype.submit.call(frm);
}
});

frm.onsubmit = function (evt){
evt.preventDefault();
grecaptcha.execute(holderId);
};

})(form);
}
};
</script>

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


Closure Compiler 優化代碼

<script type="text/javascript">var onloadCallback=function(){for(var a=0;a<document.forms.length;++a){var b=document.forms[a],c=b.querySelector(".recaptcha-holder");null!==c&&function(a){var b=grecaptcha.render(c,{sitekey:"your_site_key",size:"invisible",badge:"bottomright",callback:function(b){HTMLFormElement.prototype.submit.call(a)}});a.onsubmit=function(a){a.preventDefault();grecaptcha.execute(b)}}(b)}};</script><script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>


your_site_key 請輸入您申請 Invisible reCAPTCHA 的 Site key
bottomright 是採用 reCAPTCHA 保護機制徵章的預設位置,選項:bottomright:右下、bottomleft:左下、inline:與按鈕一致
'sitekey': 'your_site_key',
'badge' : 'bottomright',

路徑:template/default/member/register.htm


<div id="layer_reg" class="bm_c">

下方添加
<div class="recaptcha-holder"></div>



</form>

下方添加

<script type="text/javascript">var onloadCallback=function(){for(var a=0;a<document.forms.length;++a){var b=document.forms[a],c=b.querySelector(".recaptcha-holder");null!==c&&function(a){var b=grecaptcha.render(c,{sitekey:"your_site_key",size:"invisible",badge:"bottomright",callback:function(b){HTMLFormElement.prototype.submit.call(a)}});a.onsubmit=function(a){a.preventDefault();grecaptcha.execute(b)}}(b)}};</script><script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>


適用版本 Discuz X3.2 R20160601

 

呈現的效果如圖



 

沒有留言:

張貼留言