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,场景 我们在很多登录和注册场景里,为了避免某些恶意攻击程序,我们会添加一些验证码,也就是行为验证,让我们相信现在是一个人在交互,而不是一段爬虫程序.现在市面上用的比较多的,比较流行的是极 ...
随机推荐
- MySQL Install--编译安装MySQL 5.7
MySQL 编译相关选项配置和说明 [MySQL安装的根目录] -DCMAKE_INSTALL_PREFIX=/export/servers/mysql/ [MySQL数据库文件存放目录] -DMYS ...
- C 语言快速入门，21 个小项目足矣！「不走弯路就是捷径」
C 语言作为大学理工科专业的必修,是很多同学走进编程世界的第一课.那么怎样才能更好的入门 C 语言呢? 下面整理了 21 个 C 语言练手项目,从基础语法开始,逐步深入,通过一个个练手项目,让你轻松驰 ...
- 「资料分享」理解uboot要看哪些书
最开始是看的韦东山老师的视频,确实很不错,不过总感觉是不够深入扎实,还是想自己看看书,就总结搜罗下,以供参考 学习交流可以添加 微信读者交流①群 (添加微信:coderAllen) 程序员技术交流①群 ...
- Linux之RHEL7root密码破解（三）
Linux系列root密码破解第三种方式,利用修改boot分区里的开机启动顺序来修改密码,即我们进入BIOS,修改boot启动顺序为CD-ROM: 接下来按F10保存退出 选择Troubleshoot ...
- 虚拟机网络设置(NAT模式)
虚拟机网络设置(NAT模式) linux 1. 设置虚拟机网络 1.1. NAT子网设置 1.2. 网卡配置文件设置 1.3. 重启网络服务 1.4. 配置端口转发 2. 配置网络共享 预期想要搭建本 ...
- 【7-9 有重复的数据I (20 分)】【此题卡输入，需要自己写个输入挂】
参考一个博客的输入挂,先挂在此处,以备以后使用. import java.io.*; import java.util.*; import java.math.*; public class Main ...
- docker学习6-docker-compose容器集群编排
前言 实际工作中我们部署一个应用,一般不仅仅只有一个容器,可能会涉及到多个,比如用到数据库,中间件MQ,web前端和后端服务,等多个容器. 我们如果一个个去启动应用,当项目非常多时,就很难记住了,所有 ...
- 微信小程序~用户转发 onShareAppMessage
只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮,在用户点击转发按钮的时候会调用,此事件需要return一个Object,包含title和path两个字段,用于自定义转发内容 代码使用onSh ...
- expect工具实现脚本的自动交互
1 安装expect工具 expect是建立在tcl基础上的一个自动化交互套件, 在一些需要交互输入指令的场景下, 可通过脚本设置自动进行交互通信. 其交互流程是: spawn启动指定进程 -> ...
- luoguP2768： 珍珠项链(矩阵乘法优化DP)
题意:有K种珍珠,每种N颗,求长度为1~N的项链,包含K种珍珠的项链种类数.N<=1e9, K<=30; 思路:矩阵快速幂,加个1累加前缀和即可. #include<bits/std ...