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高可用架构应该考虑什么? 你认为应该如何设计？
一.MySQL高可用架构应该考虑什么? 对业务的了解,需要考虑业务对数据库一致性要求的敏感程度,切换过程中是否有事务会丢失 对于基础设施的了解,需要了解基础设施的高可用的架构.例如 单网线,单电源等情 ...
- JSON的Go解析
JSON(Javascript Object Notation)是一种轻量级的数据交换语言,以文字为基础,具有自我描述性且易于让人阅读.尽管JSON是Javascript的一个子集,但JSON是独立于 ...
- Redis开发与运维学习笔记
<Redis开发与运维>读书笔记 一.初始Redis 1.Redis特性与优点 速度快.redis所有数据都存放于内存:是用C语言实现,更加贴近硬件:使用了单线程架构,避免了多线程竞争 ...
- jquery 表单对象属性筛选选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- 万众期待的kintone开发账号免费开放申请啦！
亲爱的小伙伴们,等了很久很久的kintone开发账号终于可以免费申请使用了! 有人想问了,什么是kintone? kintone是指无需开发知识,即可根据公司业务轻松创建系统的Cybozu的云服务. ...
- django-带参数路由
路由urls.py from django.conf.urls import url from goods.views import IndexView, DetailView, ListView u ...
- MySQL备份的三中方式
一.备份的目的 做灾难恢复:对损坏的数据进行恢复和还原需求改变:因需求改变而需要把数据还原到改变以前测试:测试新功能是否可用 二.备份需要考虑的问题 可以容忍丢失多长时间的数据:恢复数据要在多长时间内 ...
- LeetCode 1059. All Paths from Source Lead to Destination
原题链接在这里:https://leetcode.com/problems/all-paths-from-source-lead-to-destination/ 题目: Given the edges ...
- 事件类型（onfocus和onblur）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- codeforces1276A As Simple as One and Two
C.As Simple as One and Two A. As Simple as One and Two time limit per test 3 seconds memory limit pe ...