wecenter自3.x后加入了极验验证加大了网站的登录、注册安全,也可以防止机器人灌水。
但是不是所有的页面都有开启极验。所以这里提供下开启的方法。
开启的方法主要有三步。
第一步:加载极验验证的js和css
<script type="text/javascript" src="http://www.xcat.cn/static/js/slide_captcha/gt.js"></script>
.geetest_radar_tip_content{ position: initial !important; }
第二步: 脚本加载
<?php if ($this->human_valid) { ?> <script> var handlerEmbed = function (captchaObj) { $('#publish_submit').click(function(){ var validate = captchaObj.getValidate(); if (!validate) { AWS.alert("请先完成验证"); return false; } else{ AWS.ajax_post($('#question_form')); captchaObj.reset(); // 调用该接口进行重置 return false; } }); // 将验证码加到id为captcha的元素里,同时会有三个input的值:geetest_challenge, geetest_validate, geetest_seccode captchaObj.appendTo(".embed-captcha"); captchaObj.onReady(function () { $(".wait").css('display','none'); }); }; $.ajax({ // 获取id,challenge,success(是否启用failback) url: G_BASE_URL+ "/account/slide_captcha/?t=" + (new Date()).getTime()+"&client_type='web'", // 加随机数防止缓存 type: "get", dataType: "json", success: function (data) { var dataObj = eval('(' + data.rsm + ')'); // 使用initGeetest接口 // 参数1:配置参数 // 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件 initGeetest({ gt: dataObj.gt, challenge: dataObj.challenge, new_captcha: dataObj.new_captcha, offline: !dataObj.success, // 表示用户后台检测极验服务器是否宕机,一般不需要关注 product: "embed", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效 width: '100%' // 设置按钮宽度, 与父元素宽度一致 }, handlerEmbed); } }); </script> <?php } ?>
第四部:控件代码
<?php if ($this->human_valid) { ?> <div class="aw-auth-img clearfix"> <div class="embed-captcha pull-right" style="width: 260px;"></div> <p class="wait pull-right">正在加载验证码......</p> <!-- <em class="auth-img pull-right"><img src="" onclick="this.src = G_BASE_URL + '/account/captcha/' + Math.floor(Math.random() * 10000);" id="captcha"/></em> <input class="pull-right form-control" type="text" name="seccode_verify" placeholder="验证码"/> --> </div> <?php } ?>
第五步:后台验证:
if(!$this->model('tools')->geetest($_POST)){ H::ajax_json_output(AWS_APP::RSM(null, -1, AWS_APP::lang()->_t('验证码错误'))); }
就可以使用了