素材巴巴 > 程序开发 >

Vue2.x、Vue3等多方使用AJ-Captcha实现验证码功能

程序开发 2023-09-17 16:39:37

AJ-Captcha 简介

AJ-Captcha 多用于登录验证码,目前支持滑动拼图和文字点选两种方式

前端提供了Android、iOS、Futter、Uni-App、ReactNative、Vue2.x、Vue3、Angular、Html、Php等多端示例。后端基于Java实现,提供纯Java.jar和SpringBoot Starter。

AJ-Captcha 官方文档

1.下载组件

目录:https://gitee.com/anji-plus/captcha/tree/master/view

在这里插入图片描述

不需要 npm 安装,在相应的语言目录中找到components/verifition组件,下载拖到项目components文件即可 (以Vue为例)

组件文件

2.verifition修改配置

文件路径:verifition/api/index.js

后台需要写这两个接口,完成图片验证码的 get 和 check 功能

在这里插入图片描述
后台接口返回的数据格式不一致时则需要去改 reqGet 和 reqCheck 的成功回调

3.在项目引入组件

import Verify from ‘@/components/verifition/Verify’
components:{ Verify } //vue3省略

注:如果出现重复声明报错,只需全局搜索将 var a= …, var a = … ,改为let a 再分别赋值即可

在这里插入图片描述

mode : pop 弹框验证码 fixed 固定验证码位置
captchaType : 滑动拼图 blockPuzzle 文字点选 clickWord
success是验证成功回调,将登录逻辑写在 const sueccess () => { 登录…}

验证通过->登录成功->…


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。