mCaptcha / glue

glue code to setup mCaptcha on your website
7 stars 6 forks source link

Feature Request: Autostart solving captcha with a trigger (React) #73

Open SebastianGode opened 5 months ago

SebastianGode commented 5 months ago

It would be great if the captcha check could be automatically started with a JavaScript trigger. I haven't found a way to do that (or at least I'm not aware of one).

Background: If I use the captcha for a contact form it can automatically be solved once the user enters the text in a text field so he doesn't need to click on it and wait for it before sending the contact formular.

Solutions like FriendlyCaptcha have this feature.

realaravinth commented 5 months ago

I've thought about this feature before. I'm not sure how FriendlyCaptcha works, but in mCaptcha we have lifetimes for the PoW challenges (and the authorization token received after successful PoWs). The lifetime is the same as the cooldown period.

So if PoW generated becomes too old, then it will be rejected. And since it is a background process, the visitor will experience unexplained delay because of it.

Personally, I would love to see this feature in mCaptcha, but t has to be built with good guardrails. I would appreciate any input that you might have in this regard.

SebastianGode commented 5 months ago

Generally the easiest solution would be to just increase the lifetime to like 5minutes. If it takes even longer for the user to fill something in, the frontend captcha would just need to get back to a "timeout" state and recheck again. ReCaptcha does that in the same way, if you fill out the captcha and you need more than 5min, it will automatically return to the non-filled state as the token isn't valid anymore. I would assume that FriendlyCaptcha does it the same way.

ddillert commented 4 months ago

Wouldn't the following workflow be viable to minimize disruption to the user?

  1. Allow the client to handle PoW solutions in the background.
  2. Implement a mechanism to time the client-side PoW operation.
  3. Upon successful PoW solution, automatically submit it for token retrieval. Additionally, provide a new PoW challenge in the response.
  4. The client solves the new PoW challenge when the client-side timer approaches the remaining token lifetime, minus the time taken to solve the previous PoW, plus a relative buffer (5-20%). This ensures a seamless transition without unnecessary interruptions.
  5. Once the new PoW challenge is solved, automatically submit it for token retrieval and receive a new PoW challenge. This iterative process continues until the user submits the form or the operation is completed.

Using this approach, the token's lifetime remains unchanged, and the mCaptcha widget can be completely hidden from the user. Additionally, users no longer have to wait for the result after clicking, further enhancing the user experience.

TL;DR: The client continuously to receives, solves, and submits challenges until the user initiates the final action necessitating the computed token.