Loading... ## 前言 [极验验证官网][1] [项目地址][2] [官方文档][3] ## 如何使用 **1.引入类库** 首先前台需要引入jquery与极验库js ```html <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://static.geetest.com/static/tools/gt.js"></script> ``` **2.配置前端** 首先查看下载的SDK文件： /static/login.html 代码加入相应位置： ```html <div id="embed-captcha"></div> <p id="wait" class="show">正在加载验证码......</p> <p id="notice" class="hide">请先完成验证</p> ``` 代码加入head内： ```css <style> body { margin: 0px 0; } .inp { border: 1px solid gray; padding: 0 10px; width: 200px; height: 30px; font-size: 18px; } .btn { border: 1px solid gray; width: 300px; height: 30px; font-size: 18px; cursor: pointer; } #embed-captcha { width: 300px; margin: 0 auto; } .show { display: block; } .hide { display: none; } #notice { color: red; } </style> ``` **3.服务器端部署（PHP）** 我们在SDK找到路径: `/web/StartCaptchaServlet.php` 文件内容： ```php <?php /** * 使用Get的方式返回：challenge和capthca_id 此方式以实现前后端完全分离的开发模式 专门实现failback * @author Tanxu */ //error_reporting(0); require_once dirname(dirname(__FILE__)) . '/lib/class.geetestlib.php';// 引入文件 require_once dirname(dirname(__FILE__)) . '/config/config.php';// 引入文件 $GtSdk = new GeetestLib(CAPTCHA_ID, PRIVATE_KEY);// 实例化，实例化的参数在config中配置，分别是：验证ID 和 验证Key session_start(); $data = array( "user_id" => "test", # 网站用户id "client_type" => "web", #web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式 "ip_address" => "127.0.0.1" # 请在此处传输用户请求验证时所携带的IP ); // 生成验证码信息，并返回给客户端 $status = $GtSdk->pre_process($data, 1); $_SESSION['gtserver'] = $status; $_SESSION['user_id'] = $data['user_id']; echo $GtSdk->get_response_str(); ?> ``` SDK找到路径 `/web/VerifyLoginServlet.php` 文件内容： ``` <?php /** * 输出二次验证结果,本文件示例只是简单的输出 Yes or No */ error_reporting(0); require_once dirname(dirname(__FILE__)) . '/lib/class.geetestlib.php'; require_once dirname(dirname(__FILE__)) . '/config/config.php'; session_start(); $GtSdk = new GeetestLib(CAPTCHA_ID, PRIVATE_KEY); $data = array( "user_id" => $_SESSION['user_id'], # 网站用户id "client_type" => "web", #web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式 "ip_address" => "127.0.0.1" # 请在此处传输用户请求验证时所携带的IP ); if ($_SESSION['gtserver'] == 1) { //服务器正常 $result = $GtSdk->success_validate($_POST['geetest_challenge'], $_POST['geetest_validate'], $_POST['geetest_seccode'], $data); if ($result) { echo '{"status":"success"}'; // 验证码验证成功 } else{ echo '{"status":"fail"}';// 验证码验证失败 } }else{ //服务器宕机,走failback模式 if ($GtSdk->fail_validate($_POST['geetest_challenge'],$_POST['geetest_validate'],$_POST['geetest_seccode'])) { echo '{"status":"success"}'; }else{ echo '{"status":"fail"}'; } } ?> ``` 在API2中当取出status=0时表示极验宕机，此时流程进入failback模式，后续逻辑都是在您的服务器完成，不会再向极验服务器发送网络请求。大同小异！ **4.填入公钥（id）和私钥（key）** 找到SDK路径： `/config/config.php`  下次讲解极验验证ajax的实现吧！继续折腾中... <div class="preview"> <div class="post-inser post box-shadow-wrap-normal"> <a href="https://www.blogbig.cn/archives/geetestajax.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">网站对接极验验证之实现ajax</p> <div class="inster-summary text-muted"> 前言极验验证官网SDK地址官方文档本次demo地址实现步骤1. 引入类库首先前台需要引入jquery与极验库js&... </div> </div> </a> <!-- .inner-content #####--> </div> <!-- .post-inser ####--> </div> [1]: https://www.blogbig.cn/go/thILmD74/ [2]: https://www.blogbig.cn/go/RIttSZfU/ [3]: https://www.blogbig.cn/go/ZYdmZkME/ [4]: https://image.blogbig.cn/2019/12/26/1577345286.jpg 正文到此结束 最后修改：2021 年 01 月 15 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 1 如果觉得我的文章对你有用，请随意赞赏
