How to verify if this is not a bot?

[kevinvugts]

I am wondering where you implemented the token verification part? It is not included in your documentation for npm. I am talking about this case:

https://developers.google.com/recaptcha/docs/v3#site-verify-response

The second question is: how do I trigger the action only on a form submit action? I have some forms on my website that need to be verified by googles captcha.

Looking forward for your answer.

[haochang]

Hi @kevinvugts I'm using this component this moment and try to share what I found during the integration.

You have to verify the token from your backend of your application. The response will give you some information about the interaction, e.g. score. And then it's down to you to make the decision about the interaction.

You can retrieve the token and verify it before the submit action.

[ernestognw]

Hi @kevinvugts, you can set the token with the callback in your component state, and keep it there for future validation like this:

verifyCallback = (recaptchaToken) => {
    this.setState({ recaptchaToken })
}

Therefore, you should be putting a function to handle your validation on the onSubmit event at your form like this:

<form onSubmit={this.handleSubmit}>
    // Your form content
</form>

And finally, handle the submission by validating the token first and then, getting the score:

handleSubmit = async (event) => {
    event.preventDefault()
    // Use fetch, axios or whatever you need to handle your token validation with google into your server
    const response = await fetch(...)
    const result = await response.json()
   // The score should be on result.data.score
}