노드 크롤링 - 페이스북 로그인, 로그아웃 하기

const puppeteer  = require("puppeteer");

const crawler = async() => {
    try{
        const browser = await puppeteer.launch({headless: false, args:['--window-size=1920,1080']});
        const page = await browser.newPage();
        await page.setViewport({
            width:1920,
            height:1080
        })
        await page.goto('https://facebook.com');
        await page.evaluate(() => {
            document.querySelector("#email").value = "이메일"
            document.querySelector("#pass").value = "비밀번호"
            document.querySelector("button[type=submit]").click();
        })
        // await page.close();
        // await browser.close();
    }catch(err){
        console.log(err)
    }
}

crawler();

 

이렇게 코드를 진행하면 정상적으로 로그인이 실행된다.

 

 

 

하지만 해당방식으로 코딩할 경우에는 보안에 염려가 가기 때문에

.env 파일을 사용해서 보안에 적용해준다 

 

npm i dotenv

 

 

dotenv.config()를 실행한 후

 

const puppeteer  = require("puppeteer");
const dotenv = require("dotenv");
dotenv.config();
const crawler = async() => {
    try{
        const browser = await puppeteer.launch({headless: false, args:['--window-size=1920,1080']});
        const page = await browser.newPage();
        await page.setViewport({
            width:1920,
            height:1080
        })
        await page.goto('https://facebook.com');
        // evaluate 내부는 자바스크립트 스코프를 따르지 않아서 인자로 넘겨야한다.
        // const id = "onyou.lee@mincoding.co.kr";
        // const password = "1234";
        const id = process.env.EMAIL;
        const password = process.env.PASSWORD;
        console.log(id);
        console.log(password);
        await page.evaluate((id, password) => {
            document.querySelector("#email").value = id
            document.querySelector("#pass").value = password
            document.querySelector("button[type=submit]").click();
        }, id, password)
     
    }catch(err){
        console.log(err)
    }
}

crawler();

 

해당 방법으로도 로그인이 가능하다.

 

이제 로그인후 저 권한 요청창에 대한 처리를 해주어야 하는데

 

 

ESC 키를 눌러

const puppeteer  = require("puppeteer");
const dotenv = require("dotenv");
dotenv.config();
const crawler = async() => {
    try{
        const browser = await puppeteer.launch({headless: false, args:['--window-size=1920,1080']});
        const page = await browser.newPage();
        await page.setViewport({
            width:1920,
            height:1080
        })
        await page.goto('https://facebook.com');
        // evaluate 내부는 자바스크립트 스코프를 따르지 않아서 인자로 넘겨야한다.
        // const id = "onyou.lee@mincoding.co.kr";
        // const password = "1234";
        const id = process.env.EMAIL;
        const password = process.env.PASSWORD;

        // await page.evaluate((id, password) => {
        //     document.querySelector("#email").value = id
        //     document.querySelector("#pass").value = password
        //     document.querySelector("button[type=submit]").click();
        // }, id, password);
        await page.type("#email", process.env.EMAIL);
        await page.type("#pass", process.env.PASSWORD);
        //마우스 올리기
        await page.hover("button[type=submit]");
        await page.waitFor(3000);
        await page.click("button[type=submit]")
        await page.waitFor(10000);
        await page.keyboard.press("Escape")
        
     
    }catch(err){
        console.log(err)
    }
}

crawler();

요청 권한에서 나가기가 수행이된다.

 

 

 

로그아웃 구현하기

 

 

메뉴를 클릭하고 대기후에 

로그아웃 버튼을 클릭해주는 순으로 진행을 한다.

const puppeteer  = require("puppeteer");
const dotenv = require("dotenv");
dotenv.config();
const crawler = async() => {
    try{
        const browser = await puppeteer.launch({headless: false, args:['--window-size=1920,1080']});
        const page = await browser.newPage();
        await page.setViewport({
            width:1080,
            height:1080
        })
        await page.goto('https://facebook.com');
       
        //로그인
        await page.type("#email", process.env.EMAIL);
        await page.type("#pass", process.env.PASSWORD);
        //마우스 올리기
        await page.hover("button[type=submit]");
        await page.waitFor(3000);
        await page.click("button[type=submit]")
        await page.waitFor(10000);
        await page.keyboard.press("Escape");
        await page.waitFor(3000);

        //로그아웃
        await page.click("#userNavigationLabel");
        await page.waitFor(1000);
        await page.click("li.navSubmenu:last-child");
        
        
     
    }catch(err){
        console.log(err)
    }
}

crawler();

 

로그아웃이 정상적으로 수행된다.

 

 

 

마우스 이벤트 추가 버전

const puppeteer  = require("puppeteer");
const dotenv = require("dotenv");
dotenv.config();
const crawler = async() => {
    try{
        const browser = await puppeteer.launch({headless: false, args:['--window-size=1920,1080', '--disable-notifications']});
        const page = await browser.newPage();
        await page.setViewport({
            width:1080,
            height:1080
        })
        await page.goto('https://facebook.com');
        await page.evaluate(() => {
            (() => {
              const box = document.createElement('div');
              box.classList.add('mouse-helper');
              const styleElement = document.createElement('style');
              styleElement.innerHTML = `
                .mouse-helper {
                  pointer-events: none;
                  position: absolute;
                  z-index: 100000;
                  top: 0;
                  left: 0;
                  width: 20px;
                  height: 20px;
                  background: rgba(0,0,0,.4);
                  border: 1px solid white;
                  border-radius: 10px;
                  margin-left: -10px;
                  margin-top: -10px;
                  transition: background .2s, border-radius .2s, border-color .2s;
                }
                .mouse-helper.button-1 {
                  transition: none;
                  background: rgba(0,0,0,0.9);
                }
                .mouse-helper.button-2 {
                  transition: none;
                  border-color: rgba(0,0,255,0.9);
                }
                .mouse-helper.button-3 {
                  transition: none;
                  border-radius: 4px;
                }
                .mouse-helper.button-4 {
                  transition: none;
                  border-color: rgba(255,0,0,0.9);
                }
                .mouse-helper.button-5 {
                  transition: none;
                  border-color: rgba(0,255,0,0.9);
                }
                `;
              document.head.appendChild(styleElement);
              document.body.appendChild(box);
              document.addEventListener('mousemove', event => {
                box.style.left = event.pageX + 'px';
                box.style.top = event.pageY + 'px';
                updateButtons(event.buttons);
              }, true);
              document.addEventListener('mousedown', event => {
                updateButtons(event.buttons);
                box.classList.add('button-' + event.which);
              }, true);
              document.addEventListener('mouseup', event => {
                updateButtons(event.buttons);
                box.classList.remove('button-' + event.which);
              }, true);
              function updateButtons(buttons) {
                for (let i = 0; i < 5; i++)
                  box.classList.toggle('button-' + i, !!(buttons & (1 << i)));
              }
            })();
          });
        //로그인
        await page.type("#email", process.env.EMAIL);
        await page.type("#pass", process.env.PASSWORD);
        //마우스 올리기
        await page.hover("button[type=submit]");
       
        // 마우스 꾹 누르는 이벤트(드래그)
          await page.mouse.move(100, 100);
          await page.mouse.down();
          await page.mouse.move(1000, 100);

        // 마우스 움직이는 이벤트
        await page.waitFor(1000);
        await page.mouse.move(1000, 40);
        await page.waitFor(1000);
        await page.click("button[type=submit]")
        await page.waitForRequest((req) => {
            console.log(req.url().includes('login'));
            return req.url().includes('login');
          });
        await page.keyboard.press("Escape");
        await page.waitFor(3000);

        // 로그아웃
        await page.click("#userNavigationLabel");
        await page.waitFor(1000);
        await page.click("li.navSubmenu:last-child");
        
        
     
    }catch(err){
        console.log(err)
    }
}

crawler();

본 글은 아래 인프런 강의를 듣고 작성된 내용입니다

https://www.inflearn.com/course/%ED%81%AC%EB%A1%A4%EB%A7%81

Node.js로 웹 크롤링하기 - 인프런 | 강의