reCAPTCHAを利用する

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

今回は、お問合せフォームにreCAPTCHA v2を導入する手順を説明します。

前提

• Nuxt.jsでお問合せフォームが作られていることを前提とします。
  まだお問合せフォームを作成していない方は、[チュートリアル] -> [KurocoとNuxt.jsで、フォーム画面を構築する] を参考にお問合せフォームを作成してください。

• reCAPTCHA v2を利用します。

APIキーの取得方法

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

Google reCAPTCHAへアクセスする

Google reCAPTCHAへアクセスし、画面右上の[Admin Console]をクリックします。

サイト登録を行う

サイト登録画面が表示されるので、必要事項を記入します。

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

サイトキー、シークレットキーを確認する

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

こちらのキーはKurocoの設定で利用しますので、コピーをしておいてください。

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

KurocoでreCAPTCHAの設定を行う

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

reCAPTCHA設定画面へ遷移する

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

reCAPTCHAサイトキー、シークレットキーを入力する

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

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

Kuroco エンドポイントの設定

エンドポイントでreCAPTCHAを利用するように修正する

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

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

Swaggerにて確認する

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

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

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

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

「recaptcha_response」というプロパティが記載されていることを確認します。

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

reCAPTCHA認証の実装

reCAPTCHA認証処理の実装方法例を記載します。

reCAPTCHAモジュールのインストール

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

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

npm i @nuxtjs/recaptcha

nuxt.config.jsの修正

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

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

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

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

フロントエンド実装

次にフロントエンド実装します。 問い合わせフォームにreCAPTCHA認証を実装します。

認証コンポーネントを実装する

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

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

フォーム画面に認証コンポーネントを配置する

次に、reCAPTCHAを導入したいフォーム画面に、上記認証コンポーネントを追記します。 今回は pages/form/index.vue を下記のように修正します。

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

フォームを送信する

エンドポイントへのPOST時、recaptcha_responseに認証結果のトークンを渡します。
送信後は await this.$recaptcha.reset() を呼び出す必要があります。 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>

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

レスポンスの確認

recaptcha_responseに値を渡すと、渡されたトークンが自動的に検証されます。 正当な値が渡された場合、フォーム送信が完了します。

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

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

今回は基本的な説明のため、簡単な設定方法を例に説明しました。 reCAPTCHAの詳しい設定方法は下記Googleのドキュメントをご参照ください。
Google Developers reCAPTCHA v2