js如何通过用户点击来判断网页是否是机器访问还是真人访问？

简单的一点就是图形或声音验证码来识别，复杂一点就是通过用户鼠标移动的轨迹和时间点数据交给后端ai人工智能来判断是否是真人操作鼠标点击，想cloudflare的5秒盾就是采用这个技术，通过大量真人点击鼠标轨迹数据和机器模拟鼠标轨迹来训练模型，最终模型能够识别哪个是真人操作，哪个是机器所为。

以下是一个基础的示例，展示了如何在一定程度上检测鼠标轨迹：

// 定义一个对象来存储鼠标事件信息
const mouseTrack = {
  positions: [], // 存储鼠标位置
  times: [],     // 存储鼠标移动的时间点
  isHuman: false // 标志是否为真人操作
};

// 鼠标移动事件监听器
document.addEventListener('mousemove', (e) => {
  // 存储鼠标位置和当前时间
  mouseTrack.positions.push({ x: e.clientX, y: e.clientY });
  mouseTrack.times.push(Date.now());

  // 可以在这里添加更复杂的判断逻辑，例如分析速度变化、轨迹模式等
});

// 鼠标点击事件监听器
document.addEventListener('click', () => {
  // 检查鼠标移动的数据，判断是否为真人
  if (mouseTrack.positions.length > 0 && mouseTrack.times.length > 0) {
    // 例如，检查鼠标移动路径的长度
    const distance = calculateTotalDistance(mouseTrack.positions);
    // 检查时间间隔
    const timeElapsed = Date.now() - mouseTrack.times[0];

    // 设置一些基础的判断条件
    if (distance > 100 && timeElapsed > 1000) {
      // 如果鼠标移动了一定的距离，并且有一定的时间间隔，可能是真人,一般将数据发送给后端ai模型判断，如果验证成功添加tokens令牌到cookie中，以后每次请求都携带token令牌。
      mouseTrack.isHuman = true;
    }
  }

  // 清除记录的轨迹数据
  mouseTrack.positions = [];
  mouseTrack.times = [];

  // 根据判断结果进行相应的处理
  if (mouseTrack.isHuman) {
    console.log('Detected a human visitor!');
  }
});

// 用于计算鼠标移动总距离的函数
function calculateTotalDistance(positions) {
  let totalDistance = 0;
  for (let i = 1; i < positions.length; i++) {
    const dx = positions[i].x - positions[i - 1].x;
    const dy = positions[i].y - positions[i - 1].y;
    totalDistance += Math.sqrt(dx * dx + dy * dy);
  }
  return totalDistance;
}

在这个示例中，我们监听了mousemove和click事件，记录了鼠标移动的位置和时间点。在点击事件中，我们会检查存储的鼠标轨迹数据，并设置了一些简单的条件来估算用户操作是否为真人。这个代码只提供了基本的逻辑，实际应用时可能需要更复杂的分析方法，例如检查鼠标移动的加速度、停顿、方向变化等，以便更真实地模仿人类用户的行为模式，并据此进行判断。