vue 行為驗證碼之滑動驗證AJ-Captcha使用詳解

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

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

AJ-Captcha

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

使用過程及源由

防止用戶修改密碼惡意刷驗證碼的方式（設計如此），行為驗證滑動拼圖、文字點選、圖標點擊等多種驗證碼方式，能給用戶帶來極致體驗的同時，安全還有保障。

驗證碼功能包括兩種

如何使用

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

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

引入使用代碼：

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

驗證碼參數(shù)

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

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

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

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