Vue滑塊驗(yàn)證碼組件anji-captcha的使用案例詳解

更新時(shí)間：2023年05月16日 10:03:24 作者：蕓靈fly

滑塊驗(yàn)證是一種常見的人機(jī)識(shí)別方法，這篇文章主要介紹了Vue滑塊驗(yàn)證碼組件anji-captcha的使用,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下

說明

最近需要改一下首頁界面，將之前的字符驗(yàn)證碼改成滑塊驗(yàn)證碼（這樣更好用一些），找了一下發(fā)現(xiàn)了anji-captcha這個(gè)組件，效果如下

快速開始

前端

首先將倉庫克隆下來->https://github.com/anji-plus/captcha.git，然后在自己的工程里copy需要的文件

1)復(fù)制view/vue/src/components/verifition文件夾,到自己工程對(duì)應(yīng)目錄下
復(fù)制view/vue/src/assets到自己工程對(duì)應(yīng)目錄下
2)安裝請(qǐng)求和加密依賴
npm install axios  crypto-js   -S

前端請(qǐng)求使用的axios，需要換成自己工程的axios，這樣請(qǐng)求后端路徑才會(huì)正確，配置位于verifition/api/index.js，同時(shí)如果后端有對(duì)請(qǐng)求攔截請(qǐng)過濾掉/captcha/get和/captcha/check兩個(gè)后端接口

示例使用

<template>
  <div>
    <Verify
      @success="success"
      :mode="'pop'"
      :captchaType="'blockPuzzle'"
      :imgSize="{ width: '330px', height: '155px' }"
      ref="verify"
    ></Verify>
    <button @click="useVerify">調(diào)用驗(yàn)證組件</button>
  </div>
</template>
<script>
//引入組件
import Verify from "@/components/verifition/Verify";
export default {
  name: "app",
  components: {
    Verify,
  },
  methods: {
    success(params) {
        console.log("成功，下面是二次驗(yàn)證")
      // params 返回的二次驗(yàn)證參數(shù), 和登錄參數(shù)一起回傳給登錄接口，方便后臺(tái)進(jìn)行二次驗(yàn)證
    },
    useVerify() {
      this.$refs.verify.show();
    },
  },
};
</script>

后端

有starter版本的包，還是比較方便的

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>
        <dependency>
            <groupId>com.anji-plus</groupId>
            <artifactId>spring-boot-starter-captcha</artifactId>
            <version>1.2.8</version>
        </dependency>

application.yml

server:
  port: 8080
# 滑動(dòng)驗(yàn)證，底圖路徑，不配置將使用默認(rèn)圖片
# 支持全路徑
# 支持項(xiàng)目路徑,以classpath:開頭,取resource目錄下路徑,例：classpath:images/jigsaw
spring:
  redis:
    database: 3
    host: 151.168.99.100
    password: '123456'
    port: 6379
aj:
  captcha:
    jigsaw: classpath:images/jigsaw
    #滑動(dòng)驗(yàn)證，底圖路徑，不配置將使用默認(rèn)圖片
    ##支持全路徑
    # 支持項(xiàng)目路徑,以classpath:開頭,取resource目錄下路徑,例：classpath:images/pic-click
    pic-click: classpath:images/pic-click
    # 對(duì)于分布式部署的應(yīng)用，我們建議應(yīng)用自己實(shí)現(xiàn)CaptchaCacheService，比如用Redis或者memcache，
    # 參考CaptchaCacheServiceRedisImpl.java
    # 如果應(yīng)用是單點(diǎn)的，也沒有使用redis，那默認(rèn)使用內(nèi)存。
    # 內(nèi)存緩存只適合單節(jié)點(diǎn)部署的應(yīng)用，否則驗(yàn)證碼生產(chǎn)與驗(yàn)證在節(jié)點(diǎn)之間信息不同步，導(dǎo)致失敗。
    # ?。?！ 注意啦，如果應(yīng)用有使用spring-boot-starter-data-redis，
    # 請(qǐng)打開CaptchaCacheServiceRedisImpl.java注釋。
    # redis ----->  SPI： 在resources目錄新建META-INF.services文件夾(兩層)，參考當(dāng)前服務(wù)resources。
    # 緩存local/redis...
    cache-type: redis
    # local緩存的閾值,達(dá)到這個(gè)值，清除緩存
    cache-number: 1000
    # local定時(shí)清除過期緩存(單位秒),設(shè)置為0代表不執(zhí)行
    timing-clear: 180
    # 驗(yàn)證碼類型default兩種都實(shí)例化。
    type: default
    # 漢字統(tǒng)一使用Unicode,保證程序通過@value讀取到是中文，可通過這個(gè)在線轉(zhuǎn)換;yml格式不需要轉(zhuǎn)換
    # https://tool.chinaz.com/tools/unicode.aspx 中文轉(zhuǎn)Unicode
    # 右下角水印文字(我的水印)
    water-mark: Yunlingfly
    # 右下角水印字體(不配置時(shí)，默認(rèn)使用文泉驛正黑)
    # 由于宋體等涉及到版權(quán)，我們jar中內(nèi)置了開源字體【文泉驛正黑】
    # 方式一：直接配置OS層的現(xiàn)有的字體名稱，比如：宋體
    # 方式二：自定義特定字體，請(qǐng)將字體放到工程resources下fonts文件夾，支持ttf\ttc\otf字體
    # aj.captcha.water-font=WenQuanZhengHei.ttf
    # 點(diǎn)選文字驗(yàn)證碼的文字字體(文泉驛正黑)
    # aj.captcha.font-type=WenQuanZhengHei.ttf
    # 校驗(yàn)滑動(dòng)拼圖允許誤差偏移量(默認(rèn)5像素)
    slip-offset: 5
    # aes加密坐標(biāo)開啟或者禁用(true|false)
    aes-status: true
    # 滑動(dòng)干擾項(xiàng)(0/1/2)
    interference-options: 1
    history-data-clear-enable: true
    # 接口請(qǐng)求次數(shù)一分鐘限制是否開啟 true|false
    req-frequency-limit-enable: true
    # 驗(yàn)證失敗5次，get接口鎖定
    req-get-lock-limit: 5
    # 驗(yàn)證失敗后，鎖定時(shí)間間隔,s
    req-get-lock-seconds: 60
    # get接口一分鐘內(nèi)請(qǐng)求數(shù)限制
    req-get-minute-limit: 30
    # check接口一分鐘內(nèi)請(qǐng)求數(shù)限制
    req-check-minute-limit: 60
    # verify接口一分鐘內(nèi)請(qǐng)求數(shù)限制
    req-verify-minute-limit: 60

將service/springboot/src/main/resources下的images和METE-INF文件夾copy到自己的工程里，將CaptchaCacheService文件里的內(nèi)容改為自己的目錄并新建CaptchaCacheServiceRedisImpl文件作為緩存，內(nèi)容如下

package cn.yunlingfly.springbootanjicaptcha.service;
import com.anji.captcha.service.CaptchaCacheService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import java.util.concurrent.TimeUnit;
/**
 * 對(duì)于分布式部署的應(yīng)用，我們建議應(yīng)用自己實(shí)現(xiàn)CaptchaCacheService，比如用Redis，參考service/spring-boot代碼示例。
 * 如果應(yīng)用是單點(diǎn)的，也沒有使用redis，那默認(rèn)使用內(nèi)存。
 * 內(nèi)存緩存只適合單節(jié)點(diǎn)部署的應(yīng)用，否則驗(yàn)證碼生產(chǎn)與驗(yàn)證在節(jié)點(diǎn)之間信息不同步，導(dǎo)致失敗。
 * <p>
 * ☆☆☆ SPI： 在resources目錄新建META-INF.services文件夾(兩層)，參考當(dāng)前服務(wù)resources。
 * <p>
 * 使用redis緩存
 *
 * @author lide1202@hotmail.com
 * @date 2020-05-12
 */
public class CaptchaCacheServiceRedisImpl implements CaptchaCacheService {
    @Override
    public String type() {
        return "redis";
    }
    @Autowired
    private StringRedisTemplate stringRedisTemplate;
    @Override
    public void set(String key, String value, long expiresInSeconds) {
        stringRedisTemplate.opsForValue().set(key, value, expiresInSeconds, TimeUnit.SECONDS);
    }
    @Override
    public boolean exists(String key) {
        return stringRedisTemplate.hasKey(key);
    }
    @Override
    public void delete(String key) {
        stringRedisTemplate.delete(key);
    }
    @Override
    public String get(String key) {
        return stringRedisTemplate.opsForValue().get(key);
    }
    @Override
    public Long increment(String key, long val) {
        return stringRedisTemplate.opsForValue().increment(key, val);
    }
}