---
title: reCAPTCHAを利用したフォームを作成する
category: 外部システム連携
weight: 1
---

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

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/84df007499e3c142559bebbc8dab35fa.png)
今回は、お問合せフォームにreCAPTCHA v2を導入する手順を説明します。

## 前提
- [KurocoとNuxt.jsで、フォーム画面を構築する](/ja/docs/tutorials/setting-up-inquiry-forms/)のチュートリアルを実施し、基本的なフォーム実装について理解できていることを前提とします。
- [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へアクセスする  
[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でreCAPTCHAの設定を行う
次に、Kuroco管理画面での設定となります。ご自身のKuroco管理画面へログインしてください。

### reCAPTCHA設定画面へ遷移する
[外部システム連携] -> [reCAPTCHA]をクリックします。

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

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

![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)

## Kuroco エンドポイントの設定
### エンドポイントでreCAPTCHAを利用するように修正する
次にエンドポイントを設定します。
エンドポイント一覧画面へ移動し、reCAPTCHAを利用する `InquiryMessage::send` を設定したエンドポイントの「更新」ボタンをクリックします。

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

エンドポイント修正画面より「use_recaptcha」にチェックを入れ、「更新」ボタンをクリックします。

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

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

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

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

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

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

Request bodyより、「Schema」をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/69c972d553228f5088351a76f0dcfaa8.png)
「recaptcha_response」というプロパティが記載されていることを確認します。

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

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

## reCAPTCHA認証の実装
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のサイトキーを記入してください。
:::

## フロントエンド実装
次にフロントエンド実装します。
問い合わせフォームに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/form/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/recaptcha_for_form.vue
```

:::info
デフォルトの項目設定`name`,`email`,`message`のみのフォームをreCAPTCHAの動作確認用に追加し、利用しています。
フォームIDとエンドポイントURLはご自身のものに調整してください。
:::

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

フォーム画面を確認すると、下記のようにreCAPTCHAが表示されます。

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

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

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

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

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

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

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

:::caution
トークンの正当性確認は非ログインユーザーの場合のみ動作します。ログインユーザーの場合は検証処理をスキップします。
:::