Railsでrecaptchaの導入

2020 5/22

2019.10.11 2020.05.22

recaptchaとは

recaptchaとはGoogleが提供してくれている、Botかどうかを判別してくれる超便利ツール。

ログイン機能を実装する際によく用いられます。

まずは説明書を読みましょう！！

何を始めるにもまずは最初は説明書を読みましょう！！

今回僕はログイン機能にdeviseを使っているので、念の為deviseのhow toも参照しました！

recaptchaのgithub https://github.com/ambethia/recaptcha/blob/master/README.md#recaptcha_tags

deviseのgithub(How To: Use Recaptcha with Devise)
https://github.com/plataformatec/devise/wiki/how-to:-use-recaptcha-with-devise

読んだら早速導入していきましょう！！

導入手順その１〜recaptchaのAPI取得〜

recaptchaのadmin consoleにアクセス

https://www.google.com/recaptcha/admin

可愛いミーアキャットの写真が出てきてめっちゃ癒されます。

reCAPTCHAタイプを選択する

ラベル名は適当に。

reCAPTCHAタイプはgithubを読んで自由なタイプを選びましょう。僕はv2 チェックボックスにしました。

※ここで違うタイプを選ばれた方は自分のタイプにあった設定方法をgithubを読んでやってくださいね！！

ドメインの設定

ドメインについては注意が必要です。

開発環境でlocalhost:3000を使っているかたはlocalhost

サイトのドメインをお持ちの方はそのIPアドレスだけ入力します。

(例)11.123.456.789

テストサーバーをよく立ち上げるかたはlocalhostとIPアドレスどちらも入力しましょう！

導入手順その２〜Rails用のGemをインストールする〜

Gemfileに記述

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

bundle install

#ターミナル
bundle install

導入手順その３〜API_KEYをセットする〜

環境変数にぶち込む(recaptchaのgithubにはそうしてね！！と書いてある)

githubにはsecretsか.dotenvという環境変数をまとめるためのgemを使いましょうと書いてあるのですが、今回は.bash_profileに環境変数をセットする方法でいきます。

#.bash_profileに追記
export RECAPTCHA_SITE_KEY='ここにSITE_KEYを入れてね'
export RECAPTCHA_SECRET_KEY='ここに SECRET_KEYを入れてね'

credentials.ymlを使う(推奨)

Rails5.2からsecrets.ymlに環境変数を使わず、credentials.ymlに設定内容を書くことが推奨されているため、僕個人的にはこちらがおすすめです。

#ターミナル
EDITOR="vim" bin/rails credentials:edit

#credentials.yml編集画面
recaptcha:
  site_key: 'ここにSITE_KEYを入れてね'
  secret_key: 'ここに SECRET_KEYを入れてね'

導入手順その４〜設定ファイルを作成〜

config/initializers/recaptcha.rbを作成

色々なサイトをみてみると、ファイルが自動生成されるって書いてあったけど、僕の場合はなぜか生成されなかったので、githubに記述がある通りに作成しました。

# config/initializers/recaptcha.rb 
Recaptcha.configure do |config|   
    config.site_key  = 'ここにSITE_KEYを入れてね'
    config.secret_key = 'ここに SECRET_KEYを入れてね'   
# Uncomment the following line if you are using a proxy server:   
# config.proxy = 'http://myproxy.com.au:8080' 
end

環境変数を使う場合

環境変数を設定した場合はこちらですね。

# 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

credentials.ymlを使う場合

credentials.ymlを使った場合は下記の通りの記述で呼び出しましょう！

# config/initializers/recaptcha.rb 
Recaptcha.configure do |config|   
    config.site_key  = Rails.application.credentials.recaptcha[:site_key]
    config.secret_key = Rails.application.credentials.recaptcha[:secret_key]  
# Uncomment the following line if you are using a proxy server:   
# config.proxy = 'http://myproxy.com.au:8080' 
end

導入手順その５〜viewファイルに追記〜

reCAPTCHA typeによって使い方が違うのですが今回はv2 Checkboxを使っているため、

<%= recaptcha_tags %>

を使います。

devise使用時のrecaptcha tagsの使い方

deviseを使用した際にこうしてくださいとgithubに書いてありました。通常と異なるのはflashメッセージが出てくることでしょうか。

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

<%= flash[:recaptcha_error] %>
<%= recaptcha_tags %>

deviseのregistrations_controllerにbefore_actionを記述

セキュリティのため、prepend_before_actionをつけなければいけないらしいです。

# app/controllers/registrations_controller.rb
class RegistrationsController < Devise::RegistrationsController
   prepend_before_action :check_captcha, only: [:create] 
# Change this to be any actions you want to protect.
   private     def check_captcha
       unless verify_recaptcha
         self.resource = resource_class.new sign_up_params
         resource.validate # Look for any other validation errors besides Recaptcha
         set_minimum_password_length
         respond_with resource
       end
      end
 end

deviseのpasswords_controllerにもbefore_actionを記述

先ほどと同様にpasswordをリセットするためのページにもbefore_actionを定義しなければいけないので下記の通りに記述します。

# app/controllers/passwords_controller.rb
class PasswordsController < Devise::PasswordsController
   prepend_before_action :check_captcha, only: [:create]
   private   def check_captcha
     unless verify_recaptcha
       self.resource = resource_class.new
       resource.validate # Look for any other validation errors besides Recaptcha
       respond_with_navigational(resource) { render :new }
     end
   end
 end