Vue?+?springboot實(shí)現(xiàn)拼圖人機(jī)驗(yàn)證功能

更新時(shí)間：2026年01月07日 17:25:39 作者：一只游魚

本文介紹了如何使用Vue和Spring?Boot實(shí)現(xiàn)拼圖人機(jī)驗(yàn)證功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

Vue + springboot實(shí)現(xiàn)拼圖人機(jī)驗(yàn)證

接上個(gè)文章，我們擴(kuò)展拼圖人機(jī)驗(yàn)證功能。

一、實(shí)現(xiàn)方法

功能實(shí)現(xiàn)

前端請(qǐng)求后端返回拼圖驗(yàn)證碼
后端隨機(jī)選擇圖片，隨機(jī)扣圖片的部分分為背景與圖塊
將摳圖的位置信息保存在redis中，并且將兩類圖片返回
前端獲得圖片資源，將用戶的拼圖結(jié)果發(fā)給后端進(jìn)行對(duì)比
后端返回對(duì)比結(jié)果（這里也可以加上imageToken在登錄時(shí)使用，更規(guī)范安全）

進(jìn)階（防腳本）

后端摳圖時(shí)扣兩個(gè)不同位置的（一個(gè)真的一個(gè)假的），可以有效防止。

具體實(shí)現(xiàn)方式：

摳圖時(shí)，redis只記錄其中一個(gè)，且只保留這一個(gè)洞的拼圖圖片，返回給前端。

軌跡校驗(yàn)

具體實(shí)現(xiàn)方式：

前端記錄拼圖的滑動(dòng)軌跡，返回給后端校驗(yàn)人機(jī)。

二、實(shí)現(xiàn)依賴

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.25</version>
</dependency>

三、后端實(shí)現(xiàn)

摳圖：

@GetMapping("/puzzle")
public Map<String, Object> puzzle() throws IOException {
    // 選擇背景圖
    String[] bgList = {"static/bg1.png", "static/bg2.png", "static/bg3.jpg"};
    String bgPath = bgList[ThreadLocalRandom.current().nextInt(bgList.length)];
    InputStream is = Thread.currentThread()
            .getContextClassLoader()
            .getResourceAsStream(bgPath);
    if (is == null) {
        throw new RuntimeException("未找到圖片資源：" + bgPath);
    }
    BufferedImage bgOriginal = ImageIO.read(is);
    // 縮放到前端顯示大小
    BufferedImage bg = new BufferedImage(
            BG_WIDTH,
            BG_HEIGHT,
            BufferedImage.TYPE_INT_ARGB
    );
    Graphics2D gResize = bg.createGraphics();
    gResize.drawImage(bgOriginal, 0, 0, BG_WIDTH, BG_HEIGHT, null);
    gResize.dispose();
    // 真的位置
    int realX = ThreadLocalRandom.current()
            .nextInt(60, BG_WIDTH - BLOCK_SIZE - 20);
    int realY = ThreadLocalRandom.current()
            .nextInt(20, BG_HEIGHT - BLOCK_SIZE - 20);
    // 生成假洞位置
    int fakeX;
    int fakeY;
    do {
        fakeX = ThreadLocalRandom.current()
                .nextInt(60, BG_WIDTH - BLOCK_SIZE - 20);
        fakeY = ThreadLocalRandom.current()
                .nextInt(20, BG_HEIGHT - BLOCK_SIZE - 20);
    } while (Math.abs(fakeX - realX) < BLOCK_SIZE
            && Math.abs(fakeY - realY) < BLOCK_SIZE);
    // 背景圖挖兩個(gè)洞（真 + 假）
    BufferedImage bgHole = new BufferedImage(
            BG_WIDTH,
            BG_HEIGHT,
            BufferedImage.TYPE_INT_ARGB
    );
    Graphics2D g = bgHole.createGraphics();
    g.drawImage(bg, 0, 0, null);
    // 開啟透明摳除模式
    g.setComposite(AlphaComposite.Clear);
    // 真洞
    g.fillRect(realX, realY, BLOCK_SIZE, BLOCK_SIZE);
    // 假洞
    g.fillRect(fakeX, fakeY, BLOCK_SIZE, BLOCK_SIZE);
    g.dispose();
    // 生成真洞對(duì)應(yīng)的拼圖塊
    BufferedImage block = new BufferedImage(
            BLOCK_SIZE,
            BLOCK_SIZE,
            BufferedImage.TYPE_INT_ARGB
    );
    Graphics2D g2 = block.createGraphics();
    g2.drawImage(bg, -realX, -realY, null);
    g2.dispose();
    // 保存圖片
    String captchaId = UUID.randomUUID().toString();
    String bgFile = CAPTCHA_TEMP_DIR + captchaId + "_bg.png";
    String blockFile = CAPTCHA_TEMP_DIR + captchaId + "_block.png";
    ImageIO.write(bgHole, "png", new File(bgFile));
    ImageIO.write(block, "png", new File(blockFile));
    // Redis 保存真的
    redisTemplate.opsForValue().set(
            "captcha:" + captchaId,
            String.valueOf(realX),
            2,
            TimeUnit.MINUTES
    );
    // 返回前端
    return Map.of(
            "captchaId", captchaId,
            "bgUrl", fileurl + "/imageCaptcha/image?file=" + captchaId + "_bg.png",
            "blockUrl", fileurl + "/imageCaptcha/image?file=" + captchaId + "_block.png",
            "blockY", realY
    );
}

校驗(yàn)：

@PostMapping("/verify")
    public Result<?> verify(@RequestBody CaptchaVerifyVO dto) {
        if (dto.getCaptchaId() == null || dto.getCaptchaId().length() > 64) {
            return Result.error("250","參數(shù)非法");
        }
        String key = "captcha:" + dto.getCaptchaId();
        String realX = redisTemplate.opsForValue().get(key);
        if (realX == null) {
            return Result.error("250","驗(yàn)證碼已過期");
        }
        int moveX = dto.getMoveX();
        int targetX = Integer.parseInt(realX);
        boolean positionOk = Math.abs(moveX - targetX) <= 5;
        boolean trackOk = checkTrack(dto.getTrack());
        if (!positionOk || !trackOk) {
            return Result.error("250","驗(yàn)證失敗");
        }
        redisTemplate.delete(key);
//        // 生成令牌
//        String token = UUID.randomUUID().toString();
//        redisTemplate.opsForValue().set(
//                "captcha:token:" + token,
//                "1",
//                5,
//                TimeUnit.MINUTES
//        );
        return Result.success();
    }

軌跡檢查方法

// 檢查軌跡
    private boolean checkTrack(List<TrackPoint> track) {
        if (track == null || track.size() < 8) return false;
        int forward = 0;
        int backward = 0;
        for (int i = 1; i < track.size(); i++) {
            int diff = track.get(i).getX() - track.get(i - 1).getX();
            if (diff > 0) forward++;
            if (diff < 0) backward++;
        }
        // 大部分向前
        if (forward < track.size() * 0.6) return false;
        // 少量回拉
        if (backward > track.size() * 0.3) return false;
        return true;
    }

圖片獲?。?/p>

@GetMapping("/image")
public void getImage(@RequestParam String file, HttpServletResponse response) throws IOException {
    File f = new File(CAPTCHA_TEMP_DIR + file);
    if(!f.exists()) throw new RuntimeException("圖片不存在");
    response.setContentType("image/png");
    try(FileInputStream fis = new FileInputStream(f)) {
        fis.transferTo(response.getOutputStream());
    }
}

前端實(shí)現(xiàn)

子組件

<template>
  <div class="captcha-container">
    <div class="captcha-bg">
      <img :src="bgImage" class="bg-img" />
      <div
          class="block-img"
          :style="{
          left: blockLeft + 'px',
          top: blockY + 'px',
          width: blockSize + 'px',
          height: blockSize + 'px',
          backgroundImage: 'url(' + blockImage + ')'
        }"
          @mousedown.prevent="startDrag"
          @touchstart.prevent="startDrag"
      ></div>
    </div>
    <div class="slider-bar">
      <div
          class="slider-tip"
          v-show="!dragging"
      >
        滑動(dòng)完成人機(jī)校驗(yàn)
      </div>
      <div
          class="slider-btn"
          :style="{ left: blockLeft + 'px', width: blockSize + 'px' }"
          @mousedown.prevent="startDrag"
          @touchstart.prevent="startDrag"
      >
        ?
      </div>
    </div>
    <button class="refresh-btn" @click="refreshCaptcha">刷新驗(yàn)證碼</button>
  </div>
</template>

加載圖片：

// 加載驗(yàn)證碼
async function loadCaptcha() {
  try {
    const res = await request.get("/imageCaptcha/puzzle");
    captchaId.value = res.data.captchaId;
    bgImage.value = res.data.bgUrl;
    blockImage.value = res.data.blockUrl;
    blockY.value = res.data.blockY;
    blockLeft.value = 0;
  } catch (err) {
    console.error("加載驗(yàn)證碼失敗", err);
  }
}

起始拖動(dòng)：

function startDrag(e) {
  dragging = true;
  // 記錄拖動(dòng)起始點(diǎn)
  startX = e.type.includes("mouse")
      ? e.clientX
      : e.touches[0].clientX;
  // 記錄拖動(dòng)前滑塊位置
  initialLeft = blockLeft.value;
  // 每次拖動(dòng)開始時(shí)，清空軌跡
  track.value = [];
  // 初始化時(shí)間戳
  lastRecordTime = Date.now();
  document.addEventListener("mousemove", onDrag);
  document.addEventListener("mouseup", endDrag);
  document.addEventListener("touchmove", onDrag);
  document.addEventListener("touchend", endDrag);
}

拖動(dòng)時(shí)：

function onDrag(e) {
  if (!dragging) return;
  // 當(dāng)前鼠標(biāo) 坐標(biāo)
  const currentX = e.type.includes("mouse")
      ? e.clientX
      : e.touches[0].clientX;
  // 位移
  const deltaX = currentX - startX;
  // 計(jì)算新的滑塊位置
  const newLeft = Math.max(
      0,
      Math.min(BG_WIDTH - BLOCK_SIZE, initialLeft + deltaX)
  );
  // 更新滑塊位置
  blockLeft.value = newLeft;
  // 軌跡采集
  const now = Date.now();
  // 每 20ms 記錄一次，模擬真人拖動(dòng)
  if (now - lastRecordTime >= 20) {
    track.value.push({
      x: Math.round(newLeft), // 當(dāng)前滑塊 
      t: now                  // 時(shí)間戳
    });
    lastRecordTime = now;
  }
}

結(jié)束拖動(dòng)：

async function endDrag() {
  if (!dragging) return;
  dragging = false;
  document.removeEventListener("mousemove", onDrag);
  document.removeEventListener("mouseup", endDrag);
  document.removeEventListener("touchmove", onDrag);
  document.removeEventListener("touchend", endDrag);
// 提交驗(yàn)證
  try {
    const res = await request.post("/imageCaptcha/verify", {
      captchaId: captchaId.value,
      // 最終滑塊位置
      moveX: Math.round(blockLeft.value),
      // 提交軌跡數(shù)組
      track: track.value
    });
    if (res.data.code === "200") {
      ElMessage.success('校驗(yàn)成功')
      // 驗(yàn)證成功，通知父組件
      emit("success");
    } else {
      ElMessage.error('校驗(yàn)失敗')
      emit("error")
    }
  } catch (err) {
    alert("驗(yàn)證失敗，請(qǐng)重試！");
    blockLeft.value = 0;
    await loadCaptcha();
  }
}

父組件

<div v-if="showCaptcha" class="captcha-mask">
  <!-- 拼圖驗(yàn)證碼 -->
  <CaptchaSlider
      v-if="showCaptcha"
      ref="slider"
      @success="onCaptchaSuccess"
      @error="onCaptchaError"
  />
</div>
// 驗(yàn)證成功
const onCaptchaSuccess = () => {
  showCaptcha.value = false
  doLogin()  //這里是登錄邏輯
}
const onCaptchaError = () => {
  showCaptcha.value = false
}

四、注意

后端生成的拼圖的大小要和前端的一樣，否則會(huì)出現(xiàn)錯(cuò)位的問題。

到此這篇關(guān)于Vue + springboot實(shí)現(xiàn)拼圖人機(jī)驗(yàn)證的文章就介紹到這了,更多相關(guān)vue springboot驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: