Laravel 5.5 整合极验验证码 3.0

首先需要搭建完成Laravel项目，并能够正常运行

注册账号

注册地址:http://www.geetest.com/
注册之后获得最新的ID和KEY   (建议与极验的客服人员联系一下，否则等待的时间会比较久)

下载sdk

git clone https://github.com/GeeTeam/gt3-dotnet-sdk.git
把下载下来的sdk改名为geetest放入vendor文件下
可以把geetest文件下的其他文件都删除只保留lib文件
把lib下的class.geetestlib.php修改名称为：GeetestLib.class.php

修改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;
    }

在composer.json的autoload内的classmap项新增类包

运行终端，cd到项目路径，使用composer命令
```
composer dumpautoload 
```

在config文件下新建了sys.php做配置文件方便以后在后台修改

在配置中添加配置项：
/*验证码配置*/
    'GEE_ID' =>  'xxxx',
    'GEE_KEY'=>  'xxxx',

在App\Http\Controllers 下创建GeetestController控制器

注意：在这个控制器中使用到了 Input类

<https://juejin.cn/post/6844903984524689421#heading-23> 不懂的朋友可以参考该链接

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use GeetestLib;
use Input;

class GeetestController extends Controller
{
    public function getVerify(){
        //实例化并传入极验id与key值
        $GtSdk = new GeetestLib(config('sys.GEE_ID'), config('sys.GEE_KEY'));
        $user_id = "web";
        // $user_id = $geetest['user_id'];
        $status = $GtSdk->pre_process($user_id);
        $data = array(
            'gtserver'=>$status,
            'user_id'=>$user_id
        );
        session(['geetest'=>$data]);
        echo $GtSdk->get_response_str();
    }

    public function login()
    {
        $geetest_challenge = Input::get('geetest_challenge');
        $geetest_validate = Input::get('geetest_validate');
        $geetest_seccode = Input::get('geetest_seccode');
        $GtSdk = new 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";
            }
        }
    }
}

在 route/web.php 新增路由

Route::get('/getVerify', 'GeetestController@getVerify')->name('getVerify');
Route::get('/login', 'GeetestController@login')->name('login');

在页面上处理表单，并且使用极验验证

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>gt-php-sdk-demo</title>
    <style>
        body {
            margin: 50px 0;
            text-align: center;
        }
        .geetest_holder.geetest_wind {
            margin: 0 auto;
        }
        .inp {
            border: 1px solid gray;
            padding: 0 10px;
            width: 200px;
            height: 30px;
            font-size: 18px;
        }
        .btn {
            /* border: 1px solid gray; */
            width: 100px;
            height: 30px;
            font-size: 16px;
            cursor: pointer;
            /* width: 100%; */
            margin-top: 30px;
        }
        #embed-captcha {
            width: 300px;
            margin: 0 auto;
        }
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
        #notice {
            color: red;
        }
    </style>
</head>
<body>
<h1>极验验证SDKDemo</h1>
<form class="popup" action="{{ route('login') }}" method="get">
    <h2>嵌入式Demo，使用表单形式提交二次验证所需的验证结果值</h2><br>
    <p>
        <label for="username2">用户名：</label>
        <input class="inp" id="username2" type="text" placeholder="请输入用户名">
    </p>
    <br>
    <p>
        <label for="password2">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
        <input class="inp" id="password2" type="password" placeholder="请输入密码">
    </p>

    <div id="embed-captcha"></div>
    <p id="wait" class="show">正在加载验证码......</p>
    <p id="notice" class="hide">请先完成验证</p>

    <input class="btn" id="embed-submit" type="submit" value="提交">
</form>
<script src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/11/9/16e4f8d0466367d9~tplv-t2oaga2asx-image.image"></script>
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<script>
    var handlerEmbed = function(captchaObj) {
        $('#embed-submit').click(function(){
            var validate = captchaObj.getValidate();
            // 完成安全校验
            $("#embed-captcha").closest('form').submit(function(e) {
                var validate = captchaObj.getValidate();
                if (!validate) {
                    alert('{{ Config::get('geetest.client_fail_alert')}}');
                    e.preventDefault();
                }
            });
            captchaObj.appendTo("#geetest-captcha");
            captchaObj.onReady(function() {
                $("#wait")[0].className = "hide";
            }); 

            // 用户名和密码进行校验
            if($('#username2').val() != '' && $('#password2').val() != '') {
                return true;
                // return redirect()->route('login',[params => 2]);
            } else {
                alert("验证不通过");
                return false;
            }
        })

        // console.log('表单验证状态码',statusData);    
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
    };
    $.ajax({
        // 获取id，challenge，success（是否启用failback）
        url: "{{ route('getVerify',array('t'=>time())) }}", // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            console.log('successs',data)
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                // width:'100%',
                gt: data.gt,
                challenge: data.challenge,
                lang: '{{ Config::get('geetest.lang') }}',
                product: "float", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
            }, handlerEmbed);
        }
    });
</script>
</body>
</html>

完整代码

Laravel-geetest手动搭建

Laravel 5.5 整合极验验证码 3.0