Help us understand the problem. What is going on with this article?

RailsでreCAPTCHA対応

More than 1 year has passed since last update.

RailsでGoogleのreCAPTCHA対応します

reCAPTCHAって?

こういうの
スクリーンショット 2018-02-28 16.55.59.png

reCAPTCHAの登録

ここからGoogleアカウントで登録
Choose the type of reCAPTCHAreCAPTCHA 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_recaptchamodelを渡してやるとそのモデルのerrorsにreCAPTCHAエラーを追加する仕様になっているので、それを利用してDeviseエラーに組み込んだ。

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

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

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

config/locales/ja.yml
+   recaptcha: 
+     errors: 
+       verification_failed: 'reCAPTCHA認証に失敗しました。' 

おわり。

k_tada
Javascriptをこよなく愛するしがないフロントエンドエンジニアです。( ゚∀゚)o彡°React!React!
https://k-tada.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away