reCAPTCHAを利用したパスワードリマインダーを作成する
概要
reCAPTCHAとは、Googleが無償で提供している機能です。
Webサイトのお問い合わせフォーム等で情報を登録する際、悪質なスパム投稿からWebサイトを守ることができます。
今回は、パスワードリマインダーにreCAPTCHA v2を導入する手順を説明します。
前提条件
- パスワードリマインダー/パスワードリセットを設定するのチュートリアルを実施し、基本的なパスワードリマインダーの流れについて理解できていることを前提とします。
- reCAPTCHA v2を利用します。
APIキーを取得する
KurocoでreCAPTCHAを利用する場合は、先にGoogle reCAPTCHAにてAPIキーの取得が必要になります。
※ 前提として、reCAPTCHAを利用するにはGoogleアカウントが必要になります。アカウントをお持ちでない場合は、Googleのアカウント作成ページよりアカウント作成をお願いします。
まずは、Google reCAPTCHAへアクセスし、画面右上の[Admin Console]をクリックします。
サイト登録画面が表示されるので、必要事項を記入します。
| 項目 | 説明 |
|---|---|
| ラベル | サイト名等、わかりやすい名前を入力します。 |
| reCAPTCHA タイプ | reCAPTCHA v2を選択します。 また、「私はロボットではありません」チェックボックスを選択します。 |
| ドメイン | 「https://」を省略したフロントエンドドメインを入力します。例： sitekey.g.kuroco-front.app |
ローカル環境でテストをする場合はドメインにlocalhostを追加します。
利用規約を読み、問題なければ「reCAPTCHA 利用条件に同意する」にチェックを入れ[送信]をクリックしてください。
送信されると、「サイトキー」と「シークレットキー」が表示されます。
こちらのキーはKurocoの設定で利用しますので、コピーをしておいてください。
以上でGoogle reCAPTCHA画面での設定が完了です。
Kurocoの設定
次に、Kuroco管理画面での設定となります。ご自身のKuroco管理画面へログインしてください。
reCAPTCHAと連携する
[外部システム連携] -> [reCAPTCHA]をクリックします。
サイト管理画面内にサイトキーとシークレットキーを入力する箇所がありますので、それぞれ入力します。
| 項目 | 説明 |
|---|---|
| reCaptcha Site Key | 取得したサイトキーの値を入力します。 |
| reCaptcha Secret Key | 取得したシークレットキーの値を入力します。 |
設定完了したら、画面下部の[更新する]をクリックします。
エンドポイントを追加する
次にエンドポイントを作成します。 エンドポイント一覧画面へ移動し、reCAPTCHAを利用するパスワードリマインダーのエンドポイントを作成します。
[新しいエンドポイントの追加]をクリックします。
以下のように設定します。
| 項目 | 値 |
|---|---|
| パス | reminder_with_recaptcha |
| カテゴリー | 認証 |
| モデル | Login |
| オペレーション | reminder |
| use_recaptcha | チェックを入れる |
設定ができたら[追加する]をクリックしてエンドポイントを追加します。
Swaggerにて確認する
次に、問題なくエンドポイントが設定できているか、Swagger UIを利用して確認します。
エンドポイント一覧画面より、「Swaggr UI」をクリックします。
先ほど設定したエンドポイントをクリックします。
Request bodyのExample Valueに「recaptcha_response」のフィールドが記載されていることを確認します。
以上でKuroco管理画面での設定は完了です。
フロントエンドの実装
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のサイトキーを記入してください。
認証コンポーネントを実装する
認証コンポーネントを作成します。
今回は、/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...
上記のコードは最低限の簡易的なものになっています。
パスワードリマインダー画面を確認すると、下記のようにreCAPTCHAが表示されます。
動作の確認
「私はロボットではありません」にチェックを入れると、Submitボタンがクリックできるようになります。
Submitボタンをクリックすると、フォームの内容に加えて、recaptcha_responseをKurocoにPostし、渡されたトークンが自動的に検証されます。
正当な値が渡された場合、フォーム送信が完了し、入力したメールアドレス宛にパスワードリセットのための仮パスワードが届きます。
パスワードリマインダーのメールはメッセージひな形の識別子login/reset_passwordのテンプレートで編集可能です。
不正な値が渡された場合は、下記のようなエラーが返ります。
以上でreCAPTHAの設定が完了です。
今回は基本的な説明のため、簡単な設定方法を例に説明しました。
reCAPTCHAの詳しい設定方法は下記Googleのドキュメントをご参照ください。
Google Developers reCAPTCHA v2
サポート
お探しのページは見つかりましたか？解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。