Laravel 中使用 vaptcha 手势验证码

Vaptcha是最近才出现的一种新型的手势验证码，蛮有趣的，记录一下使用方法。
官网地址https://www.vaptcha.com/

准备工作，获取vid与key

根据文档说明，使用需要在后台创建一个验证单元，如下图所示，其中有选项里面有个验证场景，感觉描述的不是很清楚，感觉大概的意思就是可以给某个场景做统计，比如登录场景。
file
创建成功之后，会的到如下图所示的vid与key，后面再使用的时候会用到。
file

后端开发接口

安装

按照github的文档来，使用composer安装：

composer require Vaptcha/vaptcha-sdk;

创建路由控制器

根据文档这里需要两个接口供前端使用，一个是获取vid 和challenge，用于在客户端初始化实例，第二个是宕机模式，虽然不知到时是啥，反正照着写就行了2333。
sdk也提供了对应的两个接口，其中getChallenge接口，有个$sceneId参数，就是对应之前的验证场景。路设计如下

Route::get('vaptcha/challenge', 'VaptchaController@getChallenge');
Route::get('vaptcha/downtime', 'VaptchaController@getDownTime');

创建控制器：

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Vaptcha\Vaptcha;

class VaptchaController extends Controller
{

    private $vaptcha;

    public function __construct(){
        $this->vaptcha = new Vaptcha('vid', 'key'); // 这里替换成前面获取到的vid与key
    }

    public function response($status, $msg, $data){
        return response()->json([
            'status' =>  $status,
            'msg' => $msg,
            'data' => $data
        ], $status);
    }

    public function responseSuccess($data){
        return $this->response(200, 'success', $data);
    }

    public function getChallenge(Request $request){
        $data = json_decode($this->vaptcha->getChallenge($request->sceneid));
        return $this->responseSuccess();
    }

    public function getDownTime(Request $request) {
        $data = json_decode($this->vaptcha->downTime($request->data));
        return response()->json($data);    
    }
}

访问接口，成功获取到数据
file

前端使用vaptcha

直接复制文档中的配置，改一下ok

<style>
    #vaptcha_container {
        margin-bottom: 10px;
        display: table;
        background-color: #EEEEEE;
        border-radius: 2px
    .vaptcha-init-loading {
        display: table-cell;
        vertical-align: middle;
        text-align: center
    }
    .vaptcha-init-loading>a {
        display: inline-block;
        width: 18px;
        height: 18px;
    }
    .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 -->
<!-- 嵌入式仅需设置宽度，高度根据宽度自适应，最小宽度为200px -->
<div id="vaptcha_container" style="width:300px;height:36px;">
   <!--vaptcha_container是用来引入VAPTCHA的容器，下面代码为预加载动画，仅供参考-->
   <div class="vaptcha-init-loading">
      <a href="https://www.vaptcha.com/" target="_blank"><img src="https://cdn.vaptcha.com/vaptcha-loading.gif"/></a>
      <span class="vaptcha-text">VAPTCHA启动中...</span>
  </div>
</div>
<script src="https://cdn.vaptcha.com/v.js"></script>
<!-- 引入jquery -->
<script src="/js/jquery.min.js"></script> 
<script type="text/javascript">
//这里使用到验证场景，传过去的参数即为对应的编号，比如之前登录的对应的编号即为01
    $.get('/api/vaptcha/challenge?sceneid=01', function(response){
        console.log(response);
        var options={
            vid: response.data.vid, //验证单元id, string, 必填
            challenge: response.data.challenge, //验证流水号, string, 必填
            container:"#vaptcha_container",//验证码容器, HTMLElement或者selector, 必填
            type:"click", //必填，表示点击式验证模式,
            effect:'float', //验证图显示方式, string, 可选择float, popup, 默认float
            https:false, //协议类型, boolean, 可选true, false
            color:"#57ABFF", //按钮颜色, string
            outage:"/api/vaptcha/downtime", //服务器端配置的宕机模式接口地址
            success:function(token,challenge){//验证成功回调函数, 参数token, challenge 为string, 必填
                //todo:执行人机验证成功后的操作
            },
            fail:function(){//验证失败回调函数  
                //todo:执行人机验证失败后的操作
            }
        }
        var obj;
        window.vaptcha(options,function(vaptcha_obj){
            obj = vaptcha_obj;
            obj.init();
        });
});
</script>

成功显示
file