前言
“访问过于频繁，请先完成验证”，相信大家对这句话应该不陌生。当我们访问一个网站过于频繁时，就会弹出这样的提示，甚至于让我们先通过滑动验证码。
开发过程
1、模拟当前为新闻列表。
2、前台接入KgCaptcha
<scriptsrc="captcha.js?appid=xxx"></script><scripttype="text/javascript">kg.captcha({ // 绑定弹窗按钮button: "#captchaButton", // 验证成功事务处理success: function (e) { // 验证成功，直接提交表单console.log(e); document.cookie="sNum=1"; document.cookie="sTime="+Math.round(newDate().getTime()/1000); document.getElementById('kgCaptchaToken').value=e['token'] form1.submit(); }, // 验证失败事务处理failure: function (e) { console.log(e); }, // 点击刷新按钮时触发refresh: function (e) { console.log(e); } </script><aid="captchaButton"style="display: none;">点击弹出验证窗口</a><formmethod="post"id="form1"name="form1"><inputtype="hidden"name="action"value="captcha"/><inputtype="hidden"name="kgCaptchaToken"id="kgCaptchaToken"value=""/></form>
3、要求
- 通过cookie监测当前页面访问，指定时间内访问次数超出，则弹出验证码，要求用户验证。
- 若为首次访问，弹出验证码，要求用户验证。
// 设置cookiewindow.onload=function() { // 当前时间varcTime=Math.round(newDate().getTime()/1000) // 当前cookie的访问次数varsNum=get_cookie2('sNum') // 当前cookie的上一次访问时间varsTime=get_cookie2('sTime') // 判断cookie是否设置if (sNum==undefined&&sTime==undefined) { document.getElementById('captchaButton').click() } else { // 判断访问次数和上一次访问时间if (parseInt(sTime)+10<=cTime&&sNum>9) { document.getElementById('captchaButton').click() } else { if (cTime-sTime<10) { document.cookie="sNum="+(parseInt(sNum)+1); document.cookie="sTime="+sTime; } else { document.cookie="sNum=1"; document.cookie="sTime="+cTime; } } } } // 获取cookie的方法functionget_cookie2(val) { vararr=document.cookie.split(';'); for(vari=0; i<arr.length; i++){ vararr2=arr[i].split('='); arr2[0] =arr2[0].replace(/\s*/g,""); if(arr2[0] ==val){ returnarr2[1] } } }
4、后端验证
header("Content-type:text/html;charset=utf-8"); // 后端验证if (isset($_POST) &&$_POST['action'] =='captcha') { include"./KgCaptchaSDK.php"; // 填写你的 AppId，在应用管理中获取$appId="xxx"; // 填写你的 AppSecret，在应用管理中获取$appSecret="xxx"; $request=newkgCaptcha($appId, $appSecret); // 填写应用服务域名，在应用管理中获取$request->appCdn="https://cdn.kgcaptcha.com"; // 前端验证成功后颁发的 token，有效期为两分钟$request->token=$_POST["kgCaptchaToken"]; // 当安全策略中的防控等级为3时必须填写$request->userId="kgCaptchaDemo"; // 请求超时时间，秒$request->connectTimeout=10; $requestResult=$request->sendRequest(); if ($requestResult->code===0) { // 验签成功逻辑处理echo"<script>alert('验证通过');</script>"; header('location: demo.php'); } else { // 验签失败逻辑处理echo"<script>alert('验证失败，错误代码：{$requestResult->code}， 错误信息：{$requestResult->msg}');</script>"; header('location: demo.php'); } }
最后
SDK开源地址：KgCaptcha (KgCaptcha) · GitHub，顺便做了一个演示：凯格行为验证码在线体验
