- 注册账号
注册地址: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内的classmap项新增类包,
"autoload": {
"classmap": [
"database",
"vendor/geetest"//添加自己的
],
"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 下创建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();
}
}
创建路由
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">请先拖动验证码到相应位置</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())) }}", // 加随机数防止缓存
type: "get",
dataType: "json",
success: function (data) {
console.log(data)
// 使用initGeetest接口
// 参数1：配置参数
// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
initGeetest({
gt: data.gt,
challenge: data.challenge,
product: "float", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
}, 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";
}
}
}
然后在页面上就可以看到效果了。
这里写图片描述
