Skip to main content

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.


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.


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

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 Front-end domain without "https://".

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.

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

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

In addition, add the following code to the module:

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

Image from Gyazo


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.

<recaptcha @error="onError" @success="onSuccess" @expired="isExpired" />
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;

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().


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.


The above code is a minimal and simplified version.

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

Image from Gyazo

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.

Image from Gyazo

Otherwise, you will get the following error:

Image 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 contact us or check out Our Slack Community.