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

news2024/10/5 14:19:48

项目场景:

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

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

使用方法

提示:参考文档:

参考文档: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.coloradmin.cn/o/894191.html

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

相关文章

【Apollo】Apollo版本变迁里程碑

特点与改进 概述里程碑6.0版本特点及改进7.0版本特点及改进8.0版本特点及改进代码差异 主页传送门&#xff1a;&#x1f4c0; 传送 概述 Apollo (阿波罗)是一个开放的、完整的、安全的平台&#xff0c;将帮助汽车行业及自动驾驶领域的合作伙伴结合车辆和硬件系统&#xff0c;快…

python3ide手机安卓版下载,python3下载手机安卓版

本篇文章给大家谈谈python3ide手机安卓版下载&#xff0c;以及python3下载手机安卓版&#xff0c;希望对各位有所帮助&#xff0c;不要忘了收藏本站喔。 python3是一个在Android上运行Python3脚本引擎&#xff0c;python3整合了Python3解释器、Console、编辑器和SL4A库PHP与PYT…

智慧城市能实现嘛?数字孪生又在其中扮演什么角色?

数字孪生智慧城市是将数字孪生技术与城市智能化相结合的新兴概念&#xff0c;旨在通过实时数字模拟城市运行&#xff0c;优化城市管理与服务&#xff0c;创造更智能、高效、可持续的城市环境。 在智慧城市中&#xff0c;数字孪生技术可以实时收集、分析城市各个方面的数据&…

如何安装合适的显卡驱动,如何安装合适的驱动

大家好&#xff0c;小编为大家解答如何安装合适的松紧裤腰大房子呢的问题。很多人还不知道如何安装合适的显卡驱动版本&#xff0c;现在让我们一起来看看吧&#xff01; 1.准备好安装包 1&#xff09;上python官网下载python运行环境&#xff08;Download Python | Python.org&…

seaborn color palette 调色板颜色图

Here is a list of the Color Brewer palettes, with their names for easy reference: sns.lineplot(datanormal_df, palettesns.color_palette(paletteSet1, n_colors1))

KaiwuDB CTO 魏可伟:回归用户本位,打造“小而全”的数据库

8月16日&#xff0c;KaiwuDB 受邀亮相第十四届中国数据库技术大会 DTCC 2023。KaiwuDB CTO 魏可伟接受大会主办方的采访&#xff0c;双方共同围绕“数据库架构演进、内核引擎设计以及不同技术路线”展开深度探讨。 以下是采访的部分实录 ↓↓↓ 40 多年前&#xff0c;企业的数…

[mars3d 打包]vue3+vite,打包后mars3d找不到

前提 &#xff1a; vue3vite开发框架&#xff1b;使用 官网 方式3获取sdk,引入mars3d; 问题&#xff1a;开发时一切正常&#xff0c;打包之后&#xff0c;页面白屏&#xff0c;没有渲染&#xff1b; 相关的mars3d的相关方法会报错&#xff1b;但是mars3d的打印日志是有的&…

飞凌嵌入式邀您共聚2023深圳国际电子展(elexcon 2023)

8月23~25日&#xff0c;Elexcon 2023深圳国际电子展将在深圳会展中心&#xff08;福田&#xff09;举行&#xff0c;届时飞凌嵌入式将携多款重量级产品及热门行业解决方案亮相&#xff0c;展位号1Z55。飞凌嵌入式将聚焦5G、人工智能、智慧交通、智慧医疗、智慧电力、工业物联网…

PDF怎么转换成PPT?这个工具太好用了

pdf和ppt是常用的文档格式&#xff0c;只是功能不同&#xff0c;应用场景略有不同。pdf安全稳妥&#xff0c;更加适合文件阅读、传输和保存&#xff0c;ppt则多用于工作总结、产品宣传&#xff0c;更加生动形象&#xff0c;容易理解。有时候我们需要把pdf转换成ppt&#xff0c;…

PSP - 基于扩散生成模型预测蛋白质结构 EigenFold 算法与环境配置

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132357976 Paper: EigenFold: Generative Protein Structure Prediction with Diffusion Models EigenFold 是用于蛋白质结构预测的扩散生成模型…

Windows系统提权(二)

Windows系统服务漏洞 Always Install Elevated-总是以高权限安装 AlwaysInstallElevated是一个策略设置&#xff0c;当在系统中使用Windows Installer安装任何程序时&#xff0c;该参数允许非特权用户以system权限运行MSI文件。如果目标系统上启用了这一设置&#xff0c;我们…

Web菜鸟入门教程 - Swagger实现自动生成文档

如果是一个人把啥都开发了&#xff0c;那用不到Swagger-UI&#xff0c;但一般情况是前后端分离的&#xff0c;所以就需要告诉前端开发人员都有哪些接口&#xff0c;传入什么参数&#xff0c;怎么调用&#xff0c;返回什么。有了Swagger-UI就能把这部分文档编写的业务给省去了。…

抓洞指南- drupal1 代码执行 (CVE-2018-7600)

一个非常憨逼的事情&#xff0c;就是不知道flag在哪&#xff0c;然后突发奇想&#xff0c;既然把指令都能执行命令&#xff0c;如果直接ls /tmp,然后数据就拿到手了。这地方卡了我很久&#xff0c;看了很多教程感觉都不一样。 POST /user/register?element_parentsaccount/ma…

问道管理:沪指震荡微跌,保险、银行板块拉升,环保板块表现活跃

18日早盘&#xff0c;两市股指盘中震动回落&#xff0c;沪指翻绿&#xff0c;深成指、创业板指均走低&#xff1b;北向资金继续大幅流出&#xff0c;半日净卖出近50亿元。 截至午间收盘&#xff0c;沪指微跌0.06%报3161.97点&#xff0c;深成指跌0.69%&#xff0c;创业板指跌0.…

09 - 网络通信优化之序列化:避免使用Java序列化

当前大部分后端服务都是基于微服务架构实现的。服务按照业务划分被拆分&#xff0c;实现了服务的解偶&#xff0c;但同时也带来了新的问题&#xff0c;不同业务之间通信需要通过接口实现调用。两个服务之间要共享一个数据对象&#xff0c;就需要从对象转换成二进制流&#xff0…

216、仿真-基于51单片机温度烟雾人体感应布防报警Proteus仿真设计(程序+Proteus仿真+原理图+配套资料等)

毕设帮助、开题指导、技术解答(有偿)见文未 目录 一、硬件设计 二、设计功能 三、Proteus仿真图 四、原理图 五、程序源码 资料包括&#xff1a; 需要完整的资料可以点击下面的名片加下我&#xff0c;找我要资源压缩包的百度网盘下载地址及提取码。 方案选择 单片机的选…

【MT32F006】MT32F006之CS1237采集秤传感器

本文最后修改时间&#xff1a;2023年06月07日 一、本节简介 本文介绍如何使用MT32F006连接CS1237芯片采集秤传感器。 二、实验平台 库版本&#xff1a;V1.0.0 编译软件&#xff1a;MDK5.37 硬件平台&#xff1a;MT32F006开发板&#xff08;主芯片MT32F006&#xff09; 仿真…

北斗时空子链重磅发布!移远通信与中国移动携手打造更加可靠的高精定位产品

8月16日&#xff0c;以“百川聚申城 数智创未来”为主题的2023年中国移动上海产业研究院百川生态大会在上海隆重召开。 本次大会聚焦时空信息、数智交通、工业能源、金融科技等领域&#xff0c;各级领导、产学研专家、企业家共聚一堂&#xff0c;共谋产业、共话行业、共促发展。…

innovus: IMPSP-190 利用率超标,place中断问题

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 这个问题在查看manual之后&#xff0c;工具给出两个解释。一个是setPlaceMode -place_global_max_density $value(0-1)设置的太小了&#xff0c;另一个是place之前加了过量的so…

飞凌嵌入式与您相约艾睿电子技术解决方案展

艾睿电子公司将在深圳主办年度“技术解决方案展”&#xff0c;2023 年展示会将以“启航未来&#xff0c;携手共进”为主题&#xff0c;汇聚百家电子/半导体大厂、制造商、供应商、方案公司及创科公司&#xff0c;展示最前沿的产品和领先技术解决方案&#xff0c;如何能驱动人、…