个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 05:41:50 25 4
gpt4 key购买 nike

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

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

它可以很好地处理单一表单以及在加载时呈现。

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

看来我已经在服务器端正确设置了东西，并且我得到了登录延迟和 recaptcha 部署的正确响应。

但是现在正在显示验证码。

我正在尝试关注these instructions

我已经做了多次尝试，包括:- 将验证码持有人设置为 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>

最佳答案

这是我之前的做法。删除 head 中的内容并查看代码片段中的注释以获取更多详细信息。我使用一个可以异步添加脚本的函数(GetScript 或使用 jQuery。)另请注意您需要的要点以及一些变量 WIN = window 和 KEY 是您的 api key 。让我知道这对你有用。

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

关于jquery - recaptcha 2.0 - 如何仅在 n 次失败尝试/限制后显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30274985/

25 4 0
文章推荐： Javascript 全局变量只能在应用程序运行后访问
文章推荐： jquery - XirSys $.ajax() 方法返回状态 400，错误 : Could not validate application
文章推荐： python - Libsvm 和 Python : Precomputed Kernels are using my point id as a normal feature?
文章推荐： php - Ajax响应重复循环两次以显示数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com