reCAPTCHAを利用する
reCAPTCHAとは、Googleが無償で提供している機能です。
Webサイトのお問い合わせフォーム等で情報を登録する際、悪質なスパム投稿からWebサイトを守ることができます。
今回は、お問合せフォームにreCAPTCHA v2を導入する手順を説明します。
前提
-
Nuxt.jsでお問合せフォームが作られていることを前提とします。
まだお問合せフォームを作成していない方は、[チュートリアル] -> [KurocoとNuxt.jsで、フォーム画面を構築する] を参考にお問合せフォームを作成してください。 -
reCAPTCHA v2を利用します。
APIキーの取得方法
KurocoでreCAPTCHAを利用する場合は、先にGoogle reCAPTCHAにてAPIキーの取得が必要になります。
※ 前提として、reCAPTCHAを利用するにはGoogleアカウントが必要になります。アカウントをお持ちでない場合は、Googleのアカウント作成ページよりアカウント作成をお願いします。
Google reCAPTCHAへアクセスする
Google reCAPTCHAへアクセスし、画面右上の[Admin Console]をクリックします。
サイト登録を行う
項目 | 説明 |
---|---|
ラベル | サイト名等、わかりやすい名前を入力します。 |
reCAPTCHA タイプ | reCAPTCHA v2を選択します。 また、「私はロボットではありません」チェックボックスを選択します。 |
ドメイン | reCAPTCHAを利用するサイトのドメインを入力します。 ※「https://」は省略してください。 |
利用規約を読み、問題なければ「reCAPTCHA 利用条件に同意する」にチェックを入れ[送信]をクリックしてください。
サイトキー、シークレットキーを確認する
送信されると、「サイトキー」と「シークレットキー」が表示されます。
こちらのキーはKurocoの設定で利用しますので、コピーをしておいてください。
以上でGoogle reCAPTCHA画面での設定が完了です。
KurocoでreCAPTCHAの設定を行う
次に、Kuroco管理画面での設定となります。ご自身のKuroco管理画面へログインしてください。
reCAPTCHA設定画面へ遷移する
[外部システム連携] -> [reCAPTCHA]をクリックします。
reCAPTCHAサイトキー、シークレットキーを入力する
サイト管理画面内にサイトキーとシークレットキーを入力する箇所がありますので、それぞれ入力します。
項目 | 説明 |
---|---|
reCaptcha Site Key | 取得したサイトキーの値を入力します。 |
reCaptcha Secret Key | 取得したシークレットキーの値を入力します。 |
設定完了したら、画面下部の[更新する]をクリックします。
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_SITE_KEYには、先程取得したreCAPTCHAのサイトキーを記入してください。
フロントエンド実装
次にフロントエンド実装します。 問い合わせフォームに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
トークンの正当性確認は非ログインユーザーの場合のみ動作します。ログインユーザーの場合は検証処理をスキップします。