thinkphp5系列之手势验证码(VAPTCHA)

发布时间:1970-01-01  编辑:Mrs.默先森 

    官网&手册

    手势验证码官网

    Vaptcha-php-sdk


    环境要求

    Vaptcha SDK PHP版本适用于 php5.3及以上版本

    需开启curl扩展


    安装SDk

    github下载:git clone https://github.com/vaptcha/vaptcha-php-sdk.git

    composer安装(推荐):composer require Vaptcha/vaptcha-sdk


    代码部署

    登录后台添加验证单元

    创建验证单元获得vid+key

    参数请妥善保存

    部署需要在线服务器进行



    引入js和预加载动画

    <style>
        .vaptcha-init-main {
            display: table;
            width: 100%;
            height: 100%
            background-color: #EEEEEE;
        }
        .vaptcha-init-loading {
            display: table-cell;
            vertical-align: middle;
            text-align: center
        }
        .vaptcha-init-loading>a {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: none;
        }
        .vaptcha-init-loading>a img {
            vertical-align: middle
        }
        .vaptcha-init-loading .vaptcha-text {
            font-family: sans-serif;
            font-size: 12px;
            color: #CCCCCC;
            vertical-align: middle
        }
    </style>
    <!-- 点击式按钮建议宽度不低于200px,高度介于36px与46px  -->
    <!-- 嵌入式仅需设置宽度,高度根据宽度自适应,最小宽度为200px -->
    <div id="vaptcha_container" style="width:300px;height:36px;">
       <!--vaptcha_container是用来引入Vaptcha的容器,下面代码为预加载动画,仅供参考-->
       <div class="vaptcha-init-main">
          <div class="vaptcha-init-loading">
              <a href="/" target="_blank"><img src="https://cdn.vaptcha.com/vaptcha-loading.gif"/></a>
              <span class="vaptcha-text">Vaptcha启动中...</span>
          </div>
      </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.vaptcha.com/v.js"></script>


    布局如图,这里在页面增加用户名和密码

    预加载动画

    1524897015861587.png


    请求服务器端获取vid和challenge

    请求getVaptcha加载手势验证码

    宕机请求getDownTime处理

    javascript部分代码:

        var form = {
          token: '',
          challenge: '',
          username: '',
          password: ''
        }
        //Vaptcha对象
        var obj;
        //根据服务端接口获取的vid与challenge创建实例
        //验证参数对象
        $.get("{:url('getVaptcha')}", function(res) {
          var config = {
            vid: res.vid, //验证单元id, string, 必填
            challenge: res.challenge, //验证流水号, string, 必填
            container: "#vaptcha_container", //验证码容器, HTMLElement或者selector, 必填
            type: "click", //必填,表示点击式验证模式[embed:嵌入式,click:点击式,invisible:隐藏式]
            effect: 'float', //验证图显示方式, string, 可选择float, popup, 默认float
            color: "#3C8AFF", //按钮颜色
            https: false, //协议类型,boolean,可选true,false,不填则自适应。
            outage: "{:url('getDownTime')}", //服务器端配置的宕机模式接口地址
            checkingAnimation: "display", //是否显示智能检测动画, "hide"则为隐藏
            success: function(token, challenge) { //验证成功回调函数, 参数token, challenge 为string, 必填
              //执行表单验证失败时,需要重新初始化VAPTCHA
              //todo:执行人机验证成功后的操作
              form.token = token;
              form.challenge = challenge;
            },
            fail: function() { //验证失败回调函数
              //todo:执行人机验证失败后的操作
            }
          }
    
          window.vaptcha(config, function(vaptcha_obj) {
            obj = vaptcha_obj;
            obj.init();
          }, 'json');
        }, 'json')


    服务器端代码部署:

    使用接口前需先实例化Vaptcha

    use Vaptcha\Vaptcha;
    
    private $vaptcha;
    public function __construct()
    {
        $vid = 'your vid';
        $key = 'your key';
        $this->vaptcha = new Vaptcha($vid, $key);// 实例化sdk,$vid 和 $key 对应验证单元中的Vid和Key
    }

    与html代码部署相结合的两个方法:

        /**
         * [getvaptcha 获取流水号接口]
         * @return [type] [description]
         */
        public function getvaptcha()
        {
            $challenge = $this->vaptcha->getChallenge();
            echo json_encode($challenge);
            exit;
        }
        /**
         * [getDownTime 宕机模式]
         * @return [type] [description]
         */
        public function getDownTime()
        {
            $data = $_GET['data']; // 客户端sdk以get方式发送数据
            echo json_encode($this->vaptcha->downTime($data));
            exit;
        }

    正常加载手势验证码:

    宕机时显示验证码


    登录进行人机检测

    提示消息使用layer弹出层

    如有需要,请自行引入

    <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>


    function post(event) {
          event.preventDefault();
          if (!form.token) {
            layer.alert('请先进行人机验证',{icon:3});
            return false;
          }
          form.username = $('input[name=username]').val();
          form.password = $('input[name=password]').val();
          $.post("{:url('login')}",form,function(res){
              if(res.code==0){
                 layer.alert(res.msg,{icon:3});
                 obj.init();//初始化验证码
              }else{
                layer.alert(res.msg,{icon:6});
              }
          },'json');
    }

    请求php处理登录

    php中处理时需要对验证码进行二次验证

        public function login(Request $request)
        {
            if ($request->isPost()) {
                //进行二次验证,成功返回true,失败返回false
                $validatePass = $this->vaptcha->validate($request->challenge, $request->token);
                if (!$validatePass) {
                    return json(['code'=>0,'msg'=>'请先进行人机验证']);
                }
                //比对用户名密码是否正确
                $userInfo = db('user')->where('username', $request->username)->where('password', $request->password)->find();
                if (!$userInfo) {
                    return json(['code'=>0,'msg'=>'用户名或密码不正确']);
                }
                return json(['code'=>1,'msg'=>'登录成功']);
            }
        }

    标签php


本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动。

陶太富博客 http://blog.taotaifu.cn

最新发布

最新评论

0.072551s