Puppeteerでの2captcha-solverプラグインの使い方

<H1><a href="https://pptr.dev/" rel="nofollow">Puppeteer</a>での<a href="https://chrome.google.com/webstore/detail/2captcha-solver-auto-reco/ifibfemgeogfhoebkmokieepdoobkbpo" rel="nofollow">2captcha-solver</a>プラグインの使い方</H1>

この記事では<a href="https://chrome.google.com/webstore/detail/2captcha-solver-auto-reco/ifibfemgeogfhoebkmokieepdoobkbpo" rel="nofollow">2captcha-solver</a>プラグインを<a href="https://pptr.dev/" rel="nofollow">Puppeteer</a>で使う方法を説明します。 PuppeteerはNodeライブラリで、ブラウザを起動し、その中で複数のアクションを実行できます。使い方の説明はこちら<a href="https://pptr.dev/#what-can-i-do" rel="nofollow">here</a>をご参照ください。ライブラリ、<a href="https://pptr.dev/" rel="nofollow">Puppeteer</a>はパーサーやブラウザ内のオートメーションが必要なその他のタスクを書くので、あらゆる自動化に適しています。<a href="https://pptr.dev/" rel="nofollow">Puppeteer</a>の魅力はそのシンプルさとheadlessモードで作業できる能力になります。自動化である事実を隠すPuppeteer用の既成のソリューションが存在します。自動化していることを隠すことは、ブラウザがより本物の人に見え、露呈しないのでパーサーを開発する際に重要です。
この記事では<a href="https://pptr.dev/" rel="nofollow">Puppeteer</a>、<a href="https://www.npmjs.com/package/puppeteer-extra" rel="nofollow">puppeteer-extra</a>、<a href="https://www.npmjs.com/package/puppeteer-extra-plugin-stealth" rel="nofollow">puppeteer-extra-plugin-stealth</a>を使用します。<a href="https://www.npmjs.com/package/puppeteer-extra" rel="nofollow">puppeteer-extra</a>はPuppeteer周辺の軽量ラッパーで、puppeteer-extra-plugin-stealth は自動化のトレースを隠すためにデザインされて、puppeteer-extraに追加されたものです。 
次のステップバイステップガイドで、<a href="https://2captcha.com/demo/recaptcha-v2" rel="nofollow">https://2captcha.com/demo/recaptcha-v2</a>でCAPTCHAを突破する方法をご説明します。

<H2>1.	コンポーネントをインストールする</H2>
<a href="https://pptr.dev/" rel="nofollow">Puppeteer</a>と他の必要なパッケージをインストールする:

<pre>npm i puppeteer puppeteer-extra puppeteer-extra-plugin-stealth</pre>

<H2>2.	プラグインをセットアップする</H2>
プラグインを使ってアーカイブ(<a href="https://gist.github.com/dzmitry-duboyski/40c2d733ae79b6050170b61b1424d3b9" rel="nofollow">archive</a>)をダウンロードし、プロジェクトのルート内のフォルダ<code>"/2captcha-solver"</code>に解凍します。
プラグインには特定のCAPTCHAへのソリューション、プロキシ(proxy)のサポートなどたくさんの設定があります。設定は<code>/common/config.js</code>のファイルにあります。自動reCAPTCHA V2ソリューションの設定を追加するには<code>/common/config.js</code>ファイルを開き、<code>autoSolveRecaptchaV2</code> フィールドの値を<code>true</code>に変更してください。
次にプラグインをコンフィグする必要があります。:

1.	Enter your API key in the plugin settings fileプラグイン設定ファイル <code>./common/config.js</code>にAPIキーを入力します。キーは<code>apiKey</code>フィールドの値に入れる必要があります。APIキーのコピーはこのページ(<a href="https://2captcha.com/setting" rel="nofollow">page</a>)で確認、コピーできます。
サンプル: <code>apiKey: "8080629c1221fdd82m8080000ff0c99c"</code>
2.	インストール後、拡張機能設定を開くのを無効にします。これを行うには <code>./manifest.json</code>のファイルで次の行を削除します。:
	
<pre>"options_ui": {
    "page": "options/options.html",
    "open_in_tab": true
},
</pre>

<H2>3. ブラウザ自動化</H2>
Puppeteerでプラグインを起動、初期化します。:

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

<pre>const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
const { executablePath } = require('puppeteer'); 

(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}`,
    ],
    executablePath: executablePath()
  });

  const [page] = await browser.pages()
})();
</pre>

<H3>3.1 ページを開く</H3>
<a href="https://2captcha.com/ja/demo/recaptcha-v2" rel="nofollow">https://2captcha.com/demo/recaptcha-v2</a>のページを開き、CAPTHAを送信します。
<code>page.goto()</code>を使い、<a href="https://2captcha.com/ja/demo/recaptcha-v2" rel="nofollow">https://2captcha.com/demo/recaptcha-v2</a>のページに進みます。 次に何らかのソリューションのCAPTCHAを送信する必要があります。これは手動でも自動でも実行できます。
サンプルではCAPTHCAを手動で送信するのですが、そのためにCSSセレクター、<code>.captcha-solver</code>のあるプラグインボタンが使えるようになるまで待つ必要があり、それからこのボタンをクリックします。ボタンをクリック後、CAPTCHAはソリューションのサービスに進みます。

<pre>// Opening a page
await page.goto('https://2captcha.com/demo/recaptcha-v2') 

// Waiting for the element with the CSS selector ".captcha-solver" to be available
await page.waitForSelector('.captcha-solver')
// Click on the element with the specified selector
await page.click('.captcha-solver')
</pre>

<H3>3.2 CAPTCHAのステータスを確認する</H3>
サービスからレスポンスを受信した後、プラグインボタン<code>.captcha-solver</code>はデータ属性<code>data-state</code>の値を変更します。この<code>data-state</code>属性の値を観察することで、プラグインの状態を監視することができます。CAPTCHA突破後、この属性の値は<code>"solved"</code>に変わります。
<code>Data-state</code>属性の値の概要:

<table>
<thead>
<tr>
<th>属性</th>
<th>概要</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>data-state="ready"</code></td>
<td>プラグインはCAPTCHAを解除する用意ができています。CAPTCHAを送信するにはボタンをクリックしてください。</td>
</tr>
<tr>
<td><code>data-state="solving"</code></td>
<td>CAPTCHA解除</td>
</tr>
<tr>
<td><code>data-state="solved"</code></td>
<td>CAPTCHAがうまく解除できました。</td>
</tr>
<tr>
<td><code>data-state="error"</code></td>
<td>レスポンスを受信する際にエラーが発生したか、CAPTCHAがうまく解除できませんでした。</td>
</tr>
</tbody>
</table>

このステップではCAPTCHAを突破するまで待つ必要があり、属性の値が<code>"solved"</code>に変わった後、CAPTHCHA突破成功を知らせます。このステップの後は必要なアクションを行えます。

<pre>// By default, waitForSelector waits for 30 seconds, but this time is usually not enough, so we specify the timeout value manually with the second parameter. The timeout value is specified in "ms".
await page.waitForSelector(`.captcha-solver[data-state="solved"]`, {timeout: 180000})</pre>

<H2>4. アクションの実行</H2>
CAPTCHA突破後、ページで必要なアクションの実行を開始できます。サンプルでは受信したCAPTCHAソリューションAの精密性を確認するために”Check”ボタンをクリックします。チェックをうまく通過すると、"Captchaを無事突破しました！"というメッセージが表示されます。

<pre>// Click on the "Check" button to check the successful solution of the captcha.
await page.click("button[type='submit']")</pre>

おめでとうございます。CAPTCHAをうまく通過できました！サンプルの完全なソースコードはこちら(<a href="https://gist.github.com/dzmitry-duboyski/40c2d733ae79b6050170b61b1424d3b9" rel="nofollow">here</a>)。

<H2>役立つ情報</H2>
●	プラグインにはたくさんの設定があります。例えば特定のタイプのCAPTCHAの自動ソリューションや<code>proxy</code>のサポート、すべての設定は解凍していないプラグインのあるフォルダの中のファイル<code>/common/config.js</code>にあります。reCAPTCHA V2を自動送信するにはファイル<code>/common/config.js</code>で<code>autoSolveRecaptchaV2</code>フィールドの値をtrueに変更してください。
●	<a href="https://2captcha.com/ja/2captcha-api#sandbox" rel="nofollow">sandbox</a>モードを使ってテストすることが可能です。sandboxモードでは送信されたCAPTCHAはあなたに届きます。<a href="https://2captcha.com/ja/2captcha-api#sandbox" rel="nofollow">sandbox</a>について学ぶにはこちら(<a href="https://2captcha.com/ja/2captcha-api#sandbox" rel="nofollow">here</a>)をお読みください。
●	<code>headless</code>モードでPuppeteerを実行する際はプラグインの読み込みに対応していません。この問題を解決するには<a href="https://en.wikipedia.org/wiki/Xvfb" rel="nofollow">xvfb</a>を利用できます。

役立つリンク
●	サンプルの完全なソースコードはこちら(<a href="https://gist.github.com/dzmitry-duboyski/40c2d733ae79b6050170b61b1424d3b9" rel="nofollow">here</a>)
●	<a href="https://github.com/2captcha/2captcha-solver" rel="nofollow">2captcha-solver</a> (ソースコード)
●	<a href="https://chrome.google.com/webstore/detail/2captcha-solver-auto-reco/ifibfemgeogfhoebkmokieepdoobkbpo9" rel="nofollow">2captcha-solver</a> (chrome web store)
●	デベロッパー向け2captchaサービスのFAQ <a href="https://2captcha.com/support/faq/developer" rel="nofollow">https://2captcha.com/support/faq/developer</a>
●	<a href="https://pptr.dev/" rel="nofollow">Puppeteer</a>
●	<a href="https://www.npmjs.com/package/puppeteer-extra" rel="nofollow">puppeteer-extra</a>
●	<a href="https://www.npmjs.com/package/puppeteer-extra-plugin-stealth" rel="nofollow">puppeteer-extra-plugin-stealth</a>
●	<a href="https://en.wikipedia.org/wiki/Xvfb" rel="nofollow">xvfb</a>