验证码 javascript-网站开发验证码反机器人策略
最近，我们的一个客户网站一直在处理大量注册其电子邮件通讯的恶意机器人。 处理机器人流量有几种常见的策略：
由于机器人的复杂性和体积，我们决定该网站的最佳解决方案是使用验证码系统。 但是什么验证码系统呢？ 验证码通常涉及向用户显示单词的图像验证码 javascript，用户必须键入该单词的图像。 通常，图像会以计算机难以识别的方式扭曲。
不幸的是，我们早已达到了机器人在这款游戏中比人类更好的地步，因此我们转向了 Microsoft 的 NoCaptcha reCAPTCHA。
对于大多数用户来说，NoCaptcha 验证码很简单，用户单击一个复选框。
Google 的验证码使用 IP 地址、cookie 和击键来识别用户是机器人。 还有其他专有策略，但微软有什么动机去发布这些策略……因为它可以轻松破解验证码。
如果 Microsoft 无法通过即时行为告诉我们用户是否是机器人，有时用户需要完成一个简单的匹配测验，如下所示：
让我们来构建它吧！
先决条件
我们正在使用一个标准的工作船网站，并且可以通过前端的 JavaScript 模块访问它。 验证码很灵活，因此这只是一种可能的实现。
您还需要向 Microsoft 注册您的网站以获得网站密钥和公钥。 测试站点密钥和秘密密钥可在此处进行开发。
发展
首先，我们需要以 HTML 形式显示 reCAPTCHA 小部件：
标记
var
recaptcha;varonloadCallback=function(response){recaptcha=grecaptcha.render('recaptcha-widget',{'sitekey':'sitekey_goes_here','theme':'light','callback':recaptchaCallback});};
发生的事情有很多，让我们来分解一下。
第一行是我们的 ReCaptcha 小部件的 div 容器，然后它将从 Microsoft 脚本异步加载必要的验证码数据，如图所示。 最后，我们有一个实际渲染 reCAPTCHA 小部件的脚本。 我们选择将哪个 div 小部件插入到“reCAPTCHA 小部件”中。 我们还包括必要的验证码站点密钥、样式选项（浅色或深色）以及用户完成验证码时将执行的回调函数。
现在ReCaptcha可以正常显示了，我们在JavaScript模块中创建一个回调函数：
JAVASCRIPT的window.recaptchaCallback=function(recaptchaResponse){};
在呈现 reCAPTCHA 小部件之前，必须初始化该函数，因为回调函数必须存在才能被 ReCaptcha 囚禁。 另外，您可以看到该函数属于其中的一个“窗口”，因此可以全局访问它。
调用回调函数时，会传递一个变量（recaptchaResponse），该变量是用户完成验证码时生成的唯一令牌。 为了验证这个token是否有效，我们需要调用Microsoft API进行确认。 让我们通过这篇文章需要一个插件控制器：
JAVASCRIPT的window.recaptchaCallback=function(recaptchaResponse){$.post('/',{action:'recaptchas/verify',response:recaptchaResponse},function(data,textStatus,jqXHR){});};
如果您想知道为什么我们要发布“/”验证码 javascript，那是因为我们的路线实际上是通过操作变量传递的。 这是一种特定于 craft 的方法，可在 javascript 和 craft 插件中的控制器之间传递信息。 actionVerify 函数现在将在 Recaptchas 控制器中执行。
在我们的插件控制器中，我们发出一个简单的发布请求，发送所有必要的信息：
PHPpublicfunctionactionVerify(){$recaptchaResponse=craft()->request->getParam('response');$secret='google_recaptcha_secret_key';$url='https://www.google.com/recaptcha/api/siteverify';$fields=array('secret'=>$secret,'response'=>$recaptchaResponse);$fields_string=http_build_query($fields);$ch=curl_init();curl_setopt($ch,CURLOPT_URL,$url);curl_setopt($ch,CURLOPT_POST,count($fields));curl_setopt($ch,CURLOPT_POSTFIELDS,$fields_string);curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);$result=curl_exec($ch);curl_close($ch);$json=json_decode($result,true);return$this->returnJson(array('success'=>$json['success']));}
这很简单。 我们正在改进对 Microsoft 的 reCAPTCHA API 的 POST 请求。 我们有两个参数，我们网站的密钥和验证码生成的 recaptchaResponse。 如果 recaptchaResponse 有效，那么发布的响应将是一个布尔值。 现在，让我们解析模块旁边的响应：
JAVASCRIPT的window.recaptchaCallback=function(recaptchaResponse){$.post('/',{action:'recaptchas/verify',response:recaptchaResponse},function(data,textStatus,jqXHR){if(data['success']){_submitEmailToList($form);}});};
如果响应成功，我们现在调用一个函数来发送电子邮件通讯。 添加一个重置验证码的方法可能也是一个好主意，以防用户需要多次提交表单。 我们只需在 if 语句后添加一个简单的函数：
JAVASCRIPT的grecaptcha.reset(recaptcha);
观看后
Google 的 NoCaptcha 的 reCAPTCHA 是一个过滤掉令人讨厌的机器人的巧妙工具。 我最大的抱怨是他们缺乏 ReCaptcha 框架样式选项。 有两种不同的规格选择和两种颜色选择。 除此之外，有没有办法改变验证码的外观。 幸运的是，这个包很小，可以随大多数网站设计的需要而摇摆。 但总体而言，实施并不太棘手，并且在网站上运行得很好。
本页面内容由塔登网络科技有限公司通过互联网收集整理。 所有信息仅供用户学习和参考。 提供相关证据，工作人员将在5个工作日内与您联系。 一经核实，侵权内容将立即删除。 本文链接：
