如何在 Puppeteer 中使用 2captcha-solver 插件

#javascript

背景

在之前的文章中，小编给大家介绍了一款好用的验证码服务 2Captcha，并且撰写了一篇干货教程和一篇测评。对 2Captcha 不了解的朋友，可以先阅读这两篇文章。

干货：Nodejs Playwright 2Captcha 验证码识别实现自动登陆

测评：验证码服务 2Captcha 测评 2022 | 原理 用途 入门

2Captcha 官网

在本文中，我们将介绍如何将 2captcha-solver 插件与 Puppeteer 结合使用。

Puppeteer 是一个 Nodejs 库，可让您启动浏览器并在其中执行各种操作，这里 描述了使用示例。Puppeteer 非常适合各种自动化、编写解析器和其他需要在浏览器中实现自动化的任务。 Puppeteer 的优势在于其简单性和在headless模式下工作的能力。 Puppeteer 有现成的解决方案，可让您隐藏自动化的事实。在开发解析器时隐藏自动化的事实很重要，因为这将使浏览器看起来更像一个人而不被暴露。

在这里，我们将使用 Puppeteer、puppeteer-extra 和 puppeteer-extra-plugin-stealth 来完成我们的自动化任务。 其中，puppeteer-extra 是 Puppeteer 的轻量级包装器，puppeteer-extra-plugin-stealth 是对 puppeteer-extra 的补充，旨在隐藏自动化的痕迹。

在下面的分步描述中，我们将在 https://cn.2captcha.com/demo/recaptcha-v2 页面上描述如何自动处理验证码。

解决步骤

1. 安装组件

安装 Puppeteer 和其他所需的软件包：

npm i puppeteer puppeteer-extra puppeteer-extra-plugin-stealth

2. 设置插件

下载带有插件的archive，解压到项目根目录下的"/2captcha-solver"文件夹。

该插件有很多设置，包括自动解决指定类型的验证码，支持proxy等设置。这些设置在文件 /common/config.js 中可用。要为自动 reCAPTCHA V2 解决方案添加设置，您需要打开文件 /common/config.js 并将 autoSolveRecaptchaV2 字段的值更改为 true。

接下来，您需要配置插件：

  1. 在插件设置文件 ./common/config.js 中输入您的 API 密钥。您的密钥必须写入 apiKey 字段的值。您可以在 2Captcha 设置页面 上查看并复制您的 API 密钥。 示例：apiKey: "8080629c1221fdd82m8080000ff0c99c"

  2. 设置安装后禁止打开扩展设置页面，在文件 ./manifest.json 中删除以下行：

    "options_ui": {
    "page": "options/options.html",
    "open_in_tab": true
},

3. 浏览器自动化

在 Puppeteer 中启动和初始化插件：

const puppeteer = require("puppeteer-extra");
const StealthPlugin = require("puppeteer-extra-plugin-stealth");

(async () => {
    const pathToExtension = require("path").join(__dirname, "2captcha-solver");
    puppeteer.use(StealthPlugin());
    const browser = await puppeteer.launch({
        headless: false,
        args: [
            `--disable-extensions-except=${pathToExtension}`,
            `--load-extension=${pathToExtension}`,
        ],
    });

    const [page] = await browser.pages();
})();

3.1 打开页面

打开页面 https://cn.2captcha.com/demo/recaptcha-v2， 并发送验证码。

使用 page.goto() 我们转到页面 https://cn.2captcha.com/demo/recaptcha-v2。 接下来，您需要发送验证码以获得解决方案，这可以手动或自动完成。

在我们的示例中，我们将手动发送验证码，为此我们等到带有 CSS 选择器 .captcha-solver 的插件按钮可用，然后单击此按钮。单击按钮后，验证码将转到服务寻求解决方案。

// 打开一个页面
await page.goto("https://cn.2captcha.com/demo/recaptcha-v2");

// 等待带有 CSS 选择器“.captcha-solver”的元素可用
await page.waitForSelector(".captcha-solver");

// 点击指定选择器的元素
await page.click(".captcha-solver");

3.2 检查验证码状态

在收到服务的响应后，插件按钮 .captcha-solver 将更改数据属性 data-state 的值。通过观察这个 data-state 属性的值，你可以监控插件的状态。解决验证码后，该属性的值将变为 "solved"。

2Captcha 解决中 2Captcha 解决中

2Captcha 已解决 2Captcha 已解决

data-state 属性的值说明：

属性说明
data-state="ready"插件已准备好解决验证码。要发送验证码，您需要单击按钮。
data-state="solving"正在解决验证码。
data-state="solved"验证码已成功破解
data-state="error"接收响应或验证码时出错未成功解决。

这一步需要等到验证码被破解，之后属性值会变为"solved"，这表示验证码破解成功。在此步骤之后，您可以执行必要的操作。

// 默认情况下，waitForSelector 等待 30 秒，但是这个时间通常是不够的，所以我们用第二个参数手动指定超时值。超时值以“ms”为单位指定。
await page.waitForSelector(`.captcha-solver[data-state="solved"]`, {
    timeout: 180000,
});

4. 做动作

解决验证码后，我们就可以开始在页面上进行必要的操作了。在我们的示例中，我们将单击“检查”按钮来检查接收到的验证码解决方案的正确性。检查成功后，您会看到“验证码通过成功！”的信息。

// 点击“检查”按钮，检查验证码是否成功解决。
await page.click("button[type='submit']");

恭喜，验证码成功通过！ 该示例的完整源代码在这里：openHacking/2captcha。

当然，如果是直接拉取我的源代码来运行，步骤会更简单。

# 拉取代码
git clone https://github.com/openHacking/2captcha
cd 2captcha
# 安装依赖
npm i
# 添加API KEY
# 直接运行
node index.js

有用的信息

  • 插件有很多设置，例如自动解决指定类型的验证码或支持proxy，所有这些设置都可以在文件/common/config.js中找到，在解压插件的文件夹中。要自动发送 reCAPTCHA V2，请在文件 /common/config.js 中将 autoSolveRecaptchaV2 字段的值更改为 true。

  • 您可以使用 sandbox 模式进行测试。在沙盒模式下，发送的验证码将发送给您。了解更多关于 sandbox 你可以阅读 这里。

  • 在 headless 模式下运行的 Puppeteer 不支持加载插件，您可以使用 xvfb 来解决此问题。

参考

评论