RailsでreCAPTCHA対応

RailsでGoogleのreCAPTCHA対応します

reCAPTCHAって？

こういうの

reCAPTCHAの登録

ここからGoogleアカウントで登録
Choose the type of reCAPTCHAはreCAPTCHA v2を選ぶ
あとreCAPTCHAを仕込むページのドメインを登録する（開発でも使う場合はlocalhostも登録しておく）

Railsに組み込む

Rails用のreCAPTCHA Gemを利用
ほぼほぼREADME.md通りにやればOK

ちなみに今回はRailsのユーザ管理としてDeviseを利用しているので、Deviseの登録画面にreCAPTCHAを組み込む
DeviseにreCAPTCHAを組み込む方法はDeviseのwikiに記載されているのでそれ通りにやればOK

1. インストール

Gemfile

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

で

bundle install

2. site_keyとsecret_keyの追加

以下のファイルを追加

config/initializers/recaptcha.rb

Recaptcha.configure do |config|
  config.site_key = ENV['RECAPTCHA_PUBLIC_KEY']
  config.secret_key = ENV['RECAPTCHA_PRIVATE_KEY']
end

3. Deviseの登録画面に組み込む

app/views/devise/registrations/new.html.erbの登録フォームの任意の場所に以下のタグを追加

app/views/devise/registrations/new.html.erb

  <%= recaptcha_tags %>

app/views/devise/registrations/new.html.erbがない場合は、こちらを参考にDeviseのViewを追加しておく。

4. Deviseの登録時にreCAPTCHAバリデーションを組み込む

こちらを参考にDeviseのRegistrationsControllerを継承したコントローラを追加し、createメソッドにreCAPTCHAバリデーションを仕込む。

app/controllers/registrations_controller.rb

class RegistrationsController < Devise::RegistrationsController
  prepend_before_action :check_captcha, only: [:create]
  prepend_before_action :customize_sign_up_params, only: [:create]

  private
  def customize_sign_up_params
    devise_parameter_sanitizer.permit :sign_up, keys: [:username, :email, :password, :password_confirmation, :remember_me]
  end

  def check_captcha
    self.resource = resource_class.new sign_up_params
    resource.validate
    unless verify_recaptcha(model: resource)
      respond_with_navigational(resource) { render :new }
    end
  end
end

公式のサンプルだと、flash[:recaptcha_error]でエラーメッセージを表示するようになっていたが、DeviseのエラーにreCAPTCHAエラーも組み込みたかったので少し変更している。
verify_recaptchaにmodelを渡してやるとそのモデルのerrorsにreCAPTCHAエラーを追加する仕様になっているので、それを利用してDeviseエラーに組み込んだ。

あと何故かcheck_captchaを実行したタイミングではsign_up_paramsへのdevise_parameter_sanitizer.permitの設定が効いてなかったので、prepend_before_actionでcheck_captchaの前にcustomize_sign_up_paramsを呼ぶようにしている。

5. reCAPTCHAのエラーメッセージのi18n対応

これも公式に書いてあるとおりにする。

config/locales/ja.yml

+   recaptcha: 
+     errors: 
+       verification_failed: 'reCAPTCHA認証に失敗しました。' 

おわり。