Laravel 使用 vaptcha 手势验证码
Vaptcha是最近才出现的一种新型的手势验证码,蛮有趣的,记录一下使用方法。
官网地址www.vaptcha.com/
准备工作,获取vid与key
根据文档说明,使用需要在后台创建一个验证单元,如下图所示,其中有选项里面有个验证场景,感觉描述的不是很清楚,感觉大概的意思就是可以给某个场景做统计,比如登录场景。
创建成功之后,会的到如下图所示的vid与key,后面再使用的时候会用到。
后端开发接口
安装#
按照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);
}
}
访问接口,成功获取到数据
前端使用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="/link/to?link=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>
成功显示
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanheagffk
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01