reCAPTCHA v2 を Rails に導入する方法

はじめに

ログイン不要のお問い合わせページにbotから入力がありました。
ログイン不要は続けたいものの、botは弾きたいところです。
そこで、今回はreCAPTCHAを入れることで対応を試みました。

reCAPTCHAには、v2 → v3 → Enterprise と様々な種類があります。
参考までに v2、v3、Enterpriseの違いを軽く載せておきます。
詳しくはgoogle公式記事をご覧ください

バージョン	判定	値段
v2	画像認証	無料
v3	自動	無料
Enterprise	自動	100万回/月以上は有料

個人〜中規模開発では通常のreCAPTCHAでの判定で基本は問題ない認識です。

その中でも、v2 は「画像認証が手間だが確実に判断できる」v3 は「自動認証で楽だが人間を却下する可能性がある」という点で相違があります。

また、v2の中にも チェックボックス付き画像認証の v2 と、自動判定 + 画像認証のv2 invisible があります。

この記事では、あえて チェックボックス付き画像認証の v2 を入れたい方の参考用に、実際にreCAPTCHAを動かした手順をお伝えします。

実装手順

reCAPTCHA側の下準備

1. Google reCAPTCHAの公式ページへ飛びます。(https://www.google.com/recaptcha/about/)

2. v3 Admin Console を開きます。 青いボタンの「Get Started with Enterprise」を押してしまうと、Enterpriseの方に行ってしまうため注意が必要です。 （私はここを間違えたため時間をだいぶ使ってしまいました…….）

3. ラベル、reCAPTCHAタイプ、ドメインを求められるので適宜入力します。 （開発環境 → localhost等） reCAPTCHAタイプは チャレンジ（v2）「私はロボットではありません」チェックボックス を選択した想定で進めます。

4. 送信ボタンを押すと、サイトキーとシークレットキーが出てくるので、ローカルに保存しておきます。

5. 環境によって必要な分だけ、2~4を繰り返します。

下準備はこれで完了です。

開発

1. gemをインストールします。

# Gemfile
gem 'recaptcha', require: 'recaptcha/rails'

# config/application.rb
require 'recaptcha/rails'

2. 環境変数用の.gitignoreされたファイルに、先ほど保存したキーをそれぞれ登録します。

config.recaptcha_site_key = '[site_key]'
config.recaptcha_secret_key = '[secret_key]'

3. reCAPTCHAの設定ファイルを作成します。 config/initializers 配下に、recaptcha.rbを作成し、以下のコードを貼り付けます。

Recaptcha.configure do |config|
  config.site_key = Rails.application.config.recaptcha_site_key
  config.secret_key = Rails.application.config.recaptcha_secret_key
end

4. reCAPTCHAを入れるコントローラを編集します。 verify_recaptchaという変数に、自動で判定結果が入るのでそれを利用します。

def confirm
    unless verify_recaptcha
        # flash.to_hash.values[0]に reCAPTCHAエラーが入る（環境によって変わる可能性あり）
        flash.now[:error] = flash.to_hash.values[0]
        render :new
        return
    end
    ・・・
end

5. ビューを編集します。 ※ 以下はslimの例です

= form_with(model: @hoge, url: confirm_path, local: true, id: 'hoge-form') do |f|
    ・・・
    = recaptcha_tags
    = f.button '提出', type: 'submit', id: 'submit-button'

- content_for :local_js do
  javascript:
    document.addEventListener('DOMContentLoaded', function() {
      grecaptcha.ready(function () {
        document.getElementById('submit-button'), {
          'sitekey': "#{Rails.application.config.recaptcha_site_key}",
          'callback': onSubmit
        };
      });
    });
    function onSubmit(token) {
      document.getElementById('hoge-form').submit();
    };

6. 開発環境を確認し、以下のマークが出ていれば成功です。

まとめ

今回は、reCAPTCHAを新たに導入する手順を書きました。

もっと工夫することは可能だと思いますが、初めてreCAPTCHAマークが出てきた時の感動はひとしおでした。

今回はテストのしやすさを優先してv2にしましたが、v2 invisibleに移行できるとよりユーザー体験を損なわずに検証できそうです。

ご覧いただきありがとうございました。

参考記事