快捷導(dǎo)航

vue 行為驗(yàn)證碼之滑動(dòng)驗(yàn)證AJ-Captcha使用詳解

更新時(shí)間：2023年05月16日 10:11:51 作者：久居我心你卻從未交房租

這篇文章主要介紹了vue 行為驗(yàn)證碼之滑動(dòng)驗(yàn)證AJ-Captcha使用詳解,AJ-Captcha不需要npm安裝，只需要將組件 verifition復(fù)制到所使用的components目錄下，本文給大家詳細(xì)講解，需要的朋友可以參考下

AJ-Captcha

行為驗(yàn)證碼采用嵌入式集成方式，接入方便，安全，高效。拋棄了傳統(tǒng)字符型驗(yàn)證碼展示-填寫字符-比對(duì)答案的流程。支持多種語(yǔ)言實(shí)現(xiàn)，
后端包括java、php，前端有html、vue、vue3.0,flutter、uniapp、微信小程序、reactNative，安卓、IOS、angular。
官方使用網(wǎng)址：AJ-Captcha
git使用地址：AJ-Captcha git地址

使用過(guò)程及源由

防止用戶修改密碼惡意刷驗(yàn)證碼的方式（設(shè)計(jì)如此），行為驗(yàn)證滑動(dòng)拼圖、文字點(diǎn)選、圖標(biāo)點(diǎn)擊等多種驗(yàn)證碼方式，能給用戶帶來(lái)極致體驗(yàn)的同時(shí)，安全還有保障。

驗(yàn)證碼功能包括兩種

如何使用

AJ-Captcha不需要npm安裝，只需要將組件 verifition復(fù)制到所使用的components目錄下：

在使用時(shí)只需要修改所使用的api地址，引入使用的地方即可：

引入使用代碼：

<template>
    <Verify
	@success="success" //驗(yàn)證成功的回調(diào)函數(shù)
	:mode="pop"     //調(diào)用的模式
	:captchaType="blockPuzzle"    //調(diào)用的類型 點(diǎn)選或者滑動(dòng)
        :imgSize="{ width: '330px', height: '155px' }" //圖片的大小對(duì)象
        ref="verify"
    ></Verify>
    //mode="pop"模式
    <button @click="useVerify">調(diào)用驗(yàn)證組件</button>
</template>
****注: mode為"pop"時(shí),使用組件需要給組件添加ref值,并且手動(dòng)調(diào)用show方法 例: this.$refs.verify.show()****
****注: mode為"fixed"時(shí),無(wú)需添加ref值,無(wú)需調(diào)用show()方法****
<script>
//引入組件
import Verify from "./../../components/verifition/Verify";
export default {
	name: 'app',
	components: {
		Verify
	}
	methods:{
	   success(params){
	     // params 返回的二次驗(yàn)證參數(shù), 和登錄參數(shù)一起回傳給登錄接口，方便后臺(tái)進(jìn)行二次驗(yàn)證
           },
           useVerify(){
              this.$refs.verify.show()
           }
	}
}
</script>

驗(yàn)證碼參數(shù)

參數(shù)	類型	說(shuō)明
captchaType	String	1）滑動(dòng)拼圖 blockPuzzle 2）文字點(diǎn)選 clickWord
mode	String	驗(yàn)證碼的顯示方式，彈出式pop，固定fixed，默認(rèn)：mode : ‘pop’
vSpace	String	驗(yàn)證碼圖片和移動(dòng)條容器的間隔，默認(rèn)單位是px。如：間隔為5px，默認(rèn):vSpace:5
explain	String	滑動(dòng)條內(nèi)的提示，不設(shè)置默認(rèn)是：‘向右滑動(dòng)完成驗(yàn)證’

imgSize	String	其中包含了width、height兩個(gè)參數(shù)，分別代表圖片的寬度和高度，支持百分比方式設(shè)置如:{width:‘400px’,height:‘200px’}

使用返回參數(shù)處理

//params為跳轉(zhuǎn)返回的判斷值
async success(params){
      console.log("返回的二次驗(yàn)證參數(shù)", params)
      let param = {
        phone: this.loginForm1.phone,
        captchaVerification: params.captchaVerification
      }
      let res = await sureLoginAccount(param)
      if(res.code == "200"){
        //跳轉(zhuǎn)步驟
      }
    },