Skip to main content

Using reCAPTCHA for password reminders


reCAPTCHA is a feature provided by Google free of charge. It can protect websites from malicious spam posts when registering information on contact forms and other web pages.

Image from Gyazo

This tutorial explains how to integrate reCAPTCHA v2 into a password reminder.


Obtaining an API Key

To use reCAPTCHA with Kuroco, you need to first obtain an API key from Google reCAPTCHA.


※ Please note that you need a Google account to use reCAPTCHA. If you do not have an account, please create one on the Google Account Creation Page.

First, access Google reCAPTCHA and click on [Admin Console] in the upper right corner of the screen.

Image (fetched from Gyazo)

The site registration screen will appear. Fill in the required information.
Image from Gyazo

LabelEnter a clear name for your site.
reCAPTCHA TypeSelect reCAPTCHA v2.
Also, select the "I'm not a robot" checkbox.
DomainsEnter the frontend domain without the "https://" prefix.

If you want to test in a local environment, add localhost to the domain.

Read the terms of service and if there are no issues, check "I agree to the reCAPTCHA Terms of Service" and click [Submit].

Once submitted, the "Site Key" and "Secret Key" will be displayed.

Image from Gyazo

Copy these keys as they will be used in the Kuroco settings.

This completes the configuration on the Google reCAPTCHA page.

Kuroco Configuration

Next, we will configure Kuroco on the Kuroco management screen. Please log in to your Kuroco management screen.

Integrating with reCAPTCHA

Click on [External System Integration] -> [reCAPTCHA].

fetched from Gyazo

In the site management screen, enter the site key and secret key.

fetched from Gyazo

reCaptcha Site KeyEnter the value of the obtained site key.
reCaptcha Secret KeyEnter the value of the obtained secret key.

After completing the settings, click [Update] at the bottom of the screen.

Image from Gyazo

Adding an Endpoint

Next, create an endpoint. Go to the endpoint list screen and create an endpoint for the password reminder that uses reCAPTCHA.

Click [Add New Endpoint].

Image from Gyazo

Configure it as follows:


Image from Gyazo

Once the settings are done, click on [Add] to add the endpoint.

Checking with Swagger

Next, check if the endpoint has been set up correctly using Swagger UI.

From the endpoint list screen, click on "Swagger UI".

Image from Gyazo

Click on the endpoint that was set up earlier.

Image from Gyazo

Make sure that the Request body's Example Value includes the field "recaptcha_response".

Image from Gyazo

The configuration in the Kuroco management screen is now complete.

Front-end Implementation

Here is an example of how to implement reCAPTCHA authentication.

Installing the reCAPTCHA module

First, install the reCAPTCHA module for Nuxt.

Run the following command in the terminal:

npm i @nuxtjs/recaptcha

Modifying nuxt.config.js

Next, add reCAPTCHA to nuxt.config.js. Add the following to the modules: section of nuxt.config.js:

  modules: [

Also, add the following to the modules:

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

Image from Gyazo


Replace reCAPTCHA_SITE_KEY with the site key you obtained earlier.

Implementing the authentication component

Create an authentication component. In this example, create 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;

Creating the password reminder page

Next, use the above authentication component in the password reminder page where you want to introduce reCAPTCHA. In this example, we created /pages/form/index.vue as follows:

Use await this.$refs.recaptcha.fetchResponse() to get the recaptcha_response and send it to Kuroco along with the entered email address using POST.
After sending, you need to call await this.$recaptcha.reset().


The above code is a minimal and simplified version.

When you check the password reminder screen, reCAPTCHA is displayed as shown below.

Image from Gyazo

Verification Process

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 will be completed, and a temporary password for password reset will be sent to the entered email address.

Image from Gyazo

Image from Gyazo


The email for the password reminder can be edited using the template with the identifier login/reset_password in the message template.

If an invalid value is passed, an error like the following will be returned.

Image from Gyazo

This completes the configuration of reCAPTCHA.

For this basic explanation, we have provided a simple example of the setup process. For more detailed setup instructions for reCAPTCHA, please refer to the following Google documentation. Google Developers reCAPTCHA v2


If you have any other questions, please contact us or check out Our Slack Community.