Merge pull request #8 from code-yeongyu/naver-captcha

사용자는 네이버 서비스의 로그인 과정에 캡챠가 필요할 경우 캡챠 로그인을 할 수 있습니다.

example/naver/reactivelyPrintPaymentHistory.ts

@@ -1,8 +1,9 @@
 import puppeteer from "puppeteer";
-import { NaverApp } from "trackpurchase";
+import { NaverApp } from ".";
 
 import readline from "readline";
 import { concat, defer, filter, from, tap } from "rxjs";
+import { CaptchaStatus } from "app/naver";
 
 const printNaverPayHistory = async (id: string, password: string) => {
   const MOBILE_UA =
@@ -38,6 +39,22 @@ const printNaverPayHistory = async (id: string, password: string) => {
         });
       }
     }),
+    tap((event) => {
+      function instanceOfCaptchaStatus(object: any): object is CaptchaStatus {
+        if (object) {
+          return "imageData" in object && "question" in object;
+        }
+        return false;
+      }
+
+      if (instanceOfCaptchaStatus(event)) {
+        console.log(`encodedImage: ${event.imageData}`);
+        console.log(`question: ${event.question}`);
+        rl.question("captcha code: ", (code) => {
+          module.pageInteractor.fillCaptchaInput(code, password);
+        });
+      }
+    }),
     filter((event) => event instanceof Array)
   );
   final$.subscribe((event) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "trackpurchase",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": {

src/app/naver/elementParser.ts

@@ -117,4 +117,8 @@ export default class ElementParser {
   async parseManualOTPInputElement() {
     return await this.page.$("#otp");
   }
+
+  async parseCaptchaInputElement() {
+    return await this.page.$("#captcha");
+  }
 }

src/app/naver/index.ts

@@ -1,7 +1,7 @@
 import Module from "./module";
 import ModuleFactory from "./moduleFactory";
 import URLChanger from "./urlChanger";
-import PageInteractor, { LoginEvent } from "./pageInteractor";
+import PageInteractor, { LoginEvent, CaptchaStatus } from "./pageInteractor";
 import ElementParser from "./elementParser";
 import Service from "./service";
 
@@ -13,4 +13,5 @@ export {
   ElementParser,
   Service,
   LoginEvent,
+  CaptchaStatus,
 };

src/app/naver/pageInteractor.ts

@@ -7,6 +7,11 @@ export type LoginEvent =
   | "manual-otp-required"
   | "unexpected";
 
+export interface CaptchaStatus {
+  readonly imageData: string;
+  readonly question: string;
+}
+
 export default class PageInteractor {
   private _fullyLoaded = false;
 
@@ -27,9 +32,9 @@ export default class PageInteractor {
 
   private async typeLoginInfo(id: string, password: string, delay: number) {
     await this.page.focus("#id");
-    await this.page.keyboard.type(id, { delay: delay || 200 });
+    await this.page.keyboard.type(id, { delay: delay });
     await this.page.focus("#pw");
-    await this.page.keyboard.type(password, { delay: delay || 200 });
+    await this.page.keyboard.type(password, { delay: delay });
     await this.clickLoginButton();
   }
 
@@ -83,6 +88,38 @@ export default class PageInteractor {
     await manualOTPElement.press("Enter");
   }
 
+  async getCaptchaStatus(): Promise<CaptchaStatus | null> {
+    const data = await this.page.evaluate(() => {
+      const captchaImage = document.querySelector(
+        "#captchaimg"
+      ) as HTMLElement | null;
+      const captchaText = document.querySelector(
+        "#captcha_info"
+      ) as HTMLElement | null;
+
+      if (!captchaImage || !captchaText) {
+        return;
+      }
+
+      const imageData = captchaImage.getAttribute("src") as string;
+      const question = captchaText.innerText;
+
+      return { imageData, question };
+    });
+
+    return data || null;
+  }
+
+  async fillCaptchaInput(answer: string, password: string) {
+    const captchaElement = await this.elementParser.parseCaptchaInputElement();
+    if (!captchaElement) {
+      throw new Error("captcha input element not found");
+    }
+    await captchaElement.type(answer);
+
+    await this.typeLoginInfo("", password, 200);
+  }
+
   async loadMoreHistory() {
     if (this._fullyLoaded) {
       return;

src/app/naver/service.ts

@@ -14,21 +14,27 @@ export default class Service {
     this.module = module;
   }
 
-  async normalLogin(id: string, password: string) {
+  async normalLogin(id: string, password: string, delay?: number) {
     await this.module.urlChanger.moveToLoginURL();
-    await this.module.pageInteractor.login(id, password);
+    await this.module.pageInteractor.login(id, password, delay);
   }
 
-  interactiveLogin(id: string, password: string) {
-    const login$ = defer(() => from(this.normalLogin(id, password)));
+  interactiveLogin(id: string, password: string, delay?: number) {
+    const login$ = defer(() => from(this.normalLogin(id, password, delay)));
     const loginStatus$ = interval(500)
       .pipe(mergeMap(() => this.module.pageInteractor.getLoginStatus()))
       .pipe(
         distinctUntilChanged(),
         takeWhile((loginStatus) => loginStatus !== "success")
       );
+    const captchaStatus$ = interval(500)
+      .pipe(mergeMap(() => this.module.pageInteractor.getCaptchaStatus()))
+      .pipe(
+        distinctUntilChanged((a, b) => a?.question === b?.question),
+        takeWhile((captchaStatus) => captchaStatus !== null)
+      );
 
-    const result$ = concat(login$, loginStatus$);
+    const result$ = concat(login$, captchaStatus$, loginStatus$);
     return result$;
   }