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
読んだら早速導入していきましょう!!
導入手順その1〜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アドレスどちらも入力しましょう!
導入手順その2〜Rails用のGemをインストールする〜
Gemfileに記述
#Gemfile
gem 'recaptcha', require: "recaptcha/rails"
bundle install
#ターミナル
bundle install
導入手順その3〜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を入れてね'
導入手順その4〜設定ファイルを作成〜
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
導入手順その5〜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
終わりに
どうでしたでしょうか。Googleが提供してくれるだけあってとてもシンプルに導入ができますね!
プログラミング初学者の方がよく詰まるところでいえば、サーバーを立ち上げ直してないことが多いように思います。
gemを入れ直したり、環境変数やcredentials.ymlを使用しているので、そこらへんは注意が必要ですね!