Laravel 中使用 vaptcha 手势验证码

教程 随遇而安 ⋅ 于 2017-11-28 18:04:02 ⋅ 最后回复由 PHPer 2017-12-08 09:27:47 ⋅ 1204 阅读

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

准备工作,获取vid与key

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

后端开发接口

安装

按照github的文档来,使用composer安装:

composer require Vaptcha/vaptcha-sdk;

创建路由控制器

根据文档这里需要两个接口供前端使用,一个是获取vidchallenge,用于在客户端初始化实例,第二个是宕机模式,虽然不知到时是啥,反正照着写就行了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

本帖已被设为精华帖!
本帖由 Summer 于 2周前 加精
回复数量: 12
暂无评论~~
  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!
Ctrl+Enter