laravel5.4整合极验验证码3.0

2019独角兽企业重金招聘Python工程师标准>>>

 

来自我的博客mcoo.me

1·注册账号
注册地址:http://www.geetest.com/
注册之后获得最新的ID和KEY
2·下载sdk
把下载下来的sdk改名为geetest放入vendor文件下
可以把geetest文件下的其他文件都删除只保留lib文件
3·把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;
    }

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()

<?php

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')
   
<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 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>
    <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";
            }
        }
    }

然后在页面上就可以看到效果了。

转载于:https://my.oschina.net/silents/blog/914619