【VUE】vue+Verify实现防刷验证码验证

最新推荐文章于 2024-05-29 00:11:48 发布
最新推荐文章于 2024-05-29 00:11:48 发布
阅读量7.5k 收藏 13
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ercyao/article/details/83015611
版权

因为公司要做防刷，所以要验证码功能，于是又在网上找，看了一圈都是需要收费的，最后找了一个纯前端的开源，免费的验证码插件Verify，Verify的github地址: https://github.com/Hibear/verify，但是毕竟不需要后端配合，对安全性要求不高的可以安利一下

验证码效果图

验证码图片

Verify使用

Verify的资源包下载，注意使用时还要引入下载包中的images、fonts文件夹。

<!-- index.html -->
<head>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/verify.min.js"></script>
</head>

<!-- main.js -->
import './assets/css/verify.css'   //验证码

为了方便使用，抽出来做组件mpanel.vue，并根据自己的需求改了验证码的样式

<!-- mpanel.vue -->
<template>
    <transition name="fade">
        <div class="modal-box">
            <div class="modal-content">
                <!--头部-->
                <div class="modal-header">
                    <p class="title">验证码验证</p>
                    <a @click="onCancel"
                       class="modal-close"
                       href="javascript:void(0)">
                        <x-icon type="ios-close"
                                size="30"></x-icon>
                    </a>
                </div>
                <!--内容区域-->
                <div class="modal-body">
                    <div id="mpanel"
                         ref="mpanel">
                    </div>
                  <div id="check-btn" class="verify-btn">确定</div>
                </div>
                <!--尾部,操作按钮  -->
                <!-- <div class="modal-footer">
                </div> -->
            </div>
        </div>
    </transition>

</template>

<script>
import { XDialog, TransferDomDirective as TransferDom } from 'vux'
export default {
    name: 'mpanel',
    data() {
        return {
            path: null
        }
    },
    mounted() {
        this.initMpanel();
    },
    methods: {
        onCancel() {
            this.$emit('close');
        },
        // 提示框
        showToolTip(text, timeout = 2000) {
            this.$vux.toast.text(text);
        },
        // 验证
        initMpanel() {
            this.codeVerify()  //运算验证码
            // this.slideVerify()  //拼图验证码
            // this.pointsVerify()  //拼字验证码
        },
        // 运算验证码
        codeVerify() {           // https://veui.net/document/index
            let _this = this
            $('#mpanel').codeVerify({
                type: 2,
                figure: 100,
                arith: 0,
                width: '100%',
                height: '50px',
                fontSize: '30px',
                btnId: 'check-btn',
                ready: function () {
                },
                success: function () {
                    _this.showToolTip("验证成功！")
                    // 向父组件传值
                    _this.$emit('success');
                },
                error: function () {
                    _this.showToolTip("验证码不匹配！")
                }
            });
        },
        // 拼图验证码
        slideVerify() {           // https://veui.net/document/index
            let _this = this
            $('#mpanel').slideVerify({
                type: 2,
                mode: 'pop',
                vOffset: 5,
                vSpace: 5,
                explain: '向右滑动完成验证',
                imgUrl: 'http://txh-cdn.96qbhy.com/',
                imgName: ['20181010170653M58v1KlH.jpg', '20181010170719McH7EkZK.jpg'],
                imgSize: {
                    width: '100%',
                    height: '200px',
                },
                blockSize: {
                    width: '40px',
                    height: '40px',
                },
                barSize: {
                    width: '100%',
                    height: '40px',
                },
                ready: function () {
                },
                success: function () {
                    _this.showToolTip("验证成功！")
                    // 向父组件传值
                    _this.$emit('success');
                },
                error: function () {
                    _this.showToolTip("验证码不匹配！")
                }
            });
        },
        // 拼字验证码
        pointsVerify() {           // https://veui.net/document/index
            let _this = this
            $('#mpanel').pointsVerify({
                mode: 'pop',
                defaultNum: 4,
                checkNum: 2,
                vSpace: 5,
                imgUrl: 'http://txh-cdn.96qbhy.com/',
                imgName: ['20181010170653M58v1KlH.jpg', '20181010170719McH7EkZK.jpg'],
                imgSize: {
                    width: '100%',
                    height: '200px',
                },
                barSize: {
                    width: '100%',
                    height: '40px',
                },
                ready: function () {
                },
                success: function () {
                    _this.showToolTip("验证成功！")
                    // 向父组件传值
                    _this.$emit('success');
                },
                error: function () {
                    _this.showToolTip("验证码不匹配！")
                }
            });
        }
    }
}
</script>
<style scoped>
.modal-box {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.modal-content {
  position: relative;
  width: 300px;
  /* background: #fff; */
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 13px;
}
.modal-header {
  text-align: center;
  border: 0;
}
.modal-header .title {
  font-size: 20px;
  font-weight: 550;
}
.modal-body{
    margin-top: -25px;
}
.modal-close {
  position: absolute;
  right: -10px;
  top: -15px;
  color: #999494;
  font-size: 14px;
}

.fade-enter-active {
  animation: fade-in 0.5s;
}
.fade-leave-active {
  animation: fade-in 0.5s reverse;
}
@keyframes fade-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

验证码组件引用

<!-- home.vue -->
</template>
...
    <!-- 验证码 start -->
    <mpanel v-if="mpanelShow"
            @close="mpanelShow = false"
            @success="onMpanelSuccess"></mpanel>
    <!-- 验证码 end -->
...
</template>
<script>
import Mpanel from 'Components/mpanel/mpanel'   //验证码
export default {
  data() {
    return {
      mpanelShow: false, //验证码是否显示
    }
  },
  methods: {
    // 是否要验证
    checkVerifyCodeApi(options) {
      checkVerifyCode(options).then(res => {
        if (res.data && res.data.code === 0) {
          //不要验证执行代码
        } else { 
          //需要验证码,弹窗显示
          this.mpanelShow = true;
        }
      })
    },
    // 验证通过
    onMpanelSuccess() {
      this.mpanelShow = false;
      //执行代码
    }
  }
}
北极星丶超帅的
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
推荐开源项目：Vue2-Verify - 简洁高效的前端验证库
gitblog_00067的博客
03-27 452
推荐开源项目：Vue2-Verify - 简洁高效的前端验证库 项目地址:https://gitcode.com/mizuka-wu/vue2-verify 项目简介 Vue2-Verify 是一个基于 Vue.js 2.x 的轻量级验证组件库，旨在帮助开发者快速实现表单验证功能，提高开发效率并提升用户体验。该项目由 Mizuka-Wu 开发和维护，并且社区活跃，不断进行优化与更新。 技术分析 V...
img显示本地图片_vue图片滑动验证
weixin_39983554的博客
12-01 366
vue图片滑动验证读完这篇文章，可以掌握如何实现Vue的图片滑动验证，以及滑动验证的自定义显示的图片背景自定义图片之后的滑动验证背景首先安装插件支持(先简要概述下组件参数的配置信息和配置位置)npm install vue-puzzle-vcodehtml代码部分<Vcode :show="isShow" @success="success"/>其中@success是验证成功...
防刷发送短信验证码接口的五种简单好用方法绝对够用
最新发布
itScholar001的博客
05-29 1847
1.前端调用发送短信接口前，通过密钥（1234abcd）与加密算法，将miyao1234+（16位英文字母与数字字符串） 例如miyao1234wgly1noKSXg47Mn6 进行加密。5.如果解密后包含约定字符串miyao1234，则通过校验，此时注意⚠️，需要将此校验码存入redis，下次如果有相同校验码 则提示重复。前端增加图形验证码，点击发送按钮后增加60s倒计时，60s后才可以再次点击。3.后端接收到后对校验码进行解密，如果解密失败，提示失败。2.前端调用发送短信接口时，将校验码传递给后端。
基于 vue 的验证码组件
Start2019
12-05 3665
登录页面有个验证码，暂时没用到后台，在网上找了两个博客，记录一下。 一、直接写（参考-UIEngineer） 这个样式比较简单，直接在需要验证码的地方添加就行了。如果这个页面比较复杂，用组件会比较好。 <template> <div class="join_formitem"> <label class="enquiry">验证码&lt...
vue使用vue2-verify(图形验证码)
GuAng
07-27 2227
1.安装 npm install vue2-verify 2.使用 </template> </div> <Verify ref="loginVerifyRef" :type="2" @error="error" :showButton="false" @success="success" :width="'100
【sprintboot+vue】前后端分离模式下的登录验证码后端验证实现记录
coralime的博客
03-10 2925
【项目背景】 考虑登录时的验证安全，需要添加验证码验证，纯前端实现的验证码其实没有真正意义上做到安全验证的要求，简单一个网页爬虫就能获取到前端生成的验证码，所以应该由后台生成验证码，并由后台完成校验过程。 【实现思路】 登录页面初始化的时候，向后台请求返回base64格式的图片流，渲染到验证码控件上，前端用户输入验证码提交到后台进行对比校验。 【实现过程】 Spring Boot 后端代码 #1#-> 先创建一个验证码图片生成类VertifyCodeUtils.java packag.
vue 图形验证vue2-verify
weixin_44402520的博客
12-05 6167
1、vue2-verify支持的验证码类型 常规验证码picture 常规的验证码由数字和字母构成，用户输入不区分大小写，可变形成汉字验证。 运算验证码compute 运算验证码主要通过给出数字的加减乘运算，填写运算结果进行验证。 滑动验证码slide 通过简单的滑动即可完成验证，应用与移动端体验很好。 拼图验证码puzzle 拼图。 选字验证码pick 通过按顺序点选图中的汉字完成验证，ie浏览...
vue2-verify:vue的验证码插件
05-12
vue2-verify 基于 的验证码项目 项目验证码类型 支持的验证码类型 常规验证码picture 常规的验证码由数字和字母构成，用户输入不区分大小写，可变形成汉字验证。 运算验证码compute 运算验证码主要通过给出数字的加...
vue3.0实现点击切换验证码(组件)及校验
01-22
本文实例为大家分享了vue3.0实现点击切换验证码(组件)及校验的具体代码，供大家参考，具体内容如下 先看效果 父组件 验证码 placeholder=输入验证码 v-model=verify > 点击更换
vue滑块验证，图片验证，图片旋转验证，滑动验证
04-26
实现这个功能，可以使用像`vue-slide Verify`这样的库，或者自定义一个Vue组件，包括滑块元素、拖动事件监听、比较滑动结束位置与目标位置来判断验证是否成功。 2. **图片验证**：图片验证通常涉及显示一组随机的...
详解vue表单验证组件 v-verify-plugin
08-30
总的来说，`v-verify-plugin` 提供了简洁的API和灵活的自定义验证规则，使得在Vue应用中实现表单验证变得更加简单。它可以有效地帮助开发者处理用户输入的验证，提升用户体验，并减少潜在的错误。通过学习和熟练使用...
vue3-captcha（vue3行为验证码）
06-20
8. **插件API**：Vue3-Captcha作为一个插件，会提供安装方法和配置选项，允许开发者自定义验证码的样式、行为和验证规则。 9. **测试和调试**：Vue3-Captcha的开发过程中，可能使用Vue Test Utils和Jest等工具进行...
vue2-verify-弱弱的前端验证
一只小辣鸡的开发之路
08-23 3751
vue2-verfiy一、介绍二、官方地址三、使用方法 一、介绍 vue2-verify的一款纯前端验证码组件，该项目基于https://github.com/Hibear/verify，验证支持如下类型： 常规验证码picture 常规的验证码由数字和字母构成，输入不区分大小写，可变形成汉字验证。 运算验证码compute 运算验证码主要通过给出数字的加减乘运算，填写运算结果进行验证。 滑动验证码slide 通过简单的滑动即可完成验证，应用与移动端体验很好。 拼图验证码puzzle 拼图。 选字验证码
vue2：图文验证码，拿来就用vue2-verify
jieweiwujie的博客
12-26 570
【代码】vue2：图文验证码，拿来就用vue2-verify。
vue-滑块验证
wuxiaoying888的博客
04-14 3248
效果图： 下载依赖： "vue-monoplasty-slide-verify": "^1.1.3", 引入滑块组件 使用到的有如下属性：宽度、高度、误差、提示文字、img背景。 查看源码可以看到还支持更多的属性，但个人认为，在日常开发中，这几个属性够用了，有需要的可自行了解更多属性。 使用到的方法：again（重试）、fulfilled（刷新）、suceess（校验成功）、fail（校验失败）、refresh（手动触发刷新小图标） 其中该组件还提供了重置操作： 个人组件源...
vue使用vue2-verify实现前端验证码（滑动，拼图，数字，选字验证）
qq_37816525的博客
10-15 1万+
先附上插件github地址 vue2-verify 先说一下弊端，使用拼图模式时，只能使用外链图片，使用本地图片时怎么写都不对，加载不到资源，如果有人知道怎么写可以留言给我，其他模式还是很好用的，在移动端兼容也是不错的，如果要使用拼图验证可以看我另一篇博文 https://blog.csdn.net/qq_37816525/article/details/102560656 安装 npm i vu...
vue滑动插件：vue-drag-verify
milli236的博客
08-02 1万+
滑动验证：https://github.com/AshleyLv/vue-drag-verify   插件应用--安装 npm install vue-drag-verify --save html &lt;drag-verify :width="width" :height="height" ...
Vue插件之滑动验证，基于canvas，无其他依赖，兼容IE
热门推荐
monoplasty的博客
12-15 3万+
目录预览安装使用方法参数说明props传参（均为可选）自定义回调函数注意事项 预览 目前仅前端实现 github文档地址： https://github.com/monoplasty/vue-monoplasty-slide-verify 安装 npm install --save vue-monoplasty-slide-verify 使用方法 // main.js import Vue f......
vue表单验证组件 v-verify-plugin
setjava的博客
07-30 3052
verify 版本已更新至2.0 说明 github:https://github.com/liuyinglong/verify npm:https://www.npmjs.com/package/vue-verify-plugin verify install npm install vue-verify-plugin use
vue+flask+mysql实现登录注册完整代码
05-13
很抱歉，我作为AI语言模型无法提供完整的代码。但是，我可以给你提供一些思路和代码片段。 前端部分： 1. 注册页面代码： ``` <template> <div> <h2>注册</h2> <form> <div> <label>用户名：</label> <input type="text" v-model="username"> </div> <div> <label>密码：</label> <input type="password" v-model="password"> </div> <div> <label>确认密码：</label> <input type="password" v-model="confirmPassword"> </div> <button type="submit" @click.prevent="register">注册</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '', confirmPassword: '' }; }, methods: { register() { // 发送注册请求 this.$http.post('/api/register', { username: this.username, password: this.password }).then(response => { if (response.data.code === 0) { alert('注册成功！'); this.$router.push('/login'); } else { alert(response.data.msg); } }).catch(error => { console.log(error); }); } } }; </script> ``` 2. 登录页面代码： ``` <template> <div> <h2>登录</h2> <form> <div> <label>用户名：</label> <input type="text" v-model="username"> </div> <div> <label>密码：</label> <input type="password" v-model="password"> </div> <button type="submit" @click.prevent="login">登录</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' }; }, methods: { login() { // 发送登录请求 this.$http.post('/api/login', { username: this.username, password: this.password }).then(response => { if (response.data.code === 0) { localStorage.setItem('token', response.data.token); alert('登录成功！'); this.$router.push('/'); } else { alert(response.data.msg); } }).catch(error => { console.log(error); }); } } }; </script> ``` 后端部分： 1. Flask 实现注册： ``` @app.route('/api/register', methods=['POST']) def register(): username = request.form.get('username') password = request.form.get('password') # 判断用户名是否已经被注册 user = User.query.filter_by(username=username).first() if user: return jsonify({'code': 1, 'msg': '用户名已存在！'}) # 插入新用户 user = User(username=username, password=generate_password_hash(password)) db.session.add(user) db.session.commit() return jsonify({'code': 0, 'msg': '注册成功！'}) ``` 2. Flask 实现登录： ``` @app.route('/api/login', methods=['POST']) def login(): username = request.form.get('username') password = request.form.get('password') # 判断用户是否存在 user = User.query.filter_by(username=username).first() if not user: return jsonify({'code': 1, 'msg': '用户名不存在！'}) # 验证密码是否正确 if not check_password_hash(user.password, password): return jsonify({'code': 2, 'msg': '密码错误！'}) # 生成 token token = generate_token(user.id) return jsonify({'code': 0, 'msg': '登录成功！', 'token': token}) ``` 3. Flask 实现 token 认证： ``` from flask_httpauth import HTTPTokenAuth auth = HTTPTokenAuth(scheme='Bearer') @auth.verify_token def verify_token(token): try: data = jwt.decode(token, app.config['SECRET_KEY'], algorithms=['HS256']) g.user_id = data['id'] return True except: return False @app.route('/api/user_info') @auth.login_required def user_info(): user = User.query.filter_by(id=g.user_id).first() return jsonify({'username': user.username}) ``` 其中，`generate_token` 函数和 `check_password_hash` 函数需要自行实现。 数据库部分： ``` CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(50) NOT NULL, `password` varchar(100) NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `username` (`username`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ``` 以上代码仅供参考，实际应用还需要根据具体需求做出相应修改和完善。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值