Vue集成阿里云做滑块验证的实践

2024-09-30 22:15:04

前言

滑块验证是比较常见的人机鉴别手段，但是自己做一时半会还真搞不出来，想想这玩意还挺难琢磨，怎么识别是否是人机呢？本文介绍Vue+阿里云验证做出这个小功能。

集成阿里云验证

前端需要什么

appkey
scene
后端配合

引入阿里云验证

public/index.html

<head>
  <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
</head>

vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      AWSC: 'AWSC',
    },
  }
}

封装一个验证组件

思路其实很简单，功能也单一。

初始化加载阿里云验证控件
可刷新验证控件

下面说两个重点

1. 初始化放在mounted，是因为涉及到Dom加载问题，created时Dom并未加载完成会报错。
2. Watch里面监听是否刷新
3.. 记得样式自定义下

下面开始写组件
NoCaptcha.vue

<template>
  <div>
    <div id="nc">

    </div>
  </div>
</template>

<script>
export default {
  // 验证成功后，服务端报错（如账号/密码等错误），需要重置滑块
  props: {
    reload: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      ic: '', // noCaptcha实例
    };
  },
  watch: {
    reload: {
      handler(newV) {
        console.log(newV);
        if (newV) {
          this.nc.reset();  // 重置滑块
        }
      },
    },
  },
  mounted() {
    this.init(); // 初始化方法
  },
  methods: {
    init() {
      const self = this;
      // 实例化nc
      // eslint-disable-next-line no-undef
      AWSC.use('nc', function(state, module) {
        // 初始化
        self.nc = module.init({
          // 您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
          appkey: 'FFFF0N00000000005CE9',
          // 您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
          scene: 'nc_login',
          // 滑块渲染的DOM id。
          renderTo: 'nc',
          // 您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
          success: function(data) {
            data.scene = 'nc_login'
            self.$emit('slideCallback', data);
          },
          // 滑动验证失败时触发该回调参数。
          fail: function(failCode) {
            this.$message(`滑动验证失败,失败编号${failCode}`);
            console.log(failCode);
          },
          // 验证码加载出现异常时触发该回调参数。
          error: function(errorCode) {
            this.$message(`验证码加载异常,异常编号${errorCode}`);
            console.log(errorCode);
            self.$emit('slideCallback', {cls:false});
          },
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#nc {
  width: 100%;
  display: contents;
}
/deep/.nc-container #nc_1_wrapper {
  width: 100%;
  height: 36px;
  line-height: 36px;
  #nc_1_n1t,
  #nc_1__bg,
  #nc_1_n1z,
  #nc_1__scale_text,
  .nc-lang-cnt {
    height: 36px;
    line-height: 36px;
  }
}
</style>

使用组件

需要考虑的问题

验证控件没加载出来的情况怎么办？（例如IE不支持）
运维人员不需要
有用户名密码，再去验证自动调用登录事件

很简单验证控件加载失败会有个回调，让后端加个参数，没加载验证组件，让他知道予以通行就好

<template>
  // 其他代码略
  <NoCaptcha @slideCallback="finishSlide" :reload="reload" />
</template>

<script>
// 其他代码略
import NoCaptcha from '@/components/NoCaptch.vue';

data() {
  return {
    reload: false,
  }
},
method: {
  // 点击登录
  login() {
    // 验证略
    this.reload = false; // 验证通过后，重置滑块设置为false
    // 后端登录接口
    xx()
    .then(() => {
       // 登录成功代码略
    })
    .catch((err) => {
       // 其他代码略
       this.reload = true; // 需要重置滑块
       console.log(err || '该用户无菜单权限，请联系管理员'); // 错误提示
    });
  },
  // 完成滑动
  finishSlide(data) {
    // 按需使用返回值
    console.log('会话ID', data.sessionId)
    console.log('签名串', data.sig)
    console.log('滑块请求的token', data.token)
    
     if (data.cls === false) {//验证加载失败
        this.loginForm.cls = false
      }

      if (data.sessionId) {//非人机操作
        this.loginForm.scene = data.scene
        this.loginForm.ncToken = data.token
        this.loginForm.sig = data.sig
        this.loginForm.sessionId = data.sessionId
        delete this.loginForm.cls
      }

      if (this.loginForm.username && this.loginForm.password) {//填过用户名密码
        this.login()
      }
  },
}
</script>

思考

如果这个控件让前端自己做或者后端自己做，能实现吗？
这个滑动验证机制明白吗？
这个能实现绝对安全吗？

PS:我思考了一下，前端需要引入阿里云的sdk，这个sdk会收集用户数据。然后滑块滑动完成后会将这些数据进行分析判断是否为人机。当然这算法是人家的机密，毕竟要赚钱的嘛。其实这个滑动算法是可以模拟的，也不是绝对安全，只是增加了一个步骤而已。

到此这篇关于Vue集成阿里云做滑块验证的实践的文章就介绍到这了,更多相关Vue 滑块验证内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

使用konva和vue-konva库实现拖拽滑块验证功能

1. 在vue项目中安装konva和vue-konva库 npm install konva vue-konva --save-dev 2. 引入vue-konva库 import VueKonva from 'vue-konva': Vue.use(VueKonva) 3. 创建单独的滑块验证组件 Captcha.vue,在相应的页面中引入使用即可 <template> <v-stage :config="Config.stage"> <v-layer
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)

vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前拖动后代码引用的css与js都是线上的将代码全部复制到一个html中可以直接打开,极其简单. 来分析一下代码底色div上放了一个变色div再放一个提示字的div最后加一个滑块div 给滑块div绑定鼠标移动事件 <!DOCTYPE html> <html> <head> <meta charset="
vue-cli 自定义指令directive 添加验证滑块示例

vue项目注册登录页面遇到了一个需要滑块的功能,网上看了很多插件发现都不太好用,于是自己写了一个插件供大家参考: 用的是vue的自定义指令direcive,只需要在需要的组件里放入对应的标签嵌套即可: template: <template> <div> <div class="movebox" > <div class="movego"></div> <div class="txt&quo
VUE接入腾讯验证码功能（滑块验证）备忘

最近在用VUE做个简单的用户系统,登录注册需要验证码,想找个那种拖动的,找geetest居然已经不面向小客户了(或者说只有收费套餐). 腾讯防水墙的验证码免费使用,有2000/小时的免费额度,对于小网站完全足够了,阿里应该也有,我看discuz有插件直接能用,但没找到入口腾讯的在这,和腾讯云无关:https://007.qq.com/captcha/#/ 申请api很简单,QQ登录,创建应用,ID和secretkey就出来了,直接在文档里展示,赞一个. vue有人做了封装了geetest+腾
Vue3+Vue-cli4项目中使用腾讯滑块验证码的方法

简介: 滑块验证码相比于传统的图片验证码具有以下优点: 验证码的具体验证不需要服务端去验证,服务端只需要核验验证结果即可. 验证码的实现不需要我们去了解,也不需要我们去具体实现. 滑块验证码的安全程度相比于传统验证码高不少. ... 由于网络上和腾讯api文档中缺少关于vue3中组合式api怎么应用腾讯的滑块验证码,所以出此教程.本人也非vue大佬,对vue的理解也不过停留在初级使用的程度上,有错误之处,敬请指出. 开始: 首先,我们需要去腾讯云申请一个图形验证的api,使用场景中选择自己的使用
vue实现简单滑块验证

本文实例为大家分享了Vue滑块验证的实现,代码如下 <template> <div class="drag" ref="dragDiv"> <div class="drag_bg"></div> <div class="drag_text">{{confirmWords}}</div> <div ref="moveDiv" @mo
vue实现移动滑块验证

本文实例为大家分享了vue实现移动滑块验证的具体代码,供大家参考,具体内容如下记录一下今天的学习内容 <div class="solidBox" :class="{'solidBox1': validation}"> <div @mousedown="solidStar" class="solid" :class="{'solid1': validation}"></
vue实现登录时滑块验证

本文实例为大家分享了vue实现登录时滑块验证的具体代码,供大家参考,具体内容如下 1.效果图 2. 新建 SliderCheck.vue组件 <template>  <div class="slider-check-box"> <div class="slider-check" :class="rangeStatus ? 'success' : ''">
Vue集成阿里云做滑块验证的实践

目录前言集成阿里云验证前端需要什么引入阿里云验证封装一个验证组件使用组件思考前言滑块验证是比较常见的人机鉴别手段,但是自己做一时半会还真搞不出来,想想这玩意还挺难琢磨,怎么识别是否是人机呢?本文介绍Vue+阿里云验证做出这个小功能. 集成阿里云验证前端需要什么 appkey scene 后端配合引入阿里云验证 public/index.html <head> <script src="https://g.alicdn.com/AWSC/AWSC/aws
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法

我测试过很多遍,想要通过a标签的形式来直接点击url下载文件并重命名但是都失败了,最终只能下载却不能重命名所以换了java后台来修改名字.以下代码我做的网页是点击文件直接下载直接下载下来了,一开始的文件名是上传到oss时以id命名的名字,现在下载的时候想改名,遇到了问题,所以写了这篇博客首先是后台代码 /** * 附件下载 * <p> * * @param param * @return ResponseDTO */ @PostMapping(value = "/downl
关于springboot集成阿里云短信的问题

目录 1.获取签名与模板 2.编写模板与签名的枚举类 3.配置类 4.测试类 1.获取签名与模板进入阿里云平台,进入短信服务模块,在以下位置添加签名和模板(格式一定按照要求填写审批的比较严格) 2.编写模板与签名的枚举类在上文获取模板与签名成功后,并作为常量放在枚举类中. public enum DySmsEnum { /** * 本类此处需要修改(短信模板编码,签名,参数) */ LOGIN_TEMPLATE_CODE("SMS_187570276", "自定义软
Springboot集成阿里云OSS上传文件系统教程

第一步:开通阿里云OSS服务,创建Bucket,获取id和密钥第二步:根据官方文档编写上传代码 1.新建maven项目添加依赖:  <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> </dependency>  <
SpringBoot集成阿里云OSS图片上传

简述最近做的公司项目,图片比较多,不想给其存储到自己服务器上,就买了阿里云的OSS服务器来哦进行存储,其实集成第三方平台,一般没什么难度,当然,你要仔细看对方的API文档,这篇主要说一下个人集成OSS的过程步骤 1.pom.xml中添加OSS的SDK  <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-os
SpringBoot实现阿里云短信接口对接的示例代码

前言公司最近项目需要一个手机验证码的功能,任务确定后,倍感亚历山大,以为和第三方对接的都好麻烦,查阿里的API.网上大神写的博客,各种查之后才发现,简单的一塌糊涂,这里想说个问题,不知道其他的攻城狮们是不是和我一样的心里,刚接触个没做过的任务时,会一脸懵里的着急,无从下手的感觉,后来会了,就觉得简单的一*,在这里我说一下自己的体会,遇到任何难点,先理思路.任务拆分.逐个查资料,其实一套下来,就不会那种一脸懵逼的干着急... 所需条件 1.阿里云账户 2.开通云通讯中的短信服务 3.申请短信签名
Python 网易易盾滑块验证功能的实现

目录操作环境分析解决方案使用selenium请求url,并触发滑块验证获取验证图片并计算滑块距离生成滑动轨迹滑动模块效果资源下载记一次网易易盾滑块验证分析并通过操作环境 win10 . mac Python3.9 selenium.PIL.numpy.scipy.matplotlib 分析网易易盾滑块验证,就长下面这个样子具体验证原理有兴趣的可自行查询官方文档:网易易盾开发文档话不多少,借助之前写阿里云盾滑块和极验滑块的经验,直接上代码,详细可参考:[python3
阿里云盘万能邀请码免费获取

阿里云网盘注册邀请码怎么免费获取?为了让更多的小伙伴也体验体验,特分享一批阿里云盘邀请码送给大家,下面为大家分享一下获取阿里云盘邀请码的方法. 软件介绍根据阿里云盘官网介绍,其组建了一支由智能算法.智能存储.新型网络.AloT. 网络安全等领域科学家.工程师混编的创新产品团队.即日起,对外诚邀个人云种子用户参与共创,一起探索为个人用户提供"更快"."更安全". "更流畅" ."更智能"的云服务. 阿里云盘正式开始安卓和iOS
阿里云盘万能邀请码注册获取教程

阿里云网盘注册邀请码怎么注册登陆?为了让更多的小伙伴也体验体验,之前也特分享了一批阿里云盘邀请码送给大家,下面为大家分享一下获取阿里云盘邀请码注册登录网盘的方法. 软件介绍根据阿里云盘官网介绍,其组建了一支由智能算法.智能存储.新型网络.AloT. 网络安全等领域科学家.工程师混编的创新产品团队.即日起,对外诚邀个人云种子用户参与共创,一起探索为个人用户提供"更快"."更安全". "更流畅" ."更智能"的云服务. 阿里云盘