RailsにreCAPTCHAを導入する

問題

問い合わせフォームにスパムが多くなったのでreCAPTCHAを入れる

サイト登録

www.google.com にアクセスして「Get reCAPTCHA」をクリック

f:id:fujitora:20180305103249p:plain

「Register a new site」のフォームに必要事項を入力 Site keyとSecret keyが出る。

注意点としては「Domains」にはサイトのURLとlocalhostを追加すること

ambethia/recaptcha

github.com このgemを使う

導入

gem

dotenv-railsとrecaptchaを入れる

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

Gemfileに追加してbundle install

env

.env

RECAPTCHA_SITE_KEY='6Lxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
RECAPTCHA_SECRET_KEY='6Lxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

recaptcha.rb

config/initializers/recaptcha.rb

Recaptcha.configure do |config|
  config.site_key  = ENV['RECAPTCHA_SITE_KEY']
  config.secret_key = ENV['RECAPTCHA_SECRET_KEY']
  # Uncomment the following line if you are using a proxy server:
  # config.proxy = 'http://myproxy.com.au:8080'
end

view

form_forの中のreCAPTCHAを表示させたいところに追加する

= recaptcha_tags

認証されたcallbackを受け取ってsubmitボタンのdisable外したい時は

= recaptcha_tags callback: 'recaptchaCallbackFunction'

にする

controller

createメソッドに追加する

if verify_recaptcha(model: @contact) && @contact.save
  # 成功した時の処理(メール送信とか)
  redirect_to "/contact", notice: '送信成功'
else
  render 'new'
end

callbackを受けてdisable属性とdisableクラスを外す

application.js

var recaptchaCallbackFunction = function () {
  $('#js-recaptcha').removeClass('disable');
  $('#js-recaptcha').prop('disabled', false);
};