geetest极验行为验证（laravel写接口）

2018-12-13 本文已影响0人骑代码奔小康

致敬学习的自己，非计算机专业的程序员就只会写功能，不会讲原理、不会讲算法、就是会被歧视吗，管他大爷的，今天做一个拖动的验证码功能，
极验官网：https://www.geetest.com/

后台接口有两个，一个初始化，一个二次验证
获取到php-SDK后在lib文件夹有一个class.geetestlib.php的文件，后台我们只需要这个文件就可以了
至于config里面的常量"CAPTCHA_ID" "PRIVATE_KEY"，配置到框架中去
整个流程
进入页面请求api1->取得参数初始化initGeetest方法渲染到id=captcha的div内->点击验证->执行captchaObj.onSuccess 在里面进行第二次验证 api2->成功后返回到页面把提交按钮的disabled打开，允许登录

1、laravel引入极验第三方类

把Lib文件夹复制到laravel项目的app目录下，修改class.geetestlib.php为GeetestLib.php
接着找到根目录下的composer.json文件

"autoload": {
        "classmap": [
            "database/seeds",
            "database/factories",
            "app/Lib/GeetestLib.php" // 加入配置
        ],
        "psr-4": {
            "App\\": "app/"
        }
    }

composer dumpautoload

然后就能在项目中愉快的使用了，简单的用法如下：

use GeetestLib; // 极验类库

2、获取验证条样式（前台），初始化接口 API1（后台）

#前台部分
    <div class="login">
        <div class="message">管理登录</div>
        <div id="darkbannerwrap"></div>
        
        <form method="post" class="layui-form" >
            <input name="phone" placeholder="电话号码"  type="text" lay-verify="required" class="layui-input" >
            <hr class="hr15">
            <input name="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input">
            <hr class="hr15">
            <div id="captcha">
                <div id="loading-tip">加载中，请稍后...</div>
            </div>
            <hr class="hr15" >
            <input value="登录" lay-submit  lay-filter="login" id="submit-tip"  style="width:100%;" type="submit">
            <hr class="hr20" >
        </form>
    </div>

// 渲染 验证条
var handler = function (captchaObj) {
     // DOM 准备好后，隐藏 #loading-tip 元素
     // 仅作示例用，用您适合的方式隐藏即可
     captchaObj.onReady(function () {
         document.getElementById('loading-tip').style.display = 'none';
         $("#submit-tip").attr("disabled",true); // 
     });

     // 出错啦，可以提醒用户稍后进行重试
     captchaObj.onError(function () {
          layer.msg('页面出错，请刷新页面。。。', {icon: 5});
     });
    // 将验证码加到id为captcha的元素里
    // 渲染验证条
    captchaObj.appendTo("#captcha");
 };
 // api1 获取流水标识并设置状态码 
$.ajax({
        url: loginurl+"Rbac/apiVerif1", //  验证码的第一次验证 接口
        type: "get",
        dataType: "json",
        success: function (data) {
        //请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
        initGeetest({  
               gt: data.gt,
               challenge: data.challenge,
               product: "float", // 产品形式
               offline: !data.success
               }, handler); // 参数配置完以后执行上面的handler方法 渲染验证条
         }
 })

#后台部分
    // 验证码的第一次验证
    public function apiVerif1(Request $request){
        // 极验类的库，传入CAPTCHA_ID 和 PRIVATE_KEY
        // 在极验后台有，写到配置文件中去
        $GtSdk = new \GeetestLib(config('constants.CAPTCHA_ID'), config('constants.PRIVATE_KEY'));
        $data = array(
                "user_id" => uniqid(), # 网站用户id
                "client_type" => "web", #web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式
                "ip_address" => $request->getClientIp(), # 请在此处传输用户请求验证时所携带的IP
            );
        $status = $GtSdk->pre_process($data, 1); // 获取服务器的状态
        session(['gtserver' => $status]);// 状态存入session中
        session(['user_id' => $data['user_id']]);// 用户id存入session中
        echo $GtSdk->get_response_str(); // 传到前台 供initGeetest使用 data.gt, data.challenge, data.success
    }

上面执行完后在id=captcha会出现验证条

image.png

3、点击验证条（前台），后台二次验证 API2（后台）

点击验证条后会出现

image.png
验证完成后会出现

image.png

在代码中执行了什么操作呢？
完成后会执行 handler 方法中的onSuccess, 在这个方法内进行第二次验证
在页面上会出现三个input 它们name分别为 geetest_challenge， geetest_validate，geetest_validate

captchaObj.onSuccess(function () {
})
// 验证码成功以后会执行的方法，但不代表验证成功
captchaObj.onSuccess(function () {
    var result = captchaObj.getValidate();
    // api2 查询验证是否成功
    $.ajax({
        url: loginurl+"Rbac/apiVerif2", //  二次验证的接口地址
        type: "post",
        data: {
            geetest_challenge: result.geetest_challenge,
            geetest_validate: result.geetest_validate,
            geetest_seccode: result.geetest_seccode,
            // 其他服务端需要的数据，比如登录时的用户名和密码
        },
        dataType: "json",
        success: function (data) {
            if( data.code === 0 ){
                $("#submit-tip").attr("disabled",false);
            }else{
                layer.msg('验证失败', {icon: 5});
                captchaObj.reset(); // 调用该接口进行重置
            }
        }
    })
})
# 后台代码

// 验证码的第二次验证
public function apiVerif2(Request $request){
    $info = $request->all();
    // 判断服务器是否正常
    $gtserver = session()->pull('gtserver');
    // 用户的id  一个随机数
    $user_id  = session()->pull('user_id');
    $GtSdk = new \GeetestLib(config('constants.CAPTCHA_ID'), config('constants.PRIVATE_KEY'));
    $data = array(
            "user_id" => $user_id, # 网站用户id
            "client_type" => "web", #web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式
            "ip_address" => $request->getClientIp(), # 请在此处传输用户请求验证时所携带的IP
        );
    if ( $gtserver == 1) {   // 服务器正常
        $result = $GtSdk->success_validate($info['geetest_challenge'], $info['geetest_validate'], $info['geetest_seccode'], $data);
        if ($result) {
            Base::successReturn('验证成功', 0, "success"); // echo '{"status":"success"}';
        }
        Base::errorReturn('验证失败', 300);
    } else {  // 服务器宕机,走failback模式
        if ($GtSdk->fail_validate($info['geetest_challenge'],$info['geetest_validate'],$info['geetest_seccode'])) {
            Base::successReturn('验证成功', 0, "success");
        }
        Base::errorReturn('验证失败', 300);
    }
}

geetest极验行为验证（laravel写接口）

1、laravel引入极验第三方类

2、获取验证条样式（前台），初始化接口 API1（后台）

3、点击验证条（前台），后台二次验证 API2（后台）

猜你喜欢

热点阅读