masalibの日記

システム開発、運用と猫の写真ブログです

puppeteerでCMSのログイン処理

masalib.hatenablog.com

管理系処理なら必須のログイン処理を作ってみました

設定ファイル

テスト用実行フォルダ/config.json

{
  "MASALIB_SITE_ID": "masalib",
  "MASALIB_SITE_PW": "password"
}

ログインするならこれは必要ですよね
git登録するならこの部分を除外設定かな

ログイン用のモジュール

//設定ファイルを読み込む
const {MASALIB_SITE_ID, MASALIB_SITE_PW} = require('./config.json');
const cookies_path = './cookies_masalib_site.json';

/**
 * Cookieなしのログイン
 */

exports.loginproc = async function (page) {
  console.log(MASALIB_SITE_ID);
  console.log(MASALIB_SITE_PW);
  await page.goto('http://masalib.jp/admin/login.asp');
  await page.screenshot({path: 'images/masalib_site_before_login.png'});
  await page.focus('input[name=loginuser]');
  await page.type(MASALIB_SITE_ID);
  await page.focus('input[name=passwd]');
  await page.type(MASALIB_SITE_PW);
  const inputElement = await page.$('input[type=submit]');
  await inputElement.click();
  await page.waitFor(2000);
  await page.screenshot({path: 'images/masalib_site_logined.png'});
};

/**
 * Cookieを利用してログイン
 */
exports.loginWithCookie = async function (page) {
  const cookies = JSON.parse(fs.readFileSync(cookies_path, 'utf-8'));
  for (let cookie of cookies) {
    await page.setCookie(cookie);
  }
};

imagesのフォルダの存在チェックはしていません
本来はすべきかも


ログイン処理(main処理)

テスト用実行フォルダ/site_login.js

const puppeteer = require('puppeteer');
const fs = require('fs');//クッキー保存で使用
var loginmodule = require('./loginWithCookie.js');//ログイン用もモジュール

(async () => {
  //headless: trueだと画面表示なしfalseなら画面あり
  const browser = await puppeteer.launch({
    headless: true,
  });
  const page = await browser.newPage();
  await page.setViewport({width: 1280, height: 700});

  await loginmodule.loginproc(page);

  const afterCookies = await page.cookies();
  fs.writeFileSync('cookies_masalib_site.json', JSON.stringify(afterCookies));

  browser.close();
})();

参考サイト

下記のサイトをほぼ丸パクリしました
www.meganii.com

すいません
このサンプルがなければcookie処理がわかりませんでした


参考サイトと違う点

  • テストサイトががクソ古くてclassもidも設定されていないのfocusの部分が違う
  • サンプル側だとログインの入力時に
await page.waitFor(2000);

でまっているのですが待っていません

  • 他の画面でも使いたかったのでログイン処理を別ファイルにした事です

Being Elmo: A Puppeteer's Journey

Being Elmo: A Puppeteer's Journey


今後

CMSでやるのはファイルアップ
そしてCSVファイルのダウンロードかな