recaptcha 2.0 - 如何仅在 n 次失败尝试/限制后显示？答案

【问题标题】：recaptcha 2.0 - how to display only after n failed attempts/throttling?recaptcha 2.0 - 如何仅在 n 次失败尝试/限制后显示？
【发布时间】：2015-07-28 07:00:31
【问题描述】：

我环顾四周，没有看到任何特定于 recaptcha 2.0 的内容，所以让我们看看我是否可以得到一些帮助。

我正在设置一个包含多个表单的注册/登录页面。为了提高安全性，我正在安装 recaptcha 2.0。

它适用于单个表单以及在加载时呈现。

对于登录表单，我只想在尝试/限制失败后部署 recaptcha 2.0。

看来我已经在服务器端进行了正确的设置，并且我得到了关于登录延迟和重新验证部署的正确响应。

但现在正在显示验证码。

我正在尝试关注these instructions

我已经做了几次尝试，包括： -将recaptcha持有者设置为display:none并且仅在触发时显示 - 仅在触发时附加 recaptcha 脚本。

我认为问题出在 head 标签上的 recaptcha 配置上，但我看不到如何将其配置为由 ajax 调用触发。

这是我目前所拥有的：

1 - 在<head> 标签上显式调用recaptcha：

   <script type="text/javascript">          
  var widgetId1;
  var widgetId2;
  var onloadCallback = function() {
    // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
    // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
    widgetId1 = grecaptcha.render('captcha_signup', {
      'sitekey' : 'mysitekey'
    });
    widgetId2 = grecaptcha.render('captcha_signin', {
      'sitekey' : 'mysitekey'
    });
  };
</script>

2 - 登录表单：

<div id="login">

    <form action="" name="login_form" method="post" id="login_form" >

<div class="contact">
<input id="focus2" data-validation="email" data-validation-error-msg="SVP, tapez un address mail valide" class="inp" name="email" size="35" type="text" placeholder="Votre e-mail" />
</div>  

<div class="contact">
<input id="pass_in" type="password" name="pass_confirmation" data-validation="length" data-validation-length="8-15" data-validation-error-msg="SVP minimum 8 caracteres" placeholder="Votre mot de passe" class="inp" size="15" />
</div>
<span id="a_recovery">Mot de passe oubliee?</span>
<div id="captcha_holder"> <div id="captcha_signin" style="display:none"></div>       </div>

<div class="form_sub">
<input class="sub inp" name="submit" type="submit" value="Valider" />
</div>

</form>

3 - 提交/处理错误/部署recaptcha的ajax调用

<script>
$(document).ready(function(){
$('#login_form').submit(function(e) { 
var str = $("#login_form").serialize();
     $.ajax({
        url: "used_dataentry.php",
        type: "POST",
    dataType:"text",
        data:'code='+'login'+'&'+str,
        success: function (data) {
        var msg0 = data.substring(0, 4);
        var msg1 = data.substring(4);
        if ( msg0 == 'msg4' || msg0 == 'msg5') { //this to show recaptcha
                    alert(msg0);

$("#captcha_signin").show();
        }
        else{ alert(msg1)};
        }
});
             e.preventDefault(); //STOP default action
            });
            });

 </script>

【问题讨论】：

标签： jquery ajax recaptcha

【解决方案1】：

这是我以前的做法。删除 head 中的内容，并查看 sn-p 中的 cmets 以获取更多详细信息。我使用了一个可以异步添加脚本的函数（GetScript 或使用 jQuery。）还要注意您需要的要点以及一些变量 WIN = window 和 KEY 是您的 api 密钥。让我知道它对你有用。

Captcha = function (context) {
    /**
     * @author (@colecmc)
     * @summary google reCaptcha2.0 custom implementation
     * @requires jQuery, PubSub @see https://gist.github.com/safe1981/2026701
     * @returns {object}
     * @param {object} context - jQuery object
     * @see https://developers.google.com/recaptcha/docs/display
     * @example Captcha(this); // Invoke from jQuery load call back
     */

    'use strict';
    var container, id, clientId;

    return {
        reCaptchaVerify: function (response) {
            /** @param {string} response */
            if (response === container.querySelector('.g-recaptcha-response').value) {
                PubSub.publish('verify-response', {
                    successful: response
                });
            }
        },

        reCaptchaCallback: function () {
            var parentEl;

            container = $('[id*="reCaptcha20_"]', context)[0]; /* recaptcha ID must be unique. Prefix them with 'reCaptcha20_' */

            if (container instanceof HTMLElement) {
                id = container.id;
                parentEl = container.parentElement;

                parentEl.removeChild(container); /* prevents rendering duplicates */
                parentEl.appendChild(container); /* prevents rendering duplicates */

                clientId = grecaptcha.render(id, {
                    'sitekey': KEY, /* whatever your key is */
                    'callback': xReCaptchaVerify,
                    'expired-callback': xReCaptchaExpired
                });
            }
            else {
                throw new Error(container);
            }
        },

        reCaptchaExpired: function () {
            PubSub.publish('verify-response', {
                successful: -1
            });
        },

        globalize: function () {
            /** Make it Global so google has access */
            WIN.xReCaptchaCallback = this.reCaptchaCallback;
            WIN.xReCaptchaVerify = this.reCaptchaVerify;
            WIN.xReCaptchaExpired = this.reCaptchaExpired;
            GetScript('', 'https://www.google.com/recaptcha/api.js?onload=xReCaptchaCallback&render=explicit');
        }
    };
};

/** Call function in your ajax **/

/* instead of $("#captcha_signin").show(); */ 
var captcha = new Captcha(this); /** @this {object} - $('#login_form') */



/** Verify the response **/

PubSub.subscribe('verify-response',function (name, response) {
        /**
         * listen for successful captcha response and proceed with submission
         * @param {object} - response.successful should be a looooooong string
         */
        if (typeof response.successful === 'string') {
            /* Pass */
        } else {
            /* Fail */
            throw new Error(response.successful + ' - should be a string');
        }
    });

【讨论】：