現在開発中のWebアプリ周りのセキュリティ面を向上させようと思い、reCAPTCHAを導入することにしました。

Railsでは、gemを利用してreCAPTCHAを簡単に導入することができます。

今回は、RailsアプリにreCAPTCHA(バージョン2)を導入する方法についてご紹介したいと思います。

reCAPTCHAとは

Googleが提供しているスパムやbot対策用の技術で、悪質なアクセスからWebサイトを防ぐために用いられます。

reCAPTCHAには幾つかバージョンがあり、それぞれユーザーの操作方法に違いがあります。

今回紹介するバージョン2では、上の画像のようにチェックボックスにチェックを入れるタイプとなります。

reCAPTCHAの利用登録

登録手続き

まずはこちらのサイトへアクセスし、Googleアカウントでログインします。

そして各フォームを入力します。

「ラベル」には分かりやすい識別名を設定します。

「reCAPTCHAタイプ」は利用するバージョンを指定します。

今回はバージョン2を利用したいと思うので、「reCAPTCHA v2」を選択します。

「ドメイン 」にはreCAPTCHAを利用するサイトのドメイン名を設定します。

ローカル環境で動作確認をする場合は「localhost」と設定すれば良いかと思います。

「reCAPTCHA利用条件に同意する」にチェックを入れて登録を完了させます。

各キーの確認

管理画面にある「reCAPTCHAのキー」を開くと、「サイトキー」と「シークレットキー」というデータが表示されています。

こちらは後ほど利用することになるので控えておきます。

gemの導入

今回利用するgemは「recaptcha」です。

bundlerによるgemの管理を行っているので、bundlerを利用してgemをインストールします。

Gemfileに以下の一行を追加します。

gem 'recaptcha', require: "recaptcha/rails"

そして、gemをインストールするためにbundleコマンドを実行します。

$ bundle

キーの設定

先ほどreCAPTCHAの管理サイトに表示されていたそれぞれのキーをアプリ側に紐付けます。

キーを設定するには、reCAPTCHAの設定ファイル(config/initializers/recaptcha.rb)にて記述を行います。

# config/initializers/recaptcha.rb
Recaptcha.configure do |config|
  config.site_key = ENV['RECAPTCHA_PUBLIC_KEY']
  config.secret_key = ENV['RECAPTCHA_PRIVATE_KEY']
end

各キーの値は、他の人が参照できてしまわないように環境変数として利用する形をとると良いかと思います。

環境変数の設定に、「dotenv-rails」というgemを利用すると便利かと思います。

テンプレート側の表示処理

reCAPTCHAを表示する方法は簡単で、以下のコードを任意の位置に配置するだけで表示されるようになります。

recaptcha_tags

コントローラー側の判定処理

コントローラー側では、reCAPTCHAの入力が正しいか判定をする必要があります。

こちらも簡単で、以下のコードだけで判定が行えます。

if verify_recaptcha
  # キャプチャの入力が正しい場合の処理
end

一応、公式ドキュメント に実装例などが記載されていたので参考にしてみると良いかと思います。

ローカライズ対応

こちらも公式ドキュメント にも記載されていますが、エラー時のメッセージのローカライズにも対応しています。

更新日 : 2020年7月9日

投稿者: TWEI

趣味はプログラミング。 以前は仕事でプログラミングをやっていました。現在はWebエンジニアを目指して勉強中。 勉強で得た知識などをブログで発信していく予定です。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA