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.
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 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.
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: '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
.
<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.
Authentication tokens are only required for non-logged-in users (i.e., guests). Logged-in users can skip the verification process.