Question

我环顾四周，并没有看到任何具体的recaptcha 2.0，所以让我们看看我是否可以得到一些帮助。

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

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

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

似乎我已经在服务器端正确设置了，我得到了正确的登录延迟和重新部署部署的响应。

但是recaptcha现在正在显示。

我正在尝试关注these instructions

我已经做了几次尝试，包括： - 将recaptcha holder设置为display:none并仅在触发时显示 - 只在触发时附加重新编写脚本。

我认为问题出在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 - ajax要求提交/处理错误/部署recaptcha

<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>

Answer 1

以前是我以前做过的。删除head中的内容，并查看代码段中的注释以获取更多详细信息。我使用的函数可以异步添加脚本（GetScript或使用jQuery）。）另请注意您需要的要点以及一些变量WIN = window和KEY是您的api密钥。让我知道它适合你。

＆＃13;

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');
        }
    });

＆＃13;

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

1 个答案: