recaptcha-v3 | Simple and easy to use reCAPTCHA library | Form library

This is a great question! Thanks for sharing

To the point: the docs clearly states that

The proxy option supports HTTP, HTTPS and WebSocket connections.

And also that:

If the proxy option is not flexible enough for you, alternatively you can:

Configure the proxy yourself

I know.. this is not such a great option but - using this option is production is not ideal either. Most chances that your app will be served via a real server or via API gateway with a fixed address or a valid domain

Also note that if you are using a secured connection you will also need to manage a valid certificate (or use a manage solution that will provide one)

In short: production and development have different configuration set, hence - in production you will use different config and this error will not be present. This error is likely generated only in development mode using this specific configuration

I hope that satisfy you as the rest of this answer will be more devOps regarding to production configuration rather than development guidelines

The score is associated with the token but that'll be produced when you're doing the actual backend verification request with the token itself. Step 3 of this paragraph

In a gist:

• Setup the front-end reCaptcha v3 like you've done and obtain the token
• Setup a backend validation service in a language of your choice for the verification with your secret key

Here's a node example with promises . You may just aswell simply make use of fetch

That seems to indicate a misconfigured site key. Also, there's no VueReCaptcha component (vue-recaptcha-v3 is only a plugin that provides API methods), so don't add to your template.

Based on the docs, these are the steps I took that worked for me:

1. Sign up for an API key pair for your site.

2. For Label, enter a label for the key (e.g., Codesandbox Demo)

3. For reCAPTCHA Type, choose reCAPTCHA v3.

4. For Domains, enter the domain where the key will be used (e.g., csb.app for Codesandbox), and click the + icon.

5. Check the box for Accept the reCAPTCHA Terms of Service.

6. Click Submit.

In your component, use the Composition API to setup your reCAPTCHA:

Try adding "type": "module" to your package.json.

The issue seems to be that near the top of your PHP script you are setting:

$debug = 1;

Then at the end you say:

Ok, I finally found the answer here at StackOverflow: reCAPTCHA - error-codes: 'missing-input-response', 'missing-input-secret' when verifying user's response (missing details on POST) - long story short: Googles reCAPTCHA verification server only seems to accept "Content-Type": "application/x-www-form-urlencoded", so the data sent in my case needs to be

body: 'secret=' + secretKey + '&response=' + response.

With these settings no error occurs (Please note: Data sent like this needs to be sanitized vie URLencode! I left that out in this example.) But still it's confusing that e.g. Firefox shows the correct response from Google, but the Vue application can't read it at all - response.ok euqals false!

The reason: The browser/client can't deal with a no-cors response by itself. The server has to do this! So the reCAPTCHA response has to be sent to your server and the server (e.g. PHP) has to send the data to Google's verification script. There's no other way around this. Google reCAPTCHA's docs are missing all these important points.

Also - to my own shame I just realized this now - it totally makes sense, because for the reCAPTCHA validation you need your secret reCAPTCHA key, and that one should definitely not be stored in your JS application that's sent to the client. You never give away your secret.