anji-plus / AJ-Captcha行为验证码前后端实现

news2024/11/13 9:17:42

一,简介及源码、文档地址

        AJ-Captcha行为验证码,包含滑动拼图、文字点选两种方式,UI支持弹出和嵌入两种方式。后端提供Java实现,前端提供了php、angular、html、vue、uni-app、flutter、android、ios等代码示例。

        行为验证码采用嵌入式集成方式,接入方便,安全,高效。抛弃了传统字符型验证码展示-填写字符-比对答案的流程,采用验证码展示-采集用户行为-分析用户行为流程,用户只需要产生指定的行为轨迹,不需要键盘手动输入,极大优化了传统验证码用户体验不佳的问题;同时,快速、准确的返回人机判定结果。

Github源码地址:GitHub - anji-plus/captcha: 行为验证码(滑动拼图、点选文字),前后端(java)交互,包含h5/Android/IOS/flutter/uni-app的源码和实现Gg行为验证码(滑动拼图、点选文字),前后端(java)交互,包含h5/Android/IOS/flutter/uni-app的源码和实现 - GitHub - anji-plus/captcha: 行为验证码(滑动拼图、点选文字),前后端(java)交互,包含h5/Android/IOS/flutter/uni-app的源码和实现https://github.com/anji-plus/captcha

Gitee源码地址:

AJ-Captcha: 行为验证码(滑动拼图、点选文字),前后端(java)交互,包含vue/h5/Android/IOS/flutter/uni-app/react/php/go/微信小程序的源码和实现https://gitee.com/anji-plus/captchaCaptcha文档地址:

功能概述 | AJ-Captchaanji-plusicon-default.png?t=N3I4https://ajcaptcha.beliefteam.cn/captcha-doc/

        目前对外提供两种类型的验证码,其中包含滑动拼图、文字点选。如图1.1、1。2所示。若希望不影响原UI布局,可采用弹出式交互。
   后端基于Java实现,提供纯Java.jar和SpringBoot Starter。前端提供了Android、iOS、Futter、Uni-App、ReactNative、Vue、Angular、Html、Php等多端示例。

                                                         图1.1

                                                         图1.2

二,引用方式

2.1,后端引入

        1,添加依赖,引入jar包,已上传maven仓库

<dependency>
   <groupId>com.anji-plus</groupId>
   <artifactId>spring-boot-starter-captcha</artifactId>
   <version>1.3.0</version>
</dependency>

        2,可以使用官方的demo,后端提供了四种实现方案go语言、php语言、sprintboot方式、sprintmvc方式,可以根据自己项目的情况进行选择使用。

        主要有三个方法,

                获取验证码接口:http://:/captcha/get

                核对验证码接口接口:http://:/captcha/check

                二次校验接口:

captchaService.verification(captchaVO)

        后台代码直接调用对应方法即可

@Resource
    private CaptchaService captchaService;

    @PostMapping("/get") // 获取图片
    public ResponseModel get(@RequestBody CaptchaVO data, HttpServletRequest request) {
        assert request.getRemoteHost()!=null;
        data.setBrowserInfo(getRemoteId(request));
        return captchaService.get(data);
    }

    @PostMapping("/check") // 进行校验
    public ResponseModel check(@RequestBody CaptchaVO data, HttpServletRequest request) {
        data.setBrowserInfo(getRemoteId(request));
        return captchaService.check(data);
    }

    @PostMapping("/verify") // 二次校验
    public ResponseModel verify(@RequestBody CaptchaVO data, HttpServletRequest request) {
        return captchaService.verification(data);
    }

    public static final String getRemoteId(HttpServletRequest request) {
        String xfwd = request.getHeader("X-Forwarded-For");
        String ip = getRemoteIpFromXfwd(xfwd);
        String ua = request.getHeader("user-agent");
        if (StringUtils.isNotBlank(ip)) {
            return ip + ua;
        }
        return request.getRemoteAddr() + ua;
    }

    private static String getRemoteIpFromXfwd(String xfwd) {
        if (StringUtils.isNotBlank(xfwd)) {
            String[] ipList = xfwd.split(",");
            return StringUtils.trim(ipList[0]);
        }
        return null;
    }
  • 获取验证码接口:http://:/captcha/get

请求参数:

{
	"captchaType": "blockPuzzle",  //验证码类型 clickWord
	"clientUid": "唯一标识"  //客户端UI组件id,组件初始化时设置一次,UUID(非必传参数)
}

# 响应参数:

{
    "repCode": "0000",
    "repData": {
        "originalImageBase64": "底图base64",
        "point": {    //默认不返回的,校验的就是该坐标信息,允许误差范围
            "x": 205,
            "y": 5
        },
        "jigsawImageBase64": "滑块图base64",
        "token": "71dd26999e314f9abb0c635336976635", //一次校验唯一标识
        "secretKey": "16位随机字符串", //aes秘钥,开关控制,前端根据此值决定是否加密
        "result": false,
        "opAdmin": false
    },
    "success": true,
    "error": false
}
  • 核对验证码接口接口:http://:/captcha/check

# 请求参数:

{
	 "captchaType": "blockPuzzle",
	 "pointJson": "QxIVdlJoWUi04iM+65hTow==",  //aes加密坐标信息
	 "token": "71dd26999e314f9abb0c635336976635"  //get请求返回的token
}

# 响应参数:

{
    "repCode": "0000",
    "repData": {
        "captchaType": "blockPuzzle",
        "token": "71dd26999e314f9abb0c635336976635",
        "result": true,
        "opAdmin": false
    },
    "success": true,
    "error": false
}

2.2 前端引入

前端支持的类型更多,包括android、angular、flutter、html、ios、php、react、uni-app、wx-applet、vue,根据自己项目的实际情况进行选用

本文以uni-app为例

# 兼容性

微信小程序,H5页面等(uni-app支持的小程序系系列,H5系列)

# 初始化组件

1)将view/uni-app/src/pages/verify文件夹copy到自己项目中

2)下载相关依赖, npm install 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()**** <br/>
****注: 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>
</script>

# 注意事项

后端请求地址根据部署情况到:\view\uni-app\src\pages\verify\utils\request.js  第二行 修改路劲
let baseUrl = "https://captcha.anji-plus.com/captcha-api"

# 回调事件

参数类型说明
success(params)funciton验证码匹配成功后的回调函数,params为返回需回传服务器的二次验证参数
errorfunciton验证码匹配失败后的回调函数
readyfunciton验证码初始化成功的回调函数

# 验证码参数

参数类型说明
captchaTypeString1)滑动拼图 blockPuzzle 2)文字点选 clickWord
modeString验证码的显示方式,弹出式pop,固定fixed,默认:mode : ‘pop’
vSpaceString验证码图片和移动条容器的间隔,默认单位是px。如:间隔为5px,默认:vSpace:5
explainString滑动条内的提示,不设置默认是:'向右滑动完成验证'
imgSizeObject其中包含了width、height两个参数,分别代表图片的宽度和高度,支持百分比方式设置 如:{width:'400px',height:'200px'}

# 默认接口api地址

请求URL请求方式
/captcha/getPost
/captcha/checkPost

 

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

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

相关文章

【软考数据库】第十三章 云计算与大数据处理

目录 13.1 云计算 13.1.1 云计算的关键特征 13.1.2 云计算分类 13.1.3 云关键技术 13.1.4 云计算的安全 13.1.5 云安全实施的步骤 13.2 大数据 前言&#xff1a; 笔记来自《文老师软考数据库》教材精讲&#xff0c;精讲视频在b站&#xff0c;某宝都可以找到&#xff0c…

天线学习笔记——波导中微波模式的理解(TE/TM/TEM)

三种模式的解释 TE/TM/TEM中的“T”是指Transverse的缩写&#xff0c;本意是“横向”&#xff0c;在微波模式中指的是“与传输方向相垂直的方向”&#xff0c;比如说&#xff1a;在三维笛卡尔直角坐标系中波导中的电磁波传输方向是沿着z轴&#xff0c;则把x方向和y方向称为横向…

【8086汇编】用DS和[address]实现字的传送

CPU从内存中读取一个数据单元的数据(1个字节8位)&#xff0c;或者读取一个字的数据&#xff08;2个字节16位&#xff09; DOSBox实操代码验证

低代码应用开发:告别繁琐,实现高效创新

随着企业数字化转型的不断推进&#xff0c;对于软件开发速度、效率和成本的要求也在不断提高。与此同时&#xff0c;随着技术发展&#xff0c;低代码技术逐渐成为了企业快速实现数字化转型的利器。如今&#xff0c;低代码已经广泛应用于各行各业&#xff0c;帮助企业提高应用开…

Splashtop Business Access - 个人和团队可以简单快速、安全高效地访问远程计算机。

Splashtop Business Access&#xff0c;从智能手机&#xff0c;平板电脑或另一台计算机远程访问 Windows PC 和 Mac –就像您坐在计算机前一样。 SPLASHTOP BUSINESS ACCESS 的主要功能 高性能 Splashtop Business Access和我们屡获殊荣的为数以百万计的消费用户提供的产品一…

初识软件测试(常见软件开发模型)

文章目录 软件测试概念篇1. 软件测试常见问题1) 什么是软件测试?2) 调试和测试的区别?3) 测试人员需要具备哪些素质? 2. 软件测试常见名词解释1) 需求2) 软件错误(bug)3) 测试用例 3. 软件的生命周期4. 开发模型1) 瀑布模型2) 螺旋模型3) 增量模型和迭代模型4) 敏捷模型 软件…

【服务器】利用树莓派搭建 web 服务器

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员&#xff0c;2024届电子信息研究生 目录 概述 使用 Raspberry Pi Imager 安装 Raspberry Pi OS 设置 Apache Web 服务器 测试 web 站点 安装静态样例站点 将web站点发布到公网 安装 Cpolar内网穿透 cpolar进行tok…

Spring的IOC/DI注解开发

文章目录 3.1 环境准备3.2 注解开发定义bean步骤1:删除原XML配置步骤2:Dao上添加注解步骤3:配置Spring的注解包扫描步骤4&#xff1a;运行程序步骤5:Service上添加注解步骤6:运行程序知识点1:Component等 3.2 纯注解开发模式3.2.1 思路分析3.2.2 实现步骤步骤1:创建配置类步骤2…

主题建模-corpora语料库-PCA进行降维

https://colab.research.google.com/drive/1F-1Ej7T2xnUKXSmDPjjOChNbBTvQlpnM?uspsharing 考试 https://colab.research.google.com/drive/1hSRxzFL9cx7PYrHYZeEnT3jRSn8LmQcx?uspsharing 第一题要求 聚类选定的新闻数据。此时&#xff0c;请考虑以下事项。&#xff08;2分…

算法篇——贪心算法大集合(js版)

455.分发饼干 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口的饼干的最小尺寸&#xff1b;并且每块饼干 j&#xff0c;都有…

Vue收集表单数据和过滤器

目录 收集表单数据 收集表单数据总结 过滤器 过滤器小结 收集表单数据 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><!--vue--><script src"https://cdn.sta…

【C#】GridControl日期字段显示时分秒

系列文章 【C#】单号生成器&#xff08;编号规则、固定字符、流水号、产生业务单号&#xff09; 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/129129787 【C#】日期范围生成器&#xff08;开始日期、结束日期&#xff09; 本文链接&#xff1a;h…

Vue3+elementPlus 表格提示宽度设置无效问题

网上都说这样改 但是我的改了无效&#xff01; 试了下这样就可以了 <style lang"css">.el-popper {font-size: 14px;max-width: 600px; } </style>

【springboot test】springboot 单元测试配置文件加载顺序及覆盖关系

springboot test 配置文件加载顺序及覆盖关系 参照目录结构:1.配置文件加载基础原则:2.application.yml主配置文件加载原则:3.application.yml中指定spring.profiles.active:xxx时,xxx的加载原则:4.使用ActiveProfiles("yyy")时:5.其他自定义配置文件,如xxx.properti…

为什么需要防雷接地,防雷接地的作用是什么

为什么需要电气接地&#xff1f; 您是否曾经在工作条件下使用任何电器时接触过电击&#xff1f;几乎每个人的答案都是肯定的&#xff0c;有时这些电击是轻微的&#xff0c;但有时会对电气和电子设备造成损坏&#xff0c;并可能危及生命。为防止对人的生命和电器造成任何损害&a…

网络计算模式(一)

CDN网络概念 CDN&#xff1a;Content Delivery Network&#xff0c;即内容分发网络。 其目的是通过在现有的Internet中增加一层新的网络架构&#xff0c;将网站的内容发布到最接近用户的网络“边缘”。使用户可以就近取得所需的内容&#xff0c;解决Internet网络拥挤的状况&a…

盘点十大机器人公众号

原创 | 文BFT机器人 一、机器人大讲堂 公众号定位&#xff1a;引领行业发展的新媒体平台 更新频率&#xff1a;1篇主推3篇副推/每日更新 文章内容&#xff1a; 1. 行业市场新动态&#xff08;常作为主推&#xff09; 吸引关注科技市场动态的客户群体 2. 项目、政策 吸引需…

DI93A HESG440355R3为什么电容器分为多种?只有一种电容器不行吗?

​ DI93A HESG440355R3为什么电容器分为多种&#xff1f;只有一种电容器不行吗&#xff1f; 电子产品由不同的电子元件组成&#xff0c;包括电容器、电感器、电阻器、线圈、发电机等&#xff0c;其中电容器是常见的电子元件。电容器按照类别分为多种电容器&#xff0c;常见的有…

Barra模型因子的构建及应用系列十之Leverage因子

一、摘要 在前期的Barra模型系列文章中&#xff0c;我们构建了Size因子、Beta因子、Momentum因子、Residual Volatility因子、NonLinear Size因子、Book-to-Price因子、Liquidity因子、Earning_Yeild因子和Growth因子 &#xff0c;并分别创建了对应的单因子策略&#xff0c;其…

基于Java的医护人员排班系统设计与实现【附源码】

角色分为管理员、医生、护士 登录、注册页面&#xff1a; 工号、姓名、科室、密码、电话、性别、邮箱 管理员功能&#xff1a; 1、个人中心&#xff1a;个人信息、修改密码。 2、科室信息&#xff1a;增删改查&#xff0c;每个科室要有科室人员。 3、医生信息&#xff1a;增删改…