reCAPTCHAを利用したフォームを作成する
reCAPTCHAとは、Googleが無償で提供している機能です。
Webサイトのお問い合わせフォーム等で情報を登録する際、悪質なスパム投稿からWebサイトを守ることができます。
今回は、お問合せフォームにreCAPTCHA v2を導入する手順を説明します。
前提
- KurocoとNuxt.jsで、フォーム画面を構築するのチュートリアルを実施し、基本的なフォーム実装について理解できていることを前提とします。
- reCAPTCHA v2を利用します。
APIキーの取得方法
KurocoでreCAPTCHAを利用する場合は、先にGoogle reCAPTCHAにてAPIキーの取得が必要になります。
※ 前提として、reCAPTCHAを利用するにはGoogleアカウントが必要になります。アカウントをお持ちでない場合は、Googleのアカウント作成ページよりアカウント作成をお願いします。
Google reCAPTCHAへアクセスする
Google reCAPTCHAへアクセスし、画面右上の[Admin Console]をクリックします。
サイト登録を行う
サイト登録画面が表示されるので、必要事項を記入します。
| 項目 | 説明 |
|---|---|
| ラベル | サイト名等、わかりやすい名前を入力します。 |
| reCAPTCHA タイプ | reCAPTCHA v2を選択します。 また、「私はロボットではありません」チェックボックスを選択します。 |
| ドメイン | 「https://」を省略したフロントエンドドメインを入力します。例： sitekey.g.kuroco-front.app |
ローカル環境でテストをする場合はドメインにlocalhostを追加します。
利用規約を読み、問題なければ「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: {
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() を呼び出す必要があります。
loading...
デフォルトの項目設定name,email,messageのみのフォームをreCAPTCHAの動作確認用に追加し、利用しています。
フォームIDとエンドポイントURLはご自身のものに調整してください。
上記のコードは最低限の簡易的なものになっています。
フォーム画面を確認すると、下記のようにreCAPTCHAが表示されます。
レスポンスの確認
「私はロボットではありません」にチェックを入れると、Submitボタンがクリックできるようになります。
Submitボタンをクリックすると、フォームの内容に加えて、recaptcha_responseをKurocoにPostし、渡されたトークンが自動的に検証されます。
正当な値が渡された場合、フォーム送信が完了します。
不正な値が渡された場合は、下記のようなエラーが返ります。
以上でreCAPTHAの設定が完了です。
今回は基本的な説明のため、簡単な設定方法を例に説明しました。
reCAPTCHAの詳しい設定方法は下記Googleのドキュメントをご参照ください。
Google Developers reCAPTCHA v2
トークンの正当性確認は非ログインユーザーの場合のみ動作します。ログインユーザーの場合は検証処理をスキップします。
サポート
お探しのページは見つかりましたか？解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。