---
title: reCAPTCHAを利用したパスワードリマインダーを作成する
category: 外部システム連携
weight: 1
---

## 概要
reCAPTCHAとは、Googleが無償で提供している機能です。  
Webサイトのお問い合わせフォーム等で情報を登録する際、悪質なスパム投稿からWebサイトを守ることができます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f6cc0132cc7db5d90668c7a29c429748.png)

今回は、パスワードリマインダーにreCAPTCHA v2を導入する手順を説明します。

### 前提条件
- [パスワードリマインダー/パスワードリセットを設定する](/ja/docs/tutorials/how-to-use-password-reminder/)のチュートリアルを実施し、基本的なパスワードリマインダーの流れについて理解できていることを前提とします。
- [reCAPTCHA v2](https://developers.google.com/recaptcha/docs/display)を利用します。

## APIキーを取得する

KurocoでreCAPTCHAを利用する場合は、先にGoogle reCAPTCHAにてAPIキーの取得が必要になります。

:::info
※ 前提として、reCAPTCHAを利用するにはGoogleアカウントが必要になります。アカウントをお持ちでない場合は、[Googleのアカウント作成ページ](https://www.google.com/intl/ja/account/about/)よりアカウント作成をお願いします。
:::

まずは、[Google reCAPTCHA](https://www.google.com/recaptcha/about/)へアクセスし、[使ってみ見る]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/b2b06c5045b04894d12524f916c3093c.png)

サイト登録画面が表示されるので、必要事項を記入します。
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/9b60f86a19a75fc5281f8461bf2beaed.png)

|項目   |説明  |
| :--- | :--- |
|ラベル|サイト名等、わかりやすい名前を入力します。|
|reCAPTCHA タイプ|reCAPTCHA v2を選択します。<br/>また、「私はロボットではありません」チェックボックスを選択します。|
|ドメイン|「`https://`」を省略したフロントエンドドメインを入力します。<br/>例：`sitekey.g.kuroco-front.app`|

:::tip
ローカル環境でテストをする場合はドメインに`localhost`を追加します。
:::

利用規約を読み、問題なければ「reCAPTCHA 利用条件に同意する」にチェックを入れ[送信]をクリックしてください。

送信されると、「サイトキー」と「シークレットキー」が表示されます。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/e95a587d8bfebe5ab8d46bb510e04138.png)
こちらのキーはKurocoの設定で利用しますので、コピーをしておいてください。

以上でGoogle reCAPTCHA画面での設定が完了です。

## Kurocoの設定
次に、Kuroco管理画面での設定となります。ご自身のKuroco管理画面へログインしてください。

### reCAPTCHAと連携する
[外部システム連携] -> [reCAPTCHA]をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/a070adc9bddf613b1fdede5ad8a05131.png)

サイト管理画面内にサイトキーとシークレットキーを入力する箇所がありますので、それぞれ入力します。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/3e2a49ac5dc4bc377b52dbb79d866a26.png)

|項目   |説明  |
| :--- | :--- |
|reCaptcha Site Key|取得したサイトキーの値を入力します。|
|reCaptcha Secret Key|取得したシークレットキーの値を入力します。|

設定完了したら、画面下部の[更新する]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/d2a00321b6d1c3f8618573aa1f877020.png)

### エンドポイントを追加する
次にエンドポイントを作成します。
エンドポイント一覧画面へ移動し、reCAPTCHAを利用するパスワードリマインダーのエンドポイントを作成します。  

[新しいエンドポイントの追加]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/108ff9ede577df0e816da0c2186508bc.png)

以下のように設定します。

|項目|値|
|:--|:--|
|パス|reminder_with_recaptcha|
|カテゴリー|認証|
|モデル|Login|
|オペレーション|reminder|
|use_recaptcha|チェックを入れる|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/7997ebc167c6e62891abd4e800df7662.png)

設定ができたら[追加する]をクリックしてエンドポイントを追加します。  

### Swaggerにて確認する  
次に、問題なくエンドポイントが設定できているか、Swagger UIを利用して確認します。

エンドポイント一覧画面より、「Swaggr UI」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/2a8c0f3eb999544e1db72c9d4600edee.png)

先ほど設定したエンドポイントをクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1bdb1707b11ab9f4e454f3c309249e92.png)

Request bodyのExample Valueに「recaptcha_response」のフィールドが記載されていることを確認します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/4295efe4fabb701dc8739af39cab7ec9.png)

以上でKuroco管理画面での設定は完了です。

## フロントエンドの実装
reCAPTCHA認証処理の実装方法例を記載します。

### reCAPTCHAモジュールのインストール
まずはNuxtのreCAPTCHAモジュールをインストールします。

ターミナルで下記実行します。

```
npm i @nuxtjs/recaptcha
```

### nuxt.config.jsの修正
次に、nuxt.config.jsにreCAPTCHAを追加します。
nuxt.config.jsの`modules:` に下記追記します。

```js
  modules: [
    '@nuxtjs/recaptcha',
  ],
```

また、モジュールに下記を追記します。

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/cddf543ed94c580313533e3904533bac.png)

:::caution
reCAPTCHA_SITE_KEYには、先程取得したreCAPTCHAのサイトキーを記入してください。
:::

### 認証コンポーネントを実装する
認証コンポーネントを作成します。
今回は、`/components/inquiry`配下に`inquiry-recaptcha.vue`というファイルを作成します。

```markup title="/components/inquiry/inquiry-recaptcha.vue"
<template>
  <recaptcha @error="onError" @success="onSuccess" @expired="isExpired" />
</template>
<script>
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;
    }
  }
}
</script>
```

### パスワードリマインダー画面を作成する
次に、reCAPTCHAを導入したいパスワードリマインダー画面で、上記認証コンポーネントを使用します。
今回は `/pages/form/index.vue` を下記のように作りました。  

`await this.$refs.recaptcha.fetchResponse()`で`recaptcha_response`を取得し、入力されたメールアドレスと合わせてKurocoにPOSTしています。  
送信後は `await this.$recaptcha.reset()` を呼び出す必要があります。 


```markup reference title="/pages/recaptha_for_password_reminders/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/recaptha_for_password_reminders.vue
```

:::caution
上記のコードは最低限の簡易的なものになっています。
:::

パスワードリマインダー画面を確認すると、下記のようにreCAPTCHAが表示されます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f6cc0132cc7db5d90668c7a29c429748.png)

### 動作の確認
「私はロボットではありません」にチェックを入れると、Submitボタンがクリックできるようになります。  
Submitボタンをクリックすると、フォームの内容に加えて、recaptcha_responseをKurocoにPostし、渡されたトークンが自動的に検証されます。  
正当な値が渡された場合、フォーム送信が完了し、入力したメールアドレス宛にパスワードリセットのための仮パスワードが届きます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/43b3659f5ed4bc77e1fe949f6032beff.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b07b1b76adf93e66f772e9f5ba1710a9.png)

:::tip
パスワードリマインダーのメールは[メッセージひな形](/ja/docs/management/email-template/)の識別子`login/reset_password`のテンプレートで編集可能です。
:::

不正な値が渡された場合は、下記のようなエラーが返ります。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/85b13daef024ef8a9ea700113d5711a9.png)

以上でreCAPTHAの設定が完了です。

今回は基本的な説明のため、簡単な設定方法を例に説明しました。
reCAPTCHAの詳しい設定方法は下記Googleのドキュメントをご参照ください。  
[Google Developers reCAPTCHA v2](https://developers.google.com/recaptcha/docs/display)

