新浪微博登录有多个入口，这次处理的是移动版登录入口。
从这个入口登录，账密是明文传输的，验证码则是手势型：
手势验证码
模拟手势操作
我们需要模拟根据给出图形的特定手势（拖动）操作。
这个操作实际上就是 [移动鼠标到第一个点]-[按下鼠标左键]-[拖动鼠标经过各点]-[松开鼠标左键]。
使用Google出品的puppeteer库，可以轻松实现手势操作。
解析手势路径
由于可见的图形经过了切片编码，已不能从前端代码中分析。我们可以直接通过图像处理获取。
puppeteer支持屏幕截图，可以获取路径图像。
要通过图像获取手势路径，有3个方向：
1、机器学习。但因图像数量有限，其实没有必要用机器学习。
2、图像分析。直接使用Python的pillow等工具，分析图像内容，找到正确的手势路径。需要解析线和箭头的方向。这种方式也相对复杂。
3、穷举比对。由于4点连线，共有24种情况。可以预先截取24种情况的图形，并写好对应的路径。获取到图象后，和这24种比对，找到最接近的一种即可。
方法3，在这个问题下，最为简单。下面的代码就使用了这种方法。
以下是示例程序
说明：最终以拿到登录成功请求返回的headers["set-cookie"]值为成功标志。
演示：
序列 02.gif
代码：
* 这里先在/path24目录下存好了24种情况的截图，并按路径命名。如“0321.png”。
// 微博登录，使用puppeteer
const urls = {
loginPage: 'https://passport.weibo.cn/signin/login?entry=mweibo&res=wel&wm=3349&r=https%3A%2F%2Fm.weibo.cn%2F'
};
const puppeteer = require('puppeteer');
const pathAnalyzer = require('./pathAnalyzer');
const acct = `1*********`;
const pass = `******`;
function wait(ms) {
return new Promise(resolve => setTimeout(() => resolve(), ms));
}
async function main (){
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.goto(urls.loginPage);
await page.waitForSelector('#loginName');
await page.waitForSelector('#loginPassword');
await page.waitForSelector('#loginAction');
await wait(1000);
// 填入账密并提交
await page.type('#loginName', acct);
await page.type('#loginPassword', pass);
await page.click('#loginAction');
// 等待路径图出现
await wait(500);
await page.waitForSelector('.patt-guide');
await page.evaluate(selector => {
document.querySelector(selector).className = document.querySelector(selector).className.replace(selector.substr(1), '');
}, '.patt-guide');
// 获取路径点信息
// tip: js方法需在evaluate()中执行
const rects = await page.evaluate(selector => {
const $dots = document.querySelectorAll(selector);
const rects = [];
// tip: 必须重新整理对象
for (const i of [0,1,2,3]) {
const {x, y, width, height} = $dots[i].getBoundingClientRect();
rects.push({x, y, width, height});
}
return rects;
}, '.patt-circ');
// 获取路径点pos
const poses = rects.map(rect => {
return {
x: rect.x + rect.width / 2,
y: rect.y + rect.height / 2,
}
});
// 四个点顺时针排列，2、3位交换
[poses[2], poses[3]] = [poses[3], poses[2]];
// 等待路径图加载好
await wait(1000);
// 保存路径图
await page.screenshot({
path: 'path-tmp.png',
clip: {
x: rects[0].x,
y: rects[0].y,
width: 160,
height: 160
}
});
// 解析路径
const path = await pathAnalyzer.getPath();
console.log('path', path);
// 按路径移动
await page.mouse.move(poses[path[0]].x, poses[path[0]].y);
await page.mouse.down();
for (let i of path.slice(1)) {
await page.mouse.move(poses[i].x, poses[i].y, {
steps: 10
});
}
await page.mouse.up();
function getCookieOnLogin() {
return new Promise((resolve, reject) => {
page.on('response', async response => {
if (response.url().startsWith('https://captcha.weibo.com/api/pattern/verify')) {
const text = await response.text();
if (!text.includes('"100000"')) {
return reject(new Error('验证失败'))
}
}
if (response.url() === 'https://passport.weibo.cn/sso/login') {
const cookieStr = response.headers()['set-cookie']
.split('\n')
.map(c => c.substring(0, c.indexOf(';')))
.join(';');
resolve(cookieStr);
}
});
});
}
try {
return await getCookieOnLogin();
} catch (e) {
throw e;
} finally {
await browser.close();
}
}
~async function () {
const cookieStr = await main();
console.log('cookie', cookieStr);
} ();
// pathAnalyzer.js
const fs = require('fs');
const pixel = require('pixel');
let path24;
/**
* 获取路径
* 通过与缓存24种图片比对
* @returns {Promise<*>}
*/
async function getPath() {
if (!path24) {
path24 = [];
const files = fs.readdirSync('./path24');
for (filename of files) {
const filepath = './path24/' + filename;
path24.push({
data: (await pixel(filepath))[0].data,
path: filename.match(/\d{4}/)[0].split('').map(v => +v)
});
}
}
const thisData = (await pixel('./path-tmp.png'))[0].data;
const pathDiffList = [];
for (const {path, data} of path24) {
pathDiffList.push({
path,
diff: compare(data, thisData)
});
}
pathDiffList.sort((a, b) => {
return a.diff - b.diff;
});
return pathDiffList[0].path;
}
/**
* 比对两个list，获取均方差
* @param l1
* @param l2
* @returns {number}
*/
function compare(l1, l2) {
diffTotal = 0;
for (const [i, v1] of Object.entries(l1)) {
v2 = l2[i];
diff = Math.abs(v1 - v2);
diffTotal += Math.pow(diff, 2);
}
return Math.pow(diffTotal, 1/2);
}
module.exports = {
getPath
};
