Using reCAPTCHA

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

For this tutorial, we assume that you have created the contact form using Nuxt.js. (If you have not created the contact form yet, see Setting up inquiry forms with Kuroco and Nuxt.js for a full tutorial).

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.

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.

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.

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: 'ja',
    siteKey: 'reCAPTCHA_SITE_KEY',
    version: 2,
    size: 'normal'
  },

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.

<template>
  <recaptcha @error="onError" @success="onSuccess" @expired="isExpired" />
</template>
<script>
export default {
  methods: {
    components: {
      InquiryRecaptcha
    },
      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, add the above authentication component to the form page where you want to implement the reCAPTCHA. Modify the pages/form/index.vue file as follows:

<template>
  <input type="text" v-model="formData.ext_01" />
  ・・・
  <inquiry-recaptcha ref="recaptcha" :is-succeeded.sync="canSubmit" />
  <button type="submit" disabled="!canSubmit" />
</template>


<script>
import InquiryRecaptcha from '@/components/inquiry/inquiry-recaptcha.vue'
・・・
export default {
  components: {
    ・・・
    InquiryRecaptcha,
  },
  data: {
    formData: {
      ext_01: '',
      ・・・
    },
    canSubmit: false,
  }
</script>

Submit the form

After posting to the endpoint and passing the authentication result token, call await this.$recaptcha.reset() by adding the code below to pages/form/index.vue:

<script>
methods: {
    async submit() {
      this.$axios.$post('/form', {
        ...this.formData,
        recaptcha_response: await this.$refs.recaptcha.fetchResponse(),
      }).then((response) => {
        if (response.errors.length > 0) {
          throw new Error('Post failed.');
        }
        this.$router.push({ path: '/form/' });
      }).catch((response) => {
        this.canSubmit = false;
      });
      await this.$recaptcha.reset();
    },
</script>

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

Verify the response

Once the value has been passed to recaptcha_response, the system automatically validates the passed token. If the correct value was passed, the form will be submitted.

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.