feat: add interactive captcha handler with Slack and Discord

[klords]

Description

Added a simple captcha handler to allow better captcha experience. Currently in headless mode there is no way to deal with captcha which makes running in Docker useless. Even when running with browser open, it's still difficult to deal with captcha as other tabs can open, taking focus away from captcha page.

NOTE: This is currently only tested/used on NA Amazon. For other captcha implementations (e.g. reCAPTCHA), this can be refactored to employ a strategy per store.

Basic functionality description

Uses existing captcha detection logic. When captcha is detected, grabs captcha image URL, sends to configured service, and waits up to configured timeout for response, polling at configured intervals.

How to use

The dotenv file now has 5 new captcha-related variables.

CAPTCHA_HANDLER_POLL_INTERVAL: specify poll interval for response in milliseconds (default is 5000 = 5 seconds)
CAPTCHA_HANDLER_RESPONSE_TIMEOUT: specify response timeout in milliseconds (default is 300000 = 5 minutes)
CAPTCHA_HANDLER_SERVICE: specify messaging service to DM user (supports `discord` and `slack` currently)
CAPTCHA_HANDLER_TOKEN: token used to access messaging service's API
CAPTCHA_HANDLER_USER_ID: DM recipient's ID in messaging service

Once these have been configured, the bot will message the user specified using the defined service.

IMPORTANT: To respond, the user should either "Reply in thread" (Slack) or "Reply" (Discord) to the captcha DM, so that the bot will be able to associate the response to a streetmerchant instance. Simply DMing the bot with a response will not be detected.

Testing

Added a new functional test to the functional test folder. Simply fill out the dotenv variables (shown above) and run npm run test:captcha (or npm run test:captcha:production) to run the test and ensure the DM/response is received.

Sample images

Discord
Slack

[AlexP11223]

reCAPTCHA

It would be difficult. Definitely not via discord input. Maybe via some paid anti-captcha service.

[klords]

bug in the Discord implementation, should be quick fix, will address later tonight (Edit: fixed)

[klords]

Added some documentation as I see it's in the repo. Hope they're set up right. 🤞

[jef]

This is great! I will be testing in the coming days. Thanks so much for putting this together -- this will be a great addition!

[jef]

What an awesome addition. I'm sure a lot of folks will be loving this. Testing it was fun :)

Thanks for the contribution!

[bramevo]

Adding an auto solver would be nice too. But this one is already a great start!

[AlexP11223]

It may be a good idea to figure out how to do this without sending another captcha download request, it may fail/get detected on some websites.

I think it was possible via Canvas like this

const cnv = document.createElement('CANVAS');
const ctx = cnv.getContext('2d');
ctx.drawImage(img, 0, 0);
const base64ImgData = cnv.toDataURL();

[AlexP11223]

Looks like here are some solutions for puppeter: https://intoli.com/blog/saving-images/

[klords]

Good thought. Screen cap is part of what I had in mind for solving harder captchas workflow, so it could be employed here too.

…

On Fri, Apr 23, 2021, 1:12 PM Alex Pantechovskis ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In src/store/lookup.ts <#2385 (comment)>: > + selector: store.labels.captchaHandler?.input || 'input', + }; + const submitElementQuery = { + requireVisible: true, + selector: store.labels.captchaHandler?.submit || 'button[type="submit"]', + }; + + // get image src for captcha + const imgElementSrc = await page.evaluate((selector: string) => { + const element = document.querySelector<HTMLImageElement>(selector); + return element?.src; + }, imageElementQuery.selector); + + const response = await getCaptchaInputAsync( + imgElementSrc || + `captcha detected on [${page.url()}] but unable to get captcha image url` Looks like here are some solutions for puppeter: https://intoli.com/blog/saving-images/ — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2385 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACD4CILUAW7BJOURQBY35VTTKHIETANCNFSM43EPGTRQ> .

[AlexP11223]

Yeah, I guess one way that doesn't break CORS etc. is to get captcha coordinates, take page screenshot and crop it.

[klords]

Puppeteer lets you screen cap specific elements. We could just grab the image container directly, or a larger container in the case of a different implementation.

…

On Fri, Apr 23, 2021, 3:12 PM Alex Pantechovskis ***@***.***> wrote: Yeah, I guess one way that doesn't break CORS etc. is to get captcha coordinates, take page screenshot and crop it. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2385 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACD4CIIXQAT7RYXSH6U4XJ3TKHWE7ANCNFSM43EPGTRQ> .

[northmatt]

Neat, just recently I was thinking about doing smth a bit similar but have captcha img open to browser and do input in console. Sounds like this'll be a better way of doing things.