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,场景 我们在很多登录和注册场景里,为了避免某些恶意攻击程序,我们会添加一些验证码,也就是行为验证,让我们相信现在是一个人在交互,而不是一段爬虫程序.现在市面上用的比较多的,比较流行的是极 ...
随机推荐
- JavaScript: 数据类型检测
由于JavaScript是门松散类型语言,定义变量时没有类型标识信息,并且在运行期可以动态更改其类型,所以一个变量的类型在运行期是不可预测的,因此,数据类型检测在开发当中就成为一个必须要了解和掌握的知 ...
- win10 提示该文件没有与之关联的应用来执行该操作
将下面代码复制进一个文本文档,然后将文本文档的txt后缀改成bat.双击运行,可以解决问题. 问题发生原因是之前通过注册表去除了桌面图标的快捷方式的小标志. /-------------------- ...
- echarts 如何设置热力图点的大小
series: [{ name: 'AQI', type: 'heatmap', coordinateSystem: 'geo', blurSize: 10, pointSize: 10, // 设置 ...
- 安装python工具
安装python编写工具 本篇幅只限于安装linux系统上. 想要实现linux程序在windows桌面上打开,需要在linux上打开X11forward和在windows上安装Xmanager ID ...
- python连接mysql服务端
python连接mysql的客户端 import pymysql # 导入模块 conn = pymysql.connect( host='127.0.0.1', # 主机模块 port=3306, ...
- A quick introduction to Google test
视频参考:Google C++ Testing GTest GMock Framework 为什么要使用 Google C++ Testing Framework? 使用这个框架有许多好理由.本文讨论 ...
- ubifs使用方法
常用命令: 查看块设备分区信息cat /proc/mtd 查看块设备信息mtdinfo /dev/mtd0 格式化mtd分区ubiformat /dev/mtd0 将mtd分区与ubi关联ubiatt ...
- 【Django2.0】python manage.py makemigrations 和 python manage.py migrate的区别
无论当我们第一次在models.py中创建类对象还是对类中的属性进行修改,我们都会使用python manage.py makemigrations 和 python manage.py migrat ...
- MYSQL中常见的时间处理
use test; select getdate() select sysdate(); select now(); select current_timestamp select current_t ...
- js元素remove
Element.prototype.remove = function() { this.parentElement.removeChild(this); };