前言
1. 引入类库
首先前台需要引入jquery与极验库js
<script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="//static.geetest.com/static/tools/gt.js"></script>
2. 标签head内加入css
<style>
body {
margin: 50px 0;
text-align: center;
font-family: "PingFangSC-Regular", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
}
.inp {
border: 1px solid #cccccc;
border-radius: 2px;
padding: 0 10px;
width: 278px;
height: 40px;
font-size: 18px;
}
.btn {
display: inline-block;
box-sizing: border-box;
border: 1px solid #cccccc;
border-radius: 2px;
width: 100px;
height: 40px;
line-height: 40px;
font-size: 16px;
color: #666;
cursor: pointer;
background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
}
.btn:hover {
background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%)
}
#captcha {
width: 300px;
display: inline-block;
}
label {
vertical-align: top;
display: inline-block;
width: 80px;
text-align: right;
}
#wait {
text-align: left;
color: #666;
margin: 0;
}
</style>
3. 按钮定义 id="btn"
<input type="button" id="btn" class="nya-btn" style="width:45%" value="按钮">
4. body尾部加入demo js
<script>
var handler = function (captchaObj) {
captchaObj.onReady(function () {
$("#wait").hide();
}).onSuccess(function () {
var result = captchaObj.getValidate();
if (!result) {
return alert('请完成验证');
}
$.ajax({
url: 'gt/validate-slide',//二次验证接口,见SDK中/web/VerifyLoginServlet.php,在验证成功处加入自己要执行的代码
type: 'POST',
dataType: 'json',//返回的格式
data: {
username: $('#username2').val(),
password: $('#password2').val(),
geetest_challenge: result.geetest_challenge,//极验验证参数,不能少
geetest_validate: result.geetest_validate,//极验验证参数,不能少
geetest_seccode: result.geetest_seccode//极验验证参数,不能少
},
success: function (data) {//ajax回调
if (data.status === 'success') {
setTimeout(function () {
alert('登录成功');//提示
}, 1500);
} else if (data.status === 'fail') {
setTimeout(function () {
alert('登录失败,请完成验证');//提示
captchaObj.reset();
}, 1500);
}
}
});
});
$('#btn').click(function () {
// 调用之前先通过前端表单校验
captchaObj.verify();
});
};
$.ajax({
url: "gt/register-slide?t=" + (new Date()).getTime(), // 一次验证接口,见SDK中/web/StartCaptchaServlet.php,加随机数防止缓存
type: "get",
dataType: "json",
success: function (data) {
// 调用 initGeetest 进行初始化
// 参数1:配置参数
// 参数2:回调,回调的第一个参数验证码对象,之后可以使用它调用相应的接口
initGeetest({
// 以下 4 个配置参数为必须,不能缺少
gt: data.gt,
challenge: data.challenge,
offline: !data.success, // 表示用户后台检测极验服务器是否宕机
new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
product: "bind", // 产品形式,包括:float,popup
width: "300px",
https: true
}, handler);
}
});
</script>
以上就是我看极验验证官网SDK与demo地址的理解,如果看不懂可以先看看这一篇文章
前言极验验证官网项目地址官方文档如何使用1.引入类库首先前台需要引入jquery与极验库js<script ...
理解后粗略实现了一下功能,地址:http://qq.qqbig.cn/
可以看看这个网址的代码,js没有加密的。
正文到此结束