Using reCAPTCHA for forms

reCAPTCHA is a free function provided by Google to protect your website from malicious spam sent through inquiry forms or other contact forms.

This tutorial explains how to integrate reCAPTCHA v2 into your site contact form.

Prerequisite

Assuming that you have completed the tutorial on Setting up inquiry forms with Kuroco and Nuxt.js and have a basic understanding of form implementation.

Obtaining the API key

To use reCAPTCHA in Kuroco, you need the reCAPTCHA API key. This section explains how to obtain the API key and set it up on the Kuroco management screen.

info

Note: To use reCAPTCHA, you need a Google Account. You can sign up for it here.

Access the Google reCAPTCHA page

Go to Google reCAPTCHA and click [v3 Admin Console] at the top of the screen.

Register your website

Enter the required information on the registration page.

Item	Description
Label	Enter a name that is easy to understand (e.g., the name of your site).
reCAPTCHA type	Select [reCAPTCHA v2] and ["I'm not a robot" tickbox].
Domain	Enter the Front-end domain without "https://". example: sitekey.g.kuroco-front.app

tip

When testing in a local environment, add localhost to the domain.

Read the terms of use and select "Accept the reCAPTCHA terms of service". Verify that all the information is correct and click [Send].

Verify the site key and secret key

If the request is successful, the site key and secret key will be displayed.

Copy these keys to be used later.

Configuring the Kuroco management screen

Access the reCAPTCHA setup screen

Log in to the Kuroco management screen. In the sidebar menu, click [External system integration] -> [reCAPTCHA].

Enter the reCAPTCHA site key and secret key

Enter the site key and secret key you copied earlier in the corresponding fields.

Item	Description
reCaptcha Site Key	Enter the site key you copied earlier.
reCaptcha Secret Key	Enter the secret key you copied earlier.

When you have entered both keys, click [Update].

Setting up the Kuroco endpoint

Enable the use of reCAPTCHA

Next, go to the endpoint list screen. Click the [Update] button next to the InquiryMessage::send endpoint.

On the configuration dialog, check the "use_recaptcha" box and click [Update].

Verify the configuration Swagger

After configuring your endpoint, verify if it is working. To do so, click the [Swagger UI] button on the endpoint list screen.

On the Swagger UI screen, click the endpoint you configured earlier.

Click "Schema" in the request body.

Look for the property named "recaptcha_response".

Implementing the reCAPTCHA authentication

Install the reCAPTCHA module

First, install the Nuxt.js reCAPTCHA module.

Execute the following code in the terminal:

npm i @nuxtjs/recaptcha

Modify nuxt.config.js

Next, add the reCAPTCHA to your Nuxt configuration file. Paste the module below into nuxt.config.js:

  modules: [
    '@nuxtjs/recaptcha',
  ],

In addition, add the following code to the module:

 recaptcha: {
    hideBadge: true,
    language: 'en',
    siteKey: 'reCAPTCHA_SITE_KEY',
    version: 2,
    size: 'normal'
  },

caution

Substitute the expression reCAPTCHA_SITE_KEY in the above code with the site key you have copied earlier.

Setting up reCAPTCHA in the front-end

The next section explains how to set up reCAPTCHA in the front-end. For this tutorial, we will implement it on the contact form.

Implement the authentication component

First, create an authentication component. For this tutorial, we will make a file named inquiry-recaptcha.vue under components/inquiry.

/components/inquiry/inquiry-recaptcha.vue

<template>
  <recaptcha @error="onError" @success="onSuccess" @expired="isExpired" />
</template>
<script>
export default {
  methods: {
    onError() {
      this.$emit('update:is-succeeded', false);
    },
    onSuccess() {
      this.$emit('update:is-succeeded', true);
    },
    isExpired() {
      this.$emit('update:is-succeeded', false);
    },
    async fetchResponse() {
      let response;
      try {
        response = await this.$recaptcha.getResponse();
      } catch (error) {
        response = '';
      }
      this.$emit('update:is-succeeded', !!response);
      return response;
    }
  }
}
</script>

Add the authentication component to the form page

Next, in the form screen where you want to integrate reCAPTCHA, use the authentication component mentioned above. For this example, we have created /pages/form/index.vue as follows:

We obtain the recaptcha_response using await this.$refs.recaptcha.fetchResponse() and send it to Kuroco via a POST request along with the form data.
data to Kuroco using POST. After submission, you need to call await this.$recaptcha.reset().

/pages/form/index.vue

loading...

View on GitHub

info

We have added a form for testing the functionality of reCAPTCHA, which includes only the default field settings name, email, and message. Please adjust the form ID and endpoint URL to your own.

caution

The above code is a minimal and simplified version.

You will then find the following reCAPTCHA displayed on the contact form page.

Verify the response

When you check the "I'm not a robot" checkbox, the Submit button becomes clickable. Upon clicking the Submit button, the recaptcha_response is posted to Kuroco along with the form data, and the provided token is automatically validated. If a valid value is passed, the form submission is completed.

Otherwise, you will get the following error:

You have now set up a basic reCAPTCHA function on your site. Refer to Google Developers reCAPTCHA v2 for more detailed configurations.

caution

Authentication tokens are only required for non-logged-in users (i.e., guests). Logged-in users can skip the verification process.