js利用puppeteer实现模拟登录淘宝-逐梦个人博客

之前一直有想法搞一个淘宝客网站，但是苦于淘宝联盟账号没有淘客链接转换接口，于是想搞一个淘宝模拟登录，进而利用官方提供的链接转换工具在转换淘客链接，但是淘宝作为电商行业的巨无霸，对于登录这种关键的地方怎么可能那么容易让第三方工具登录，经过一番尝试之后以失败告终。

时过多日，再次拾起这个想法，这次我换用puppeteer来做模拟登录，下面介绍一下我是怎么一步一步模拟登录进去淘宝的。

在开始之前我们需要对puppeteer做一些了解，Puppeteer是一个Node库，它提供了一个高级API来通过DevTools协议控制Chromium或Chrome，利用puppeteer我们可以完成以下操作：

1、访问页面，进行截图

2、自动进行键盘输入，提交表单

3、模拟点击等用户操作

所以整个模拟登录的过程其实就像真人一样打开浏览器输入用户名和密码，点击登录，只不过这些输入信息和点击的动作用程序来控制而已，关于puppeteer的api这里不做介绍,不清楚的可以到https://github.com/puppeteer/puppeteer/blob/main/docs/api.md了解。

首先我们先实例化一个浏览器进程

const browser = await puppeteer.launch({
    headless: false,
    ignoreHTTPSErrors: false,
    defaultViewport: false,
    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-infobars']
});

然后创建tab页并访问淘宝联盟的登录页

const page = await browser.newPage();
await page.goto('https://login.taobao.com/member/login.jhtml?style=mini&newMini2=true&from=alimama');

查找用户名，密码输入框节点以及登录按钮节点

const $username = await page.$('#fm-login-id');
const $password = await page.$('#fm-login-password');
const $btn = await page.$('.password-login');

首先我们输入账号，并让账号输入框失去焦点，账号输入框失去焦点后淘宝会发起请求判断是否需要显示验证码。

// 输入账号
await $username.type(username);
await page.click('body');

接下来就是登录等待检测显示验证码的接口响应

page.waitForResponse(response => {
  return response.url().includes('newlogin/account/check.do');
}).then(async response => {
  
});

等待接口响应后再输入密码，这算是一个小技巧吧，至于为什么这么做，自己去手动体验一下登录过程就知道了。

// 输入密码
await $password.type(password);

然后根据上面接口响应的结果判断是否需要模拟输入验证码，我们可以通过isCheckCodeShowed这个字段来判断是否需要模拟输入验证码，验证码输入完成后点击登录按钮，然后等待跳转，登录完成。

response.json().then(async res => {
  // 有验证码显示模拟输入验证码
  if (res.content.data.isCheckCodeShowed) {
    const $code = await page.$('#nocaptcha-password');
    const size = await $code.boundingBox();
    await page.mouse.move(size.x, size.y);
    await page.mouse.down();
    await page.mouse.move(size.x + 208, size.y, { steps: 4 });
    await page.waitFor(333);
  }
  await $btn.click();
  await page.waitForNavigation();

  console.log('login successful!');
})

但是这真的就完了吗？实际过程中我们发现在有验证码的情况下我们模拟的验证码怎么也不能通过验证，经过一番研究，发现我们需要在创建page后加入下面的代码：

// 这一步很关键 用于屏蔽检测是否显示验证码
await page.evaluate(async () => {
  Object.defineProperty(navigator, 'webdriver', { get: () => false })
});

其实我们发现加入这段代码后，本来总显示的验证码现在也不显示了，网上查了资料说淘宝等平台会检测navigator.webdriver的值来校验验证码的显示和校验验证码。

另外还有一个问题是有些时候点击登录之后后要求用手机验证码做二次校验，这一步目前没办法解决，只能手动校验，但是好的是同一台电脑校验过一次下一次就不会再校验这个步骤了。

登录结果如下截图所示：

文末提供完整的示例源码包，有需要的请自行下载。

猛戳这里下载本文案例源码包