vue中使用极验验证码（附demo）
前言：
vue中使用极验验证码，最好是在页面渲染的时候（mounted)进行验证码的初始化，然后在初始化回调中绑定触发弹出验证码的事件。这样在点击按钮或者进行特定操作时能够快速的弹出验证码。
关键代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=0">
<title>极验使用实例</title>
</head> <body>
<div id="app">
<div class="item">
<h4>bind（隐藏式）</h4>
<button id="btn">提交</button>
</div>
</div>
</body>
<script src="https://magicactivity.oss-cn-hangzhou.aliyuncs.com/activity/common_js/lib/jquery.min.js"></script>
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let {
log
} = console
Vue.config.silent = false;
Vue.config.devtools = true;
var app = new Vue({
el: '#app',
data: {},
created: function() {},
mounted: function() {
this.init()
},
methods: {
init() {
$.ajax({
url: "http://xxx.cn/user/getCheckCode",
success: function(data) {
var data = data.d
initGeetest({
// 以下配置参数来自服务端 SDK
gt: data.gtId,
challenge: data.gtTrans,
offline: data.offline == 1 ? true : false, //极验API服务器是否宕机 false：宕机
new_captcha: true,
https: false,
product: "bind" // 产品形式，包括：float，popup
}, function(captchaObj) {
captchaObj.onReady(function() {
$("#btn").click(function() {
captchaObj.verify();
})
}).onSuccess(function() {
var result = captchaObj.getValidate();
if(!result) {
log("出错啦，请先完成验证！")
} else {
log("ok")
//验证通过后的业务逻辑
//......
}
}).onError(function() {
console("出错啦，请稍后重试！")
//监听验证出错事件，提供用户或者刷新页面重试
}).onClose(function() {
//对于product为bind形式的验证。当用户关闭弹出来的验证时，会触发该回调。
});
})
}
});
}
}
})
</script> </html>
如上，在页面渲染的时候就进行验证码初始化，这样在点击按钮的时候就能快速的弹出验证码。但是，如果后端无法拿到uuid，而需要输入手机号码之类的账号进行验证，那么就需要在用户输入手机号码之后才能进行初始化了。这样的话，也就只能再获取到用户输入的手机号之后才能进行验证码初始化了。但是，在用户输入手机号码之后进行初始化，验证码弹窗弹出会有些延迟，在初始化之前进行loading就好了，初始化完成后隐藏loading，体验就会好一些。
vue中使用极验验证码（附demo）的更多相关文章
- 破解b站极验验证码
这就是极验验证码,通过拖动滑块移动拼图来验证.我们观察到点击滑块时拼图才会出现,所以我们可以在点击滑块之前截取图像,点击滑块再截取一次图像,将前后两次图像做比较就可以找到图片改动的位置.获得位置后,我 ...
- 在AspNetCore中使用极验做行为认证
先上效果图 极验的流程 极验官方文档地址 https://docs.geetest.com/install/deploy/server/csharp 简单说明一下极验的验证流程 引用官方的图片 向服务 ...
- 潭州课堂25班：Ph201805201 爬虫基础 第十课 图像处理- 极验验证码 (课堂笔记）
用 python 的 selenium 访问 https://www.huxiu.com/ 自动通过验证码 # -*- coding: utf-8 -*- # 斌彬电脑 # @Time : 20 ...
- 极验验证码破解之selenium
这一篇写完很久了,因为识别率一直很低,没办法拿出来见大家,所以一直隐藏着,今天终于可以拿出来见见阳光了. 哈喽,大家好,我是星星在线,我又来了,今天给大家带来的是极验验证码的selenium破解之法, ...
- Django中使用极验Geetest滑动验证码
一,环境部署 1.创建一个django测试项目 此处省略... 二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github ...
- 在ASP.NET MVC项目中使用极验验证(geetest)
时间 2016-03-02 18:22:37 smallerpig 原文 http://www.smallerpig.com/979.html 主题 ASP.NET MVC geetest开发体 ...
- VUE中使用geetest滑动验证码
一,准备工作:服务端部署 下载文件gt.gs: https://github.com/GeeTeam/gt3-python-sdk 需要说明的是这里的gt.js文件,它用于加载对应的验证JS库. 1. ...
- 极验验证码在php5.6.27下不显示
PHP5.6需要改php.ini 去掉;always_populate_raw_post_data = -1的 :
- vue_drf之实现极验滑动验证码
一.需求 1,场景 我们在很多登录和注册场景里,为了避免某些恶意攻击程序,我们会添加一些验证码,也就是行为验证,让我们相信现在是一个人在交互,而不是一段爬虫程序.现在市面上用的比较多的,比较流行的是极 ...
随机推荐
- echarts 饼状图调节 label和labelLine的位置
原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...
- Java中的乐观锁
1.前言 之前好几次看到有人在面经中提到了乐观锁与悲观锁,但是一本<Java Concurrency In Practice>快看完了都没有见到过这两种锁,今天终于在第15章发现了它们的踪 ...
- Python_类的继承与方法重写
1.新建子类时,括号内要传入继承的父类名 2.super()方法:自动寻找当前类的父类,并调用父类的构造函数,初始化属性值 class Cup: #构造函数,初始化属性值 def __init__(s ...
- MySQL/MariaDB数据库的服务器配置
MySQL/MariaDB数据库的服务器配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MySQL中的系统数据库 1>.mysql数据库 是mysql的核心数据库,类 ...
- C语言基础知识-运算符与表达式
C语言基础知识-运算符与表达式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常用运算符分类 1>.算术运算符 用于处理四则运算. 2>.赋值运算符 用于将表达式的 ...
- IPS检测
华为IPS语法: https://isecurity.huawei.com/sec/web/ipsmanual.do IPS漏洞查询(例如搜索反弹shell): https://isecurity.h ...
- Python学习进阶
阅读目录 一.python基础 二.python高级 三.python网络 四.python算法与数据结构 一.python基础 人生苦短,我用Python(1) 工欲善其事,必先利其器(2) pyt ...
- Alpha冲刺阶段总结
课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(十天冲刺) 团队名称:葫芦娃队 作业目标:在十天Alpha冲刺的阶段性总结. 随笔汇总:https://www.cnblogs ...
- 项目alpha冲刺-总结
作业要求 这个作业属于哪个课程 软件工程1916-W(福州大学) 这个作业要求在哪里 项目Alpha冲刺 团队名称 基于云的胜利冲锋队 项目名称 云评:高校学生成绩综合评估及可视化分析平台 这个作业的 ...
- learning java FileOutputStream
import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStrea ...