AJ-Captcha行为验证在vue中的使用

项目场景:

提示:这里简述项目相关背景:

项目场景:由原先的验证码校验升级为行为验证校验

使用方法

提示:参考文档:

参考文档:vue使用AJ-Captcha文档
gitee地址:AJ-Captcha


(1)在gitee仓库下载对用的版本,我这里用的是vue。
复制view/vue/src/components/verifition文件夹,到自己工程对应目录下,在登录页面插入如下代码。

请添加图片描述

请添加图片描述

(2)安装请求和加密依赖

npm install axios  crypto-js   -S

基础示例

<template><Verify@success="success" //验证成功的回调函数:mode="pop"     //调用的模式:captchaType="blockPuzzle"    //调用的类型 点选或者滑动:imgSize="{ width: '330px', height: '155px' }" //图片的大小对象ref="verify"></Verify>//mode="pop"模式<button @click="useVerify">调用验证组件</button>
</template>****: mode为"pop",使用组件需要给组件添加ref值,并且手动调用show方法 例: this.$refs.verify.show()****
****: mode为"fixed",无需添加ref值,无需调用show()方法****<script>
//引入组件
import Verify from "./../../components/verifition/Verify";
export default {name: 'app',components: {Verify}methods:{success(params){// params 返回的二次验证参数, 和登录参数一起回传给登录接口,方便后台进行二次验证},useVerify(){this.$refs.verify.show()}}
}
</script>

修改接口:

提示:引入组件后,修改接口:自己项目的components/verifition/Verify

1.先修改axios的默认请求接口,AJ-Captcha自己封装了一个,你也可以用自己的项目的。

components/verifition/Verify/api/index.js文件内

请添加图片描述


2.修改请求接口文件,配置成自己项目的接口

components/verifition/Verify/utils/axios.js文件内

请添加图片描述


2.修改接收接口文件,根据自己的项目修改code

components/verifition/Verify/Verify/VerifyPoints.vue文件内 点选验证
components/verifition/Verify/Verify/VerifySlide.vue文件内 行为验证
需要用到哪个改哪个,最好都改了
请添加图片描述


这里只是简略介绍一下,只是记录我使用的过程,更全面的介绍前往上面的文档地址或gitee查看

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/48952.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FFmpeg解码32k大分辨率出现如下错误:Picture size 32768x32768 is invalid

最近找到一张32k的jpeg图片&#xff0c;尝试用ffmpeg来进行解码&#xff0c;命令如下&#xff1a; ffmpeg -i enflame_32768-32768-420.jpg 32.yuv结果出现Picture size 32768x32768 is invalid的错误&#xff1a;

uniapp-滑块验证组件wo-slider

wo-slider是一款支持高度自定义的滑块验证组件&#xff0c;采用uniapp-vue2编写 采用touchstart、touchmove、touchend事件实现的滑块组件,支持H5、微信小程序&#xff08;其他小程序未试过&#xff0c;可自行尝试&#xff09; 可到插件市场下载尝试&#xff1a; https://ext.…

Docker搭建个人网盘、私有仓库

1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘 [rootlocalhost ~]# docker pull mysql:5.6 [rootlocalhost ~]# docker pull owncloud [rootlocalhost ~]# docker run -itd --name mysql --env MYSQL_ROOT_PASSWORD123456 mysql:5.6 [rootlocalhost ~]# doc…

【微服务】微服务调用原理及服务治理

本文通过图文结合&#xff0c;简要讲述微服务的调用原理&#xff0c;以及服务治理的相关概念。 1.微服务的调用原理 举个栗子&#xff1a;你去会所洗脚。首先&#xff0c;技师肯定要先去会所应聘&#xff0c;通过之后&#xff0c;会所会记录该技师的信息和技能&#xff0c;然后…

PHP反序列化 字符串逃逸

前言 最近在打西电的新生赛&#xff0c;有道反序列化的题卡了很久&#xff0c;今天在NSS上刷题的时候突然想到做法&#xff0c;就是利用字符串逃逸去改变题目锁死的值&#xff0c;从而实现绕过 为了研究反序列化的字符串逃逸 我们先简单的测试下 原理 <?php class escape…

带你了解SpringBoot---开启Durid 监控

文章目录 数据库操作--开启Durid 监控整合Druid 到Spring-Boot官方文档基本介绍Durid 基本使用代码实现 Durid 监控功能-SQL 监控需求:SQL 监控数据SQL 监控数据-测试页面 Durid 监控功能-Web 关联监控需求:Web 关联监控配置-Web 应用、URI 监控重启项目 Durid 监控功能-SQL 防…

SOA通信中间件常用的通信协议

摘要&#xff1a; SOA&#xff08;面向服务的架构&#xff09;的软件设计原则之一是模块化。 前言 SOA&#xff08;面向服务的架构&#xff09;的软件设计原则之一是模块化。模块化可以提高软件系统的可维护性和代码重用性&#xff0c;并且能够隔离故障。举例来说&#xff0c;…

大语言模型微调实践——LoRA 微调细节

1. 引言 近年来人工智能领域不断进步&#xff0c;大语言模型的崛起引领了自然语言处理的革命。这些参数量巨大的预训练模型&#xff0c;凭借其在大规模数据上学习到的丰富语言表示&#xff0c;为我们带来了前所未有的文本理解和生成能力。然而&#xff0c;要使这些通用模型在特…

ubuntu修改默认文件权限umask

最近在使用ubuntu的过程中发现一个问题&#xff1a; 环境是AWS EC2&#xff0c;登录用户ubuntu&#xff0c;系统默认的umask是027&#xff0c;修改/etc/profile文件中umask 027为022后&#xff0c;发现从ubuntu用户sudo su过去root用户登录查询到的umask还是027&#xff0c;而…

直播系统源码协议探索篇(二):网络套接字协议WebSocket

上一篇我们分析了直播平台的会话初始化协议SIP&#xff0c;他关乎着直播平台的实时通信和多方互动技术的实现&#xff0c;今天我们来讲另一个协议&#xff0c;叫网络套接字协议WebSocket&#xff0c;WebSocket基于TCP在客户端与服务器建立双向通信的网络协议&#xff0c;并且可…

基于swing的小区物业管理系统java jsp社区报修信息mysql源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 基于swing的小区物业管理系统 系统有1权限&#xff1…

跨境出海:如何轻松应对多账号管理

在如今的跨境电商时代&#xff0c;成功经营一个线上店铺不再仅仅需要商品和服务&#xff0c;还需要精通广告投放、营销策略等多个领域。 然而&#xff0c;老练的电商从业者知道&#xff0c;如果不重视平台账号的管理方法&#xff0c;可能会导致店铺或营销账号被关联&#xff0…

Java面向对象三大特性之多态及综合练习

1.1 多态的形式 多态是继封装、继承之后&#xff0c;面向对象的第三大特性。 多态是出现在继承或者实现关系中的。 多态体现的格式&#xff1a; 父类类型 变量名 new 子类/实现类构造器; 变量名.方法名(); 多态的前提&#xff1a;有继承关系&#xff0c;子类对象是可以赋…

【FAQ】视频云存储/安防监控EasyCVR视频汇聚平台如何通过角色权限自行分配功能模块?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、…

Linux问题--docker启动mysql时提示3306端口被占用

问题描述&#xff1a; 解决方法&#xff1a; 1.如果需要kill掉mysqld服务可以先通过 lsof -i :3306 2. 查询到占用3306的PID&#xff0c;随后使用 kill -15 PID 来kill掉mysqld服务。 最后结果

前端通信(渲染、http、缓存、异步、跨域)自用笔记

SSR/CSR&#xff1a;HTML拼接&#xff1f;网页源码&#xff1f;SEO/交互性 SSR &#xff08;server side render&#xff09;服务端渲染&#xff0c;是指由服务侧&#xff08;server side&#xff09;完成页面的DOM结构拼接&#xff0c;然后发送到浏览器&#xff0c;为其绑定状…

高压放大器在液晶弹性体中的应用研究

液晶弹性体是一种有机高分子材料&#xff0c;具有良好的可控变形性能和反应速度&#xff0c;因此在显示器、光学器件等领域得到了广泛的应用。高压放大器作为一种电子设备&#xff0c;可以将输入信号进行放大&#xff0c;从而为液晶弹性体的驱动提供足够的强度。下面安泰电子将…

【学会动态规划】摆动序列(27)

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…

Git企业开发控制理论和实操-从入门到深入(一)|为什么需要Git|Git的安装

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总https://blog.csdn.net/yu_cblog/cate…

React项目build打包后,页面空白的解决方案

问题描述&#xff1a; React项目执行 build 命令后&#xff0c;在本地服务器打开页面 是空白的&#xff0c;而且控制台报错 如下图所示 解决方法 打开根目录下的 package.json 文件&#xff0c;添加如下代码 {"name": "testproject","version"…