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.

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.

Image (fetched from Gyazo)

Register your website

Enter the required information on the registration page.
fetched from Gyazo

ItemDescription
LabelEnter a name that is easy to understand (e.g., the name of your site).
reCAPTCHA typeSelect [reCAPTCHA v2] and ["I'm not a robot" tickbox].
DomainEnter the domain of your website. Do not include https://.

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.

fetched from Gyazo

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].

fetched from Gyazo

Enter the reCAPTCHA site key and secret key

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

fetched from Gyazo

ItemDescription
reCaptcha Site KeyEnter the site key you copied earlier.
reCaptcha Secret KeyEnter the secret key you copied earlier.

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

fetched from Gyazo

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.

fetched from Gyazo

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

Image from Gyazo

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.

fetched from Gyazo

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

fetched from Gyazo

Click "Schema" in the request body.

fetched from Gyazo

Look for the property named "recaptcha_response".

fetched from Gyazo

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'
  },

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: {
    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:

pages/form/index.vue
<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:

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.

fetched from Gyazo

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.

fetched from Gyazo

Otherwise, you will get the following error:

fetched from Gyazo

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

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

If you have any other questions, please use our contact form or Slack workspace.