Loading... ## 前言 [极验验证官网][1] [SDK地址][2] [官方文档][3] [本次demo地址][4] ## 实现步骤 **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地址的理解，如果看不懂可以先看看这一篇文章 <div class="preview"> <div class="post-inser post box-shadow-wrap-normal"> <a href="https://www.blogbig.cn/archives/geetest.html" target="_blank" class="post_inser_a no-external-link no-underline-link"> <div class="inner-image bg" style="background-image: url(https://image.blogbig.cn/2019/12/26/1577345615.png);background-size: cover;"></div> <div class="inner-content" > <p class="inser-title">网站对接极验验证过程详解</p> <div class="inster-summary text-muted"> 前言极验验证官网项目地址官方文档如何使用1.引入类库首先前台需要引入jquery与极验库js<script ... </div> </div> </a> <!-- .inner-content #####--> </div> <!-- .post-inser ####--> </div> 理解后粗略实现了一下功能，地址：[http://qq.qqbig.cn/][5] 可以看看这个网址的代码，js没有加密的。 [1]: https://www.blogbig.cn/go/thILmD74/ [2]: https://www.blogbig.cn/go/RIttSZfU/ [3]: https://www.blogbig.cn/go/QNT5dgpt/ [4]: https://www.blogbig.cn/go/nTGSORKe/ [5]: http://qq.qqbig.cn/ 正文到此结束 最后修改：2021 年 01 月 15 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 0 如果觉得我的文章对你有用，请随意赞赏
