- 注冊賬號
注冊地址:http://www.geetest.com/
注冊之后獲得最新的ID和KEY
2·下載sdk
把下載下來的sdk改名為geetest放入vendor文件下
可以把geetest文件下的其他文件都刪除只保留lib文件
3·把lib下的class.geetestlib.php修改名稱為：GeetestLib.class.ph 修改GeetestLib類里的pre_process()方法
public function pre_process($param, $new_captcha=1) {
$data = array('gt'=>$this->captcha_id,
'new_captcha'=>$new_captcha
);
$data = array_merge($data,$param);//沒有修改的這里可能會報錯
$query = http_build_query($data);
$url = "http://api.geetest.com/register.php?" . $query;
$challenge = $this->send_request($url);
if (strlen($challenge) != 32) {
$this->failback_process();
return 0;
}
$this->success_process($challenge);
return 1;
}
改成
public function pre_process($param, $new_captcha=1) {
$data = array('gt'=>$this->captcha_id,
'new_captcha'=>$new_captcha
);
if (($param != null) and (is_string($param))) {
$data['user_id'] = $param;
}
$query = http_build_query($data);
$url = "http://api.geetest.com/register.php?" . $query;
$challenge = $this->send_request($url);
if (strlen($challenge) != 32) {
$this->failback_process();
return 0;
}
$this->success_process($challenge);
return 1;
}
4·在composer.json的autoload內(nèi)的classmap項新增類包,
"autoload": {
"classmap": [
"database",
"vendor/geetest"http://添加自己的
],
"psr-4": {
"App\\": "app/"
}
},
5·運行終端导饲，cd到項目路徑浆洗，使用composer命令
composer dumpautoload
然后就能在項目中愉快的使用GeetestLib類了域帐，簡單的用法如下：
use GeetestLib;
$GtSdk = new GeetestLib()
6·我是在config文件下新建了sys.php做配置文件方便以后在后臺修改
/*驗證碼配置*/
'GEE_ID' => '4c65ff2cf2d4ac493e837a91215fff77',
'GEE_KEY' => 'e9fc13ecf1178f6a59c80f8f42e5773f',
7·在App\Http\Controllers 下創(chuàng)建Geetest控制器方法getVerify()
namespace App\Http\Controllers;
use GeetestLib;
class GeetestController extends Controller
{
public function getVerify(){
//實例化并傳入極驗id與key值
$GtSdk = new GeetestLib(config('sys.GEE_ID'), config('sys.GEE_KEY'));
$user_id = "web";
$status = $GtSdk->pre_process($user_id);
$data = array(
'gtserver'=>$status,
'user_id'=>$user_id
);
session(['geetest'=>$data]);
echo $GtSdk->get_response_str();
}
}
創(chuàng)建路由
Route::get('/getVerify', 'GeetestController@getVerify')->name('getVerify');
8·在頁面上處理
@extends('layouts.app')
@section('content')
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!-- 引入封裝了failback的接口--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Login</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>
@if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label for="password" class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control" name="password" required>
@if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
</div>
<div id="embed-captcha"></div>
<p id="wait" class="show">正在加載驗證碼......</p>
<p id="notice" class="hide">請先拖動驗證碼到相應(yīng)位置</p>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<div class="checkbox">
<label>
<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" id="but" class="btn btn-primary" disabled>
Login
</button>
<a class="btn btn-link" href="{{ route('password.request') }}">
Forgot Your Password?
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
var handlerEmbed = function (captchaObj) {
$("#embed-submit").click(function (e) {
var validate = captchaObj.getValidate();
if (!validate) {
$("#notice")[0].className = "show";
setTimeout(function () {
$("#notice")[0].className = "hide";
}, 2000);
e.preventDefault();
}
});
// 將驗證碼加到id為captcha的元素里
captchaObj.appendTo("#embed-captcha");
captchaObj.onReady(function () {
$("#wait")[0].className = "hide";
});
//驗證成功
captchaObj.onSuccess(function () {
$("#but").attr("disabled",false)
});
//驗證失敗
captchaObj.onError(function () {
$("#but").attr("disabled",true)
});
// 更多接口參考：http://www.geetest.com/install/sections/idx-client-sdk.html
};
$.ajax({
// 獲取id，challenge杨拐，success（是否啟用failback）
url: "{{ route('getVerify',array('t'=>time())) }}", // 加隨機(jī)數(shù)防止緩存
type: "get",
dataType: "json",
success: function (data) {
console.log(data)
// 使用initGeetest接口
// 參數(shù)1：配置參數(shù)
// 參數(shù)2：回調(diào)，回調(diào)的第一個參數(shù)驗證碼對象鸠补，之后可以使用它做appendTo之類的事件
initGeetest({
gt: data.gt,
challenge: data.challenge,
product: "float", // 產(chǎn)品形式称勋，包括：float仓坞，embed捶枢，popup。注意只對PC版驗證碼有效
offline: !data.success // 表示用戶后臺檢測極驗服務(wù)器是否宕機(jī)空厌，一般不需要關(guān)注
}, handlerEmbed);
}
});
</script>
@endsection
9·初始化完成之后的提交時前段會自動驗證钝诚，然后提交給后臺之后處理方法是：
public function login()
{
$GtSdk = GeetestLib(config('sys.GEE_ID'), config('sys.GEE_KEY'));
$geetest = session("geetest");
$user_id = $geetest['user_id'];);
if ($geetest['gtserver'] == 1) {
$result = $GtSdk->success_validate($geetest_challenge, $geetest_validate, $geetest_seccode, $user_id);
if ($result) {
echo 'Yes!';
} else{
echo 'No';
}
}else{
if ($GtSdk->fail_validate($geetest_challenge, $geetest_validate, $geetest_seccode)) {
echo "yes";
}else{
echo "no";
}
}
}
然后在頁面上就可以看到效果了颖御。
這里寫圖片描述
