使用JavaScript和Puppeteer实现滑动验证码识别及自动登录的完整教程

准备工作
确保你已经安装了Node.js和Puppeteer库，并且能够访问网络。

实现步骤
1. 初始化
首先，创建一个新的Node.js项目，并安装Puppeteer库。

bash

npm init -y
npm install puppeteer
2. 模拟登录填写，点开滑块验证
在模拟登录过程中，我们需要输入账户和密码，然后点击滑块验证按钮。

javascript

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://account.geetest.com/login');

  await page.type('#email', 'your_email');
  await page.type('#password', 'your_password');
  await page.click('.geetest_radar_tip');

  // 其他操作...
})();
3. 获取并储存有无缺口的两张图片
接下来，我们需要获取网页截图并裁剪出验证码图片，包括有缺口和无缺口的图片。

javascript

const fs = require('fs');

async function saveCaptchaImage(page, filename) {
  const captchaElement = await page.$('.geetest_canvas_img');
  const screenshot = await captchaElement.screenshot();
  fs.writeFileSync(filename, screenshot);
}

(async () => {
  // 模拟登录填写...

  await saveCaptchaImage(page, 'captcha1.png');
  await page.click('.geetest_slider_button');
  await saveCaptchaImage(page, 'captcha2.png');

  // 其他操作...
})();
4. 获取缺口位置
通过对比两张图片的像素点，找到缺口位置。

javascript

const Jimp = require('jimp');

function getGapPosition(image1, image2) {
  const threshold = 60;
  for (let x = 0; x < image1.bitmap.width; x++) {
    for (let y = 0; y < image1.bitmap.height; y++) {
      const pixel1 = image1.getPixelColor(x, y);
      const pixel2 = image2.getPixelColor(x, y);
      const rgb1 = Jimp.intToRGBA(pixel1);
      const rgb2 = Jimp.intToRGBA(pixel2);
      if (Math.abs(rgb1.r - rgb2.r) < threshold && Math.abs(rgb1.g - rgb2.g) < threshold && Math.abs(rgb1.b - rgb2.b) < threshold) {
        return x;
      }
    }
  }
  return 0;
}

(async () => {
  // 模拟登录填写...
  // 获取并储存有无缺口的两张图片...

  const captcha1 = await Jimp.read('captcha1.png');
  const captcha2 = await Jimp.read('captcha2.png');
  const gap = getGapPosition(captcha1, captcha2);
  console.log('缺口位置:', gap);

  // 其他操作...
})();
5. 获取移动轨迹
根据缺口位置计算出拖动滑块的轨迹。

javascript
Copy code
function getTrack(distance) {
  const track = [];
  let current = 0;
  const mid = distance * 4 / 5;
  const t = 0.2;
  let v = 0;

  while (current < distance) {
    const a = current < mid ? 2 : -3;
    const v0 = v;
    v = v0 + a * t;
    const move = v0 * t + 0.5 * a * t * t;
    current += move;
    track.push(Math.round(move));
  }

  return track;
}

(async () => {
  // 模拟登录填写...
  // 获取并储存有无缺口的两张图片...
  // 获取缺口位置...

  const track = getTrack(gap);
  console.log('滑动轨迹:', track);

  // 其他操作...
})();
6. 按照轨迹拖动，完成验证
最后，根据计算出的轨迹拖动滑块完成验证。

javascript

async function moveSlider(page, track) {
  const slider = await page.$('.geetest_slider_button');
  const sliderBox = await slider.boundingBox();
  const sliderHandle = await page.$('.geetest_slider_button');

  await page.mouse.move(sliderHandle.boundingBox().x + sliderBox.width / 2, sliderHandle.boundingBox().y + sliderBox.height / 2);
  await page.mouse.down();
  for (const x of track) {
    await page.mouse.move(sliderHandle.boundingBox().x + x, sliderHandle.boundingBox().y + sliderBox.height / 2);
  }
  await page.mouse.up();
}

(async () => {
  // 模拟登录填写...
  // 获取并储存有无缺口的两张图片...
  // 获取缺口位置...
  // 获取移动轨迹...

  await moveSlider(page, track);

  // 其他操作...
})();
7. 完成登录
如果验证成功，则执行登录操作。

javascript

(async () => {
  // 模拟登录填写...
  // 获取并储存有无缺口的两张图片...
  // 获取缺口位置...
  // 获取移动轨迹...
  // 按照轨迹拖动...

  await page.click('.login-btn');
  await page.waitForTimeout(10000); // 等待10秒钟，让登录成功后的操作完成
  console.log('登录成功');

  // 其他操作...
})();

更多内容联系1436423940