极验验证——滑块拼图验证码
如何使用：
首先要确认前端使用页面，比如登陆页面
|
1
2
|
|
1.在登陆页面访问引入类库：
如果您的网站使用https，则只需要将引入极验库的地方换成https协议即可，不需要更改其它地方。例如更换成以下代码即可：
|
1
2
|
|
2.初始化前端
下面的代码需要在页面加载后就执行，如果你使用jQuery，可以写在$(function(){});内
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$.ajax({
// 获取id，challenge，success（是否启用failback）
url:
"../web/StartCaptchaServlet.php?t="
+ (
new
Date()).getTime(),
// 加随机数防止缓存
type:
"get"
,
dataType:
"json"
,
success:
function
(data) {
// 使用initGeetest接口
// 参数1：配置参数
// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
initGeetest({
gt: data.gt,
challenge: data.challenge,
product:
"popup"
,
// 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
offline: !data.success
// 表示用户后台检测极验服务器是否宕机，与SDK配合，用户一般不需要关注
}, handlerPopup);
}
});
|
上面代码的意思是说，页面加载后，需要到你指定的URL地址上获得验证码信息,至于上面的URL地址“../web/StartCaptchaServlet.php”里面写了什么内容，这个我们在服务器端代码部署会详细说明。
但是需要说明的是，上面的代码里有一个回调函数叫“handlerPopup”，这个函数是你需要验证码的真正初始化代码：如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
// 代码详细说明
var
handlerPopup =
function
(captchaObj) {
// 注册提交按钮事件，比如在登陆页面的登陆按钮
$(
"#popup-submit"
).click(
function
() {
// 此处省略在登陆界面中，获取登陆数据的一些步骤
// 先校验是否点击了验证码
var
validate = captchaObj.getValidate();
if
(!validate) {
alert(
'请先完成验证！'
);
return
;
}
// 提交验证码信息，比如登陆页面，你需要提交登陆信息，用户名和密码等登陆数据
$.ajax({
url:
"../web/VerifyLoginServlet.php"
,
type:
"post"
,
// dataType: "json",
data: {
// 用户名和密码等其他数据，自己获取，不做演示
username:username,
password:password,
// 验证码数据，这些数据不用自己获取
// 这是二次验证所需的三个值
// 当然，你也可以直接设置验证码单独校验，省略其他信息
geetest_challenge: validate.geetest_challenge,
geetest_validate: validate.geetest_validate,
geetest_seccode: validate.geetest_seccode
},
// 这里是正确返回处理结果的处理函数
// 假设你就返回了1，2，3
// 当然，正常情况是返回JSON数据
success:
function
(result) {
// 1表示验证码验证失败
if
(result ==
"1"
) {
alert(
"验证码验证失败！"
);
}
else
if
(result ==
"2"
) {
alert(
"用户名或密码错误！"
);
}
else
if
(result ==
"3"
) {
alert(
"登陆成功！"
);
// 登陆成功了，可以在这里做其他处理
}
else
{
alert(
"登陆错误！"
);
}
}
});
});
// 弹出式需要绑定触发验证码弹出按钮
// 比如在登陆页面，这个触发按钮就是登陆按钮
captchaObj.bindOn(
"#popup-submit"
);
// 将验证码加到id为captcha的元素里
// 验证码将会在下面指定的元素中显示出来
captchaObj.appendTo(
"#popup-captcha"
);
// 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
};
|
至此，前端的所有设置都写完了，官方的说明文档：http://www.geetest.com/install/sections/idx-client-sdk.html
3.服务器端部署（PHP）
在第一步中，我们设置了一个这样的地址“../web/StartCaptchaServlet.php”，在这个地址里边写什么呢：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// 引入文件
require_once
dirname(dirname(
__FILE__
)) .
'/lib/class.geetestlib.php'
;
require_once
dirname(dirname(
__FILE__
)) .
'/config/config.php'
;
// 实例化，实例化的参数在config中配置，分别是：验证ID 和 验证Key，如何获取下面会说。
$GtSdk
=
new
GeetestLib(CAPTCHA_ID, PRIVATE_KEY);
session_start();
// 这个是用户的标识，或者说是给极验服务器区分的标识，如果你项目没有预先设置，可以像下面这样设置：
if
(!isset(
$_SESSION
[
'user_id'
])){
$_SESSION
[
'user_id'
]=uniqid();
// 生成一个唯一ID
}
$user_id
=
$_SESSION
[
'user_id'
];
// 或者，你就直接写成：
// $user_id = "test";
// 生成验证码信息，并返回给客户端
$status
=
$GtSdk
->pre_process(
$user_id
);
$_SESSION
[
'gtserver'
] =
$status
;
$_SESSION
[
'user_id'
] =
$user_id
;
echo
$GtSdk
->get_response_str();
?>
|
如何获取 验证ID 和 验证Key ：
|
1
2
3
|
1.从 验证后台 注册账号
2.添加验证，可以获取一组当前验证的ID/Key
3.将ID和Key分别替换到config.php文件中的captcha_id/private_key变量的值
|
4.点击提交按钮之后的服务端校验（二次验证）
比如上面说的，用户登录时，你把用户名和密码和验证码信息都提交到服务器了，这个时候，你就可以做校验了：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
// 引入文件
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);
// 比如你设置了一个验证码是否验证通过的标识
$code_flag
=false;
// 这里获取你之前设置的user_id，传送给极验服务器做校验
$user_id
=
$_SESSION
[
'user_id'
];
if
(
$_SESSION
[
'gtserver'
] == 1) {
$result
=
$GtSdk
->success_validate(
$_POST
[
'geetest_challenge'
],
$_POST
[
'geetest_validate'
],
$_POST
[
'geetest_seccode'
],
$user_id
);
if
(
$result
) {
// 验证码验证成功
$code_flag
=true;
}
}
else
{
if
(
$GtSdk
->fail_validate(
$_POST
[
'geetest_challenge'
],
$_POST
[
'geetest_validate'
],
$_POST
[
'geetest_seccode'
])) {
// 验证码验证成功
$code_flag
=true;
}
}
// 如果验证码验证成功，再进行其他校验
if
(
$code_flag
){
// 其他验证操作
// 用户名不对时，返回2，其他错误返回3，等等。。。。
}
else
{
// 验证码验证失败，返回1，这里和上面相呼应，当然我的项目没有简单的返回1，而是返回了JSON数据
echo
1;
exit
(-1);
}
?>
|
好了，所有的内容都说完了，感谢你的阅读。
官网：http://www.geetest.com/
官方文档：http://www.geetest.com/install/sections/idx-basic-introduction.html
GitHub：https://github.com/GeeTeam/gt-php-sdk.git