vue中使用极验验证码的方法（附demo）

2024-11-30 19:44:26

前言：

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中使用极验验证码的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue + typescript + 极验登录验证的实现方法

此功能基于vue(v2.6.8) + typescript(v3.3.3333), 引入极验(geetest v3+)(官方api),使用其product: 'bind'模式, 页面挂载后初始化ininGeetest,点击登录按钮后先做表单验证,通过后弹出滑块框,拖动验证成功,执行登录方法. 本项目为前后端分离,所以后端部署部分,请自行参考文档操作后台接口: 开始:/public/js目录添加 jquery-1.12.3.min.js文件和 gt.js(下载)在/public/index.h
vue 实现通过手机发送短信验证码注册功能

效果如下: 代码如下: template代码: <el-main> <el-form :model="ReginForm" ref="ReginForm" :rules="rule" class="regform" label-width="0"> <h3 class="login-text">手机注册</h3> <el-form-i
vue项目中极验验证的使用代码示例

使用vue.react的项目获取数据.上传数据.注册.登陆等都是通过接口来完成的,接口很容易被人恶意调用,最容易被人恶意调用的接口就是注册.登陆类的接口,为了防止接口被恶意调用很多公司开发了出了很多的人机验证的工具,今天就来讲下极验验证在vue项目中的使用. 效果预览 1.遇到的问题在项目中任何一个页面或vue组件都有可能需要使用到极验,并且极验在初始化时需要传递一些参数,要怎么做才能做到每一个组件都能很方便的使用极验呢? 极验应该在什么时候初始化?是组件一加载就初始化还是用户点击按钮后再初始
Vue中添加手机验证码组件功能操作方法

什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 写在前面: 今天要实现的功能是在完善个人信息页面(vue)中添加手机验证码组件,当用户点击手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中: <template > <div>
基于vue的短信验证码倒计时demo

最近做了一个小的demo,分享给大家,在很多地方都能用到. 一般获取短信验证码的时候会用到这个demo: button里面包两个span标签,根据点击状态,显示不同的span,关键代码就是倒计时: <div id="example"> <button @click="send"> <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span> <span
在Vue项目中引入腾讯验证码服务的教程

什么是腾讯验证码?它长这个样子--:point_down: 最近公司项目要求引入腾讯云验证,要求是这样的: 为了防止别人恶意刷短信验证码,当用户短时间内多次获取验证码的时候,需要调用腾讯验证码,验证成功后会继续自动发送验证码 ,刚开始的我听的一脸蒙蔽,网上搜索也没有多少相关的文章,然而现在我接通啦,发现是很简单点事(或许就是因为太简单了所以没有人写2333-) 不多BB,开始吧! 先看文档的接口调用流程: (文档地址: cloud.tencent.com/document/pr- ) 总共分成几
vue生成随机验证码的示例代码

本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下: 样式自调,最终效果如图: 实现效果: 点击右边input框会自动切换,如果输入的值与字不同,则清空换一串随机数 HTML <input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma"
Vue.js实现移动端短信验证码功能

现在的短信验证码一般为4位或6位,则页面中会相应的显示4个或6个文本框,如图所示当点击注册进入到输入验证码页面的时候,第一个框自动获取光标,依次输入,不可直接输入第三个或第四个框的值, input输入框是循环出来的,代码如下: <div class="sms_input"> <div v-for="n in sms.numbers-1"><input v-if="sms.show[n-1]" disabled=&q
简单实现vue验证码60秒倒计时功能

本文实例为大家分享了vue验证码倒计时60秒的具体代码,供大家参考,具体内容如下 html <span v-show="show" @click="getCode">获取验证码</span> <span v-show="!show" class="count">{{count}} s</span> js data(){ return { show: true, count: ''
vue中使用极验验证码的方法（附demo）

前言: vue中使用极验验证码,最好是在页面渲染的时候(mounted)进行验证码的初始化,然后在初始化回调中绑定触发弹出验证码的事件.这样在点击按钮或者进行特定操作时能够快速的弹出验证码. 关键代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt
极验验证码安装部署详细介绍

随着互联网在人们生活中的地位越来越高,互联网安全问题也开始变得重要起来. 互联网黑色产业链就是互联网安全领域最强劲的敌人. 想必大家对于黑产都有所了解,那么黑产具体是怎么运作盈利的呢?大家可以查看下图哦~ 所以,保护账户安全是抗击黑产的第一步!而验证码就是确保账户安全的重要途径! 传统验证码不仅给用户带来了非常差的体验,而且在安全性上也开始抵抗不了黑客的恶意攻击!因此,安全性高.用户体验好的新型验证码才是我们需求的! 目前市场上,广受好评的"极验验证码",我觉得就很不错~ 大家可以体验
在AspNetCore中使用极验做行为认证的验证流程

极验验证极验验证是一种在计算机领域用于区分自然人和机器人的,通过简单集成的方式,为开发者提供安全.便捷的云端验证服务. 与以往传统验证码不同的是,极验通过分析用户完成拼图过程中的行为特征,通过数据分析来判断是人还是机器.用户不必面对眼花缭乱的英文字符或汉字,整个验证过程变的像游戏一样有趣. 先上效果图极验的流程极验官方文档地址 https://docs.geetest.com/install/deploy/server/csharp 简单说明一下极验的验证流程引用官方的图片 •向服务器发
vue中实现在外部调用methods的方法(推荐)

1.首先定义一个公共的vue组件: var eventHub = new Vue(); 2.在事件当前的组件中,在created中,用$on向公共的组件eventHub传递,translate是自定义的,getCardNum(data)是要在外部调用的方法; eventHub.$on('translate', function (data) { that.getCardNum(data); }); 3.最后在父组件中,注意负组件要用一个变量保存,var vm = new Vue({}): 4.在
vue中引用阿里字体图标的方法

想在vue中引用阿里的iconfont,却出现报错 ,原因是没有对应的loader处理字体文件. 解决办法 1.引入css文件 import 'font-awesome/css/font-awesome.min.css' 2.在webpack.config中配置 { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader' } 总结以上所述是小编给大家介绍的vue中引用阿里字体图标的方法,希望对大家有所帮助,如果大家有任何疑问请给我留
Vue中this.$router.push参数获取方法

传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来指定页面. 及通过路由配置的name属性访问在路由配置文件中定义参数: 通过name获取页面,传递params: 在目标页面通过this.$route.params获取参数: 2.Query 页面通过path和query传递参数,该实例中row为某行表格数据在目标页面通过this.$route
在vue中封装可复用的组件方法

本次封装的组件以toast组件为例以前使用移动端ui插件时,通过一句代码比如 $.toast( ' 需要显示的内容 ' ),从而在页面上展示这段文字,并在一定时间后消失. 现在我们也尝试自己封装toast组件. 准备工作:vue-cli脚手架工程先看一下涉及到的文件目录截图: 这次的封装主要涉及的文件是Toast.vue toast.js Hello.vue,主要思路如下: ① Toast.vue是我们要使用的toast组件: ② toast.js里面用Vue.extend()扩展一个组件构
React和Vue中监听变量变化的方法

React 中本地调试React代码的方法 yarn build 场景假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state. 16之前在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听, getDerivedStateFromProps 可以返回 null 或者一个对象,如果
vue中锚点的三种方法

第一种: router.js中添加 mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return { selector:to.hash } } } 组件: <template> <div> <ul class="list"> <li><a href="#1" rel="external nofollow"
关于在vue 中使用百度ueEditor编辑器的方法实例代码

1. 安装 npm i vue-ueditor --save-dev 2.从nodemodels 取出ueditor1_4_3_3 这整个目录,放入vue 的 static 目录 3.配置 ueditor.config.js 的 21行代码更改路径 var URL = '/static/ueditor1_4_3_3/' || getUEBasePath(); (1) serverUrl: URL + 'php/controller.php', 这里是你配置的上传内容的

vue中使用极验验证码的方法（附demo）

相关推荐

随机推荐