Node.js 아 날로 그 슬라이딩 퍼 즐 인증 코드 를 사용 하 는 예제 코드

최근 몇 년 동안 홈 페이지 에 각종 신형 인증 코드 가 끊임없이 등장 했다.그 중에서 가장 흔히 볼 수 있 는 것 은 미끄럼 인증 코드 이다.예 를 들 어 다음 그림 과 같다.

본 고 는 순 전단 방법 으로 미끄럼 종점 을 찾 아 미끄럼 을 모 의 하 는 방법 을 소개 했다.
우 리 는 세 개의 의존 창고 가 필요 하 다.puppeteer,Resemble.js그리고canvas.그 중에서puppeteer페이지 를 열 고 조작 하 는 데 사용 되 고Resemble.js및canvas미끄럼 인증 코드 의 종점 위 치 를 찾 는 데 사용 된다.관련 의존 도 는 다음 과 같다.

"dependencies": {
 "canvas": "^1.6.7",
 "puppeteer": "^0.12.0",
 "resemblejs": "^2.2.6"
}

다음은 실현 요점 이다.우선 필요 한 라 이브 러 리 를 도입 하여 상수 정 의 를 내 립 니 다.

const fs = require('fs')
const puppeteer = require('puppeteer')
const resemble = require('resemblejs')
const Canvas = require('canvas')

const URL = 'xxx' //          
const width = 600
const height = 400
const slider_width = 44

const sleep = duration => {
 return new Promise(resolve => {
 setTimeout(resolve, duration)
 })
}

다음puppeteer을 사용 하여 인증 코드 페이지 를 엽 니 다.

const browser = await puppeteer.launch()
const page = await browser.newPage()
page.setViewport({width, height})

await page.goto(URL, {
 waitUntil: 'networkidle'
})

그리고 페이지 에 JS 를 주입 하여 인증 코드 슬라이더 의 위 치 를 가 져 옵 니 다.이 코드 는 당신 이 자신의 페이지 의 실제 상황 에 따라 조정 해 야 할 수도 있 습 니 다.

const offset = await page.evaluate(() => {
 let offset_ifr = $('iframe').offset()

 return {
 top: offset_ifr.top + 222,
 left: offset_ifr.left + 10
 }
})

다음은 마우스 왼쪽 단 추 를 누 르 고 놓 고 각각 캡 처 하 는 시 뮬 레이 션 을 한다.

await page.mouse.move(offset.left + 10, offset.top + 10)
//     
await page.mouse.down({
 button: 'left'
})
//       
await sleep(500)
//   
await page.screenshot({path: 'screenshot2.png'})

await page.mouse.up({
 button: 'left'
})
//       
await sleep(500)
//   
await page.screenshot({path: 'screenshot3.png'})

이때 두 개의 그림 을 얻 을 수 있 습 니 다.

그리고:

이 를 통 해 알 수 있 듯 이 두 그림 의 나머지 부분 은 모두 같 고 인증 코드 슬라이더 와 목표 위 치 를 표시 하 는 지 여부 에 차이 가 있다.
다음은Resemble.js이 등장 할 차례 다.이 를 통 해 두 개의 그림diff결 과 를 얻 을 수 있다.

await new Promise(resolve => {
 resemble.outputSettings({
 transparency: 0
 })
 resemble('screenshot2.png')
 .compareTo('screenshot3.png')
 .ignoreColors()
 .onComplete(data => {
  fs.writeFileSync('diff.png', data.getBuffer())
  resolve()
 })
})

결 과 는 다음 과 같다.

그 다음 에canvas라 이브 러 리 를 사용 하여 이diff그림 을 메모리 에 읽 고 오른쪽 상단 에서 찾기 시작 하면 가장 오른쪽 색상 블록 의 위치,즉 슬라이더 종점 의 위 치 를 쉽게 찾 을 수 있 습 니 다.

const getDestinationX = min_x => {
 const canvas = new Canvas(width, height)
 const ctx = canvas.getContext('2d')
 const buf = fs.readFileSync('diff.png')
 const img = new Canvas.Image()
 img.src = buf
 ctx.drawImage(img, 0, 0, width, height)
 const img_data = ctx.getImageData(0, 0, width, height).data

 let destination_x = -1

 for (let y = 0; y < height; y++) {
 for (let x = width; x >= min_x; x--) {
  let p = width * y + x
  p = p << 2
  if (img_data[p + 3] === 255 && img_data[p - 10 * 4 + 3] === 255) {
  destination_x = x
  break
  }
 }
 if (destination_x > -1) break
 }

 return destination_x - slider_width
}

이렇게 해서 슬라이더 의 시작 위치 와 종점 위 치 를 얻 었 고puppeteer의page.mouse.move방법 으로 드래그 를 모 의 하여 슬라이더 를 종점 위치 로 끌 면 된다.

물론 슬라이더 의 종점 을 찾 아 슬라이더 를 정확 한 종점 위치 로 끌 어 올 리 는 것 은 첫 걸음 일 뿐 완벽 한 미끄럼 인증 코드 는 정확 한 위치 로 미 끄 러 졌 는 지 판단 하지 않 고 드래그 궤적 도 분석 할 것 입 니 다.사람 이 미 끄 러 지 는 궤적 과 기계 가 미 끄 러 지 는 궤적 이 매우 다르다 는 것 을 알 아야 한다.구체 적 으로 어떻게 구분 하 는 지 는 또 다른 복잡 한 화제 이다.
마지막 으로 본 고 는 연구 참고 만 제공 할 뿐 상세 한 코드 를 묻 지 마 세 요.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.