下面給大家詳解ThinkPHP5實(shí)現(xiàn)極驗(yàn)滑動(dòng)驗(yàn)證碼geetest功能，希望對(duì)需要的朋友有所幫助！
ThinkPHP5實(shí)現(xiàn)極驗(yàn)滑動(dòng)驗(yàn)證碼geetest功能
現(xiàn)在很多網(wǎng)站，比如淘寶，京東等都改用使用極驗(yàn)拖動(dòng)驗(yàn)證碼實(shí)現(xiàn)登錄，這種方式比傳統(tǒng)的驗(yàn)證碼方式有更好的體驗(yàn)，減少用戶輸入的錯(cuò)誤，也同樣能起到防盜刷的功能。現(xiàn)在很多極驗(yàn)都是第三方的，也很多都是收費(fèi)的。
這里主要介紹thinkphp整合系列之極驗(yàn)滑動(dòng)驗(yàn)證碼geetest，官網(wǎng)：http://www.geetest.com
具體如下：
一：注冊(cè)獲取key
注冊(cè)；創(chuàng)建應(yīng)用；獲取key；
二：導(dǎo)入sdk
/ThinkPHP/Library/Org/Xb/GeetestLip.class.php（此處GeetestLip.class.php是我重新命名的geetest類文件，原名為class.geetestlib.php）
此處牽扯到thinkphp引入第三方類，我把第三方類放到Org/Util/Xb下面了，同時(shí)對(duì)該類文件加入命名空間如下，否則實(shí)例化類時(shí)找不到文件
三：生成驗(yàn)證樣式
admin/view/public/cdtsh_log_smfyws.php
<!doctype html>
<html>
<head>
<meta charset="GBK" />
<title>網(wǎng)站管理系統(tǒng)后臺(tái)</title>
<script language="javascript" type="text/javascript" src="__JS__/jquery.js"></script>
<link rel="stylesheet" href="__CSS__/jquery.validator.css">
<script type="text/javascript" src="__JS__/jquery.validator.js"></script>
<script type="text/javascript" src="__JS__/zh_CN.js"></script>
<link href="__CSS__/admin_login.css?v20130227" rel="stylesheet" />
<script>
$(document).ready(function(){
var verifyimg = $(".verifyimg").attr("src");
$(".reloadverify").click(function(){
if( verifyimg.indexOf('?')>0){
$(".verifyimg").attr("src", verifyimg+'&random='+Math.random());
}else{
$(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
}
});
});
</script>
</head>
<body>
<p class="wrap">
<h1><a href="javascript:;" style="height: 116px; width: 250px;">后臺(tái)管理中心</a></h1>
<form method="post" action="{:U('Admin/Public/cdtsh_log_smfyws')}">
<p class="login">
<ul>
<li>
<input class="input" id="username" name="username"type="text" title="用戶名" data-rule="required;username" placeholder="用戶名" />
<span class="msg-box n-right" style="position:absolute; left: 248px; top: 12px; " for="username"></span>
</li>
<li>
<input class="input" name="password" type="password" title="密碼" data-rule="required;password" placeholder="密碼"/>
<span class="msg-box n-right" style="position:absolute;left: 248px; top: 12px;" for="password"></span>
</li>
<li>
<input class="input" id="verify" name="verify" type="text" style="width:130px;" title="密碼" data-ok=" " placeholder="驗(yàn)證碼" data-tip="輸入驗(yàn)證碼！" title="驗(yàn)證碼" data-rule="required;text;remote[{:U('Admin/Public/check_verify')}]" />
<p class="yanzhengma_box" id="verifyshow"> <img class="verifyimg reloadverify" style=" cursor: pointer;" align="right" src="{:U('public/verify')}" title="點(diǎn)擊刷新"> </p>
<span class="msg-box n-right" style="position:absolute;left: 248px; top: 12px;" for="verify"></span>
</li>
</ul>
<ul>
<!--<input type="button" value="異步驗(yàn)證登錄" onclick="check_verify()">-->
<!--<input type="submit" value="post提交登錄">-->
<p id="captcha"></p>
</ul>
<button type="submit" class="btn" id="subbtn">登錄</button>
</p>
</form>
</p>
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<script>
var handler = function (captchaObj) {
// 將驗(yàn)證碼加到id為captcha的元素里
captchaObj.appendTo("#captcha");
};
// 獲取驗(yàn)證碼
$.get("{:U('Admin/Public/verifys')}", function(data) {
// 使用initGeetest接口
// 參數(shù)1：配置參數(shù)，與創(chuàng)建Geetest實(shí)例時(shí)接受的參數(shù)一致
// 參數(shù)2：回調(diào)，回調(diào)的第一個(gè)參數(shù)驗(yàn)證碼對(duì)象，之后可以使用它做appendTo之類的事件
initGeetest({
gt: data.gt,
challenge: data.challenge,
product: "float", // 產(chǎn)品形式
offline: !data.success,
new_captcha:'true',
width:'260px',
}, handler);
},'json');
</script>
</body>
</html>四：驗(yàn)證函數(shù)
/Application/Common/Common/function.php
/**
* geetest檢測(cè)驗(yàn)證碼
*/
function geetest_chcek_verify($data){
$geetest_id = "7149e2021d7938157e";
$geetest_key = "62b92039e1e9cf9455";
$geetest=new \Org\Util\Xb\GeetestLib($geetest_id,$geetest_key);
$user_id=$_SESSION['geetest']['user_id'];
$ip_address=$_SESSION['geetest']['ip_address'];
$dataa = array(
"user_id" => $user_id, # 網(wǎng)站用戶id
"client_type" => "web", #web:電腦上的瀏覽器；h5:手機(jī)上的瀏覽器，包括移動(dòng)應(yīng)用內(nèi)完全內(nèi)置的web_view；native：通過(guò)原生SDK植入APP應(yīng)用的方式
"ip_address" => $ip_address, # 請(qǐng)?jiān)诖颂巶鬏斢脩粽?qǐng)求驗(yàn)證時(shí)所攜帶的IP
);
if ($_SESSION['geetest']['gtserver']==1){
$result=$geetest->success_validate($data['geetest_challenge'], $data['geetest_validate'], $data['geetest_seccode'], $dataa);
//return $result;
if ($result) {
//return 11;
return true;
} else{
//return 22;
return false;
}
}else{
if ($geetest->fail_validate($data['geetest_challenge'],$data['geetest_validate'],$data['geetest_seccode'])) {
//return 33;
return true;
}else{
//return 44;
return false;
}
}
}
//獲取id地址
function GetIP() {
if (!empty($_SERVER["HTTP_CLIENT_IP"])) {
$cip = $_SERVER["HTTP_CLIENT_IP"];
} elseif (!empty($_SERVER["HTTP_X_FORWARDED_FOR"])) {
$cip = $_SERVER["HTTP_X_FORWARDED_FOR"];
} elseif (!empty($_SERVER["REMOTE_ADDR"])) {
$cip = $_SERVER["REMOTE_ADDR"];
} else {
$cip = "無(wú)法獲取！";
}
return $cip;
}五：php生成驗(yàn)證碼并驗(yàn)證
//極速驗(yàn)證
public function verifys(){
//require_once dirname(dirname(dirname(__FILE__))) . '/lib/class.geetestlib.php';
//require_once dirname(dirname(__FILE__)) . '/config/config.php';
// $GtSdk = new GeetestLib(CAPTCHA_ID, PRIVATE_KEY);
$geetest_id = "7149e2021d7938157e9";
$geetest_key = "62b92039e1e9cf";
$geetest=new \Org\Util\Xb\GeetestLib($geetest_id,$geetest_key);
//dump($geetest);die;
$user_id = "test";
$data = array(
"user_id" => $user_id, # 網(wǎng)站用戶id
"client_type" => "web", #web:電腦上的瀏覽器；h5:手機(jī)上的瀏覽器，包括移動(dòng)應(yīng)用內(nèi)完全內(nèi)置的web_view；native：通過(guò)原生SDK植入APP應(yīng)用的方式
"ip_address" => GetIP(), # 請(qǐng)?jiān)诖颂巶鬏斢脩粽?qǐng)求驗(yàn)證時(shí)所攜帶的IP
);
$status = $geetest->pre_process($data,1);
//dump($status);
$_SESSION['geetest']=array(
'gtserver'=>$status,
'user_id'=>$user_id,
'ip_address'=>GetIP(),
);
echo $geetest->get_response_str();
}
public function cdtsh_log_smfyws() {
if ($_SESSION['userid']) {
$this->redirect('Admin/Index/Index');
} else {
if (IS_POST) {
$username = $_POST['username'];
$password = $_POST['password'];
//$geetest_challenge = $_POST['geetest_challenge'];
//$geetest_validate = $_POST['geetest_validate'];
//$geetest_seccode = $_POST['geetest_seccode'];
$data=I('post.');
if($data['geetest_challenge']=="" || $data['geetest_validate']=="" ||$data['geetest_seccode']=="" ){
$this->error('請(qǐng)進(jìn)行圖形驗(yàn)證');
}else{
//dump(geetest_chcek_verify($data));
if (geetest_chcek_verify($data)){
//echo '驗(yàn)證成功';
if ($this->loginAdmin($username, $password)) {
$data = M("User")->where("username='".$username."' and password='".md5($password)."'")->find();
if ($data["status"] != 1) {
//判斷是否禁用
$this->recordLoginAdmin($_POST['username'], $_POST['password'], 0, "賬號(hào)禁用"); //記錄登錄日志
$this->error('該帳號(hào)禁用');
} else {
$save["lastlogin_time"] = time();
$save["lastlogin_ip"] = get_client_ip();
$save["login_num"] = $data["login_num"] + 1;
$status = M("user")->where(array("id" => $data['id']))->save($save);
$_SESSION['userid'] = $data['id'];
$_SESSION['user'] = $data['username'];
$_SESSION['rid'] = $data['a_Id'];
$this->recordLoginAdmin($_POST['username'], $_POST['password'], 1); //記錄登錄日志
$this->redirect('Admin/Index/Index');
//$this->success('登錄成功',U('Admin/Index/Index'));
}
} else {
$this->recordLoginAdmin($_POST['username'], $_POST['password'], 0, "賬號(hào)密碼錯(cuò)誤"); //記錄登錄日志
$this->error('登錄失敗');
}
}else{
//echo '圖形驗(yàn)證失敗';
$this->error('圖形驗(yàn)證失敗');
}
}
} else {
$this->display();
}
}
}效果圖如下：
登錄頁(yè)面
點(diǎn)擊驗(yàn)證后
