Node puppeteer は Web サイトのログイン監視のアイデア共有を実装します-jsチュートリアル-php.cn

Node puppeteer は Web サイトのログイン監視のアイデア共有を実装します

php中世界最好的语言

リリース： 2018-05-30 15:24:36

オリジナル

2364 人が閲覧しました

今回は、ノード Puppeteer を使用して Web サイトのログイン監視を実装するためのアイデアを共有します。Web サイトのログイン監視を実装する際にノード Puppeteer が注意すべき点は何ですか。以下は実際のケースです。一緒に。

puppeteer の紹介puppeteer は、Chrome チームによって開発されたノードライブラリで、クリック、ジャンプ、更新、コンソールでの JS スクリプトの実行など、ブラウザの動作を制御できます。。このアーティファクトを使用すると、クローラーの作成、自動サインイン、Web ページのスクリーンショットの取得、PDF の生成、テストの自動化が簡単に行えます。

puppeteer の簡単な例コードは公式 Web サイトから引用しています:

const puppeteer = require('puppeteer');
(async () => {
 const browser = await puppeteer.launch();//打开浏览器
 const page = await browser.newPage();//打开一个空白页
 await page.goto('https://example.com');//在地址栏输入网址并等待加载
 await page.screenshot({path: 'example.png'});//截个图
 await browser.close();//关掉浏览器
})();

ログイン後にコピー

上記のコードを読むと、1. コードの各ステップは非同期操作である、2. 各ステップは実際にブラウザを使用する行為。この 2 つの点を理解することは、このライブラリを使用する上で非常に役立ちます。さらに、最も一般的に使用される 2 つのオブジェクトはブラウザーオブジェクトとページオブジェクトです。この 2 つのオブジェクトを操作するために使用されるオブジェクトには多数のメソッドがあります。次に、Web サイトにログインするための小さなデモを作成します。

認証コードのないウェブサイト認証コードのないウェブサイトの場合、基本的には、アカウント番号を入力し、パスワードを入力し、クリックしてログインするという 3 つの手順になります。ページオブジェクトの 2 つのメソッドが必要です。タイプが使用されています入力ボックスに情報を入力し、クリックしてログインします。 Douban へのログインを例に挙げてみましょう:

const puppeteer = require('puppeteer');
const account = `123456@qq.com`;
const password = `123456`;
(async () => {
 const browser = await puppeteer.launch();//打开浏览器
 const page = await browser.newPage();//打开一个空白页
 await page.goto('https://www.douban.com/');//打开豆瓣网站
 await page.type('#form_email', account);  
 await page.type('#form_password', password);
 await page.click('.bn-submit');
 await page.waitForNavigation({
  waitUntil: 'load'
 });//等待页面加载出来，等同于window.onload
 await page.screenshot({path: 'example.png'});//截个图
 await browser.close();//关掉浏览器
})();

ログイン後にコピー

ログインに成功したかどうかをどうやって確認すればよいのですか? デバッグの 1 つの方法は、認証コードページが表示された場合、ログインしていないことを意味します。成功した場合は、次のような別の方法もあります:

1	`const` `browser = await puppeteer.launch({headless: false});//打开有界面的浏览器`

ログイン後にコピー

headless: false を渡すと、実際にブラウザーインターフェイスが開き、コードがどこで実行されているかをリアルタイムで確認できます。次に、確認コードが表示された場合の対処方法について説明します。

確認コードのある Web サイト

確認コードのある Web サイトに遭遇した場合は、ヘッドレスを false に設定し、インターフェイスを使用して確認コードを入力し、同時にページの読み込みイベント

を監視してログインを実現できます。コードは次のとおりです:

...
 await page.waitForNavigation({
  waitUntil: 'load'
 });//等待页面加载出来，等同于window.onload
//代码中监听跳转事件
if(page.url() === 'https://www.douban.com/accounts/login'){ 
   //登录不成功
  console.log('需要输入验证码');
  //等待再一次跳转
  while(true){
    await page.waitForNavigation({
      waitUntil: 'load'
    })
    console.log(page.url())
    if(page.url() === 'https://www.douban.com/'){
      console.log('登录成功');
      break;
    }
  }
 }