How to correctly use no captcha reCaptcha API2

Let’s say I have a form only with one input for a username (String). Then the google no captcha reCaptcha (API2) with the checkbox “I’m not a robot” and the submit button.

When you press the submit button, the form will check that username is not empty and the captcha got a response string from the public key. If at least one of this is not correct, the user gets a notification in JavaScript right along.
And when both is present, everything is sent to the server.

On the server there are three checks:

  1. a second check that everything is filled out
  2. check the semantic of the username field: the username must exist in order to do something with it
  3. check that the reCaptcha response key is valid (through a POST on the google server)

If 1. or 2. failes, there is a return to the user (angular or whatever) and he can check the fields once again and submitting it again.
This is working fine that way. But let’s say I want to switch these three conditions. In my current code, there are many semantic checks and I do not want to check the captcha in the end because then a bot could cost a lot of computer power until he gets debunked as a bot.

So the captcha check must be earlier, like so:

  1. everything filled out?
  2. captcha ok and really a human?
  3. semantic check and so on …

But now this problem occures:
Let’s say the code comes to 3. So everything is filled out and the captcha was ok. But in the semantic there is an error and so the user gets a return with the message Please fill in an other username because this one is not present.

Now the user changes the username field and clicks the submit button again. But now the old generated captcha String is no longer valid.
Using the same String a second time on the google Server causes a timeout and a success=false.

So how to fix that?
What can I do in order to prevent this type of error? A user, that is validated as “user” should stay so.
Or is there a possible way to reset the captcha code so that the user must click on it again if he must change something in the form?
What is the proper way for this? How does other sides solved this issue?

Thanks for any suggestions.

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.