第一步:将极验的SDK包放入TP框架的extend目录(使用SDK包请联系作者)
第二步:在框架的某一个控制器下,自定义方法完成获取验证码的操作
//验证码
public function getGtCode(){
//引入第三方文件的方式
Loader::import('jiyan.web.StartCaptchaServlet');
//实例化类文件
$obj = new \StartCaptchaServlet();
//获取验证码数据内容
$res = $obj->getData();
//输出内容即可
echo $res;
}
第三步:在前端页面,将CSS样式放入头文件中
<style>
#embed-captcha {
width: 300px;
padding-left: 0.8em;
}
.show {
text-align: center;
display: block;
}
.hide {
display: none;
}
#notice {
color: red;
}
.changepwd {
margin-left: 150px;
}
</style>
第四步:引入jQuery和极验的JS文件,但是要记得,jQuery文件必须在极验文件的前边
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="__STATIC__/gt/gt.js"></script>
(极验的文件可以去SDK中找到,放在public目录的static目录下就可以了)
第五步:在页面中嵌入HTML标签
<!--行为验证开始-->
<div id="embed-captcha"></div>
<p id="wait" class="show">正在加载验证码......</p>
<p id="notice" class="hide">请先完成验证</p>
<!--行为验证结束-->
第六步:JS内容如下,当然个别地方需要进行修改
var handlerEmbed = function (captchaObj) {
//给按钮点击事件
$(".sui-btn").click(function () {
//获取账号密码(自行更改取值)
var uname = $("#uname").val();
var upwd = $("#upwd").val();
//非空验证
if (uname == "") {
alert("用户名不能为空");
return false;
}
if (upwd == "") {
alert("密码不能为空");
return false;
}
//智能验证
var validate = captchaObj.getValidate();
if (!validate) {
$("#notice")[0].className = "show";
setTimeout(function () {
$("#notice")[0].className = "hide";
}, 2000);
return false;
}
//请求登录接口(自行更改ajax内容)
$.ajax({
url:"{:url('Login/login')}",
type:"post",
data:{uname:uname,upwd:upwd},
dataType:'json',
success:function(e){
if(e.code!=0){
alert(e.msg);
return false;
}
location.href="http://www.tpshop.com/index.php/home/index/index.html"
}
})
});
// 将验证码加到id为captcha的元素里,同时会有三个input的值:geetest_challenge, geetest_validate, geetest_seccode
captchaObj.appendTo("#embed-captcha");//将极验组件与页面元素相关联
captchaObj.onReady(function () {
$("#wait")[0].className = "hide";//初始化操作处理p标签
});
// 更多接口参考:http://www.geetest.com/install/sections/idx-client-sdk.html
};
//页面刚刚加载的时候请求极验接口(只需要更改接口地址就可以了)
$(document).ready(function(){
$.ajax({
// 获取id,challenge,success(是否启用failback)
url: "{:url('Login/getGtCode')}?t=" + (new Date()).getTime(), // 加随机数防止缓存
type: "get",
dataType: "json",
success: function (data) {
// 使用initGeetest接口
// 参数1:配置参数
// 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件
initGeetest({
gt: data.gt,
challenge: data.challenge,
new_captcha: data.new_captcha,
product: "embed", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效
offline: !data.success // 表示用户后台检测极验服务器是否宕机,一般不需要关注
// 更多配置参数请参见:http://www.geetest.com/install/sections/);
},handlerEmbed)
}
});
});