WEB 验证－原生 JS 实现滑块验证和拼图验证

2023-10-24 16:15:19

安全验证的必要性

在当今数字化的世界里，保护网站或应用免受恶意攻击至关重要。安全验证技术能够在用户登录、支付或执行其他敏感操作时，防止机器人和恶意软件的自动化攻击。验证码作为一种安全验证方式，可以帮助识别出真正的人类用户，从而保护网站或应用的安全。

原生 JS 实现滑块验证

滑块验证是一种常见的安全验证方式，它要求用户将滑块从一个位置拖动到另一个位置，以证明他们是真人而非机器人。让我们使用原生 JS 来实现一个滑块验证：

创建验证元素

const sliderContainer = document.getElementById("slider-container");
const slider = document.getElementById("slider");

监听滑动事件

sliderContainer.addEventListener("mousedown", startSlide);

滑动过程中移动滑块

function startSlide(e) {
  e.preventDefault();
  document.addEventListener("mousemove", moveSlider);
}

松开鼠标后停止移动滑块

document.addEventListener("mouseup", stopSlide);

验证滑块位置

function stopSlide() {
  const sliderPosition = slider.offsetLeft;
  if (sliderPosition >= endPosition) {
    // 验证通过
  } else {
    // 验证失败
  }
}

原生 JS 实现拼图验证

拼图验证要求用户将打乱的拼图碎片移动到正确的位置，以证明他们是真人而非机器人。让我们使用原生 JS 来实现一个拼图验证：

创建验证元素

const puzzleContainer = document.getElementById("puzzle-container");
const puzzlePieces = document.getElementsByClassName("puzzle-piece");

随机打乱拼图碎片

shufflePuzzlePieces();

监听拼图碎片点击事件

for (let i = 0; i < puzzlePieces.length; i++) {
  puzzlePieces[i].addEventListener("click", movePuzzlePiece);
}

移动拼图碎片到正确位置

function movePuzzlePiece(e) {
  const piece = e.target;
  const correctPosition = getCorrectPosition(piece);
  if (correctPosition) {
    // 移动拼图碎片到正确位置
  }
}

验证拼图完成情况

function checkPuzzleCompletion() {
  for (let i = 0; i < puzzlePieces.length; i++) {
    const piece = puzzlePieces[i];
    const correctPosition = getCorrectPosition(piece);
    if (piece.offsetLeft !== correctPosition.left || piece.offsetTop !== correctPosition.top) {
      return false;
    }
  }

  return true;
}