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

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

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

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

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

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

但是recaptcha现在正在显示。

我想按照这些说明操作

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

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

这是我到目前为止：

1 – 在标签上显式调用recaptcha：

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

2 – 登录表格：

 
 
 
  
 
  
 Mot de passe oubliee? 
 
 
 
  
  

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

  $(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 }); });  

Answer 1

以下是我以前的做法。 删除head并查看代码段中的注释以获取更多详细信息。 我使用的函数可以异步添加脚本（ 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'); } });