ThinkPHP5使用极验验证码
ThinkPHP5使用极验验证码
第一步：将极验的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)
}
});
});
来源https://www.cnblogs.com/ccdr/p/14824529.html