前言
1.引入类库
首先前台需要引入jquery与极验库js
<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
代码加入相应位置:
<div id="embed-captcha"></div>
<p id="wait" class="show">正在加载验证码......</p>
<p id="notice" class="hide">请先完成验证</p>
代码加入head内:
<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
/**
* 使用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的实现吧!继续折腾中...
前言极验验证官网SDK地址官方文档本次demo地址实现步骤1. 引入类库首先前台需要引入jquery与极验库js&...
正文到此结束