【Rails】reCAPTCHAの導入方法

目標

開発環境

・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

前提

下記実装済み。

・Slim導入
・ログイン機能実装

reCAPTCHAを登録

1.下記リンクにアクセス

reCAPTCHA

2.Admin consoleをクリック

3.下記画像の様に設定し、送信をクリック

4.サイトキーとシークレットキーをコピーして控えておく

5.

実装

1.サイトキーとシークレットキーを環境変数化

①「gem 'dotenv-rails'」を導入

Gemfile

gem 'dotenv-rails'

ターミナル

& bundle

②アプリケーション直下に「.env」ファイルを作成
※アプリケーションのディレクトリに移動してから下記コマンドを実行

ターミナル

$ touch .env 

③.envファイルを編集

.env

# 追記
RECAPTCHA_SITE_KEY = 'サイトキー'
RECAPTCHA_SECRET_KEY = 'シークレットキー'

④.gitignoreファイルを編集

.gitignore

/.env # 追記

2.reCAPTCHAの設定ファイルを作成・編集

ターミナル

$ touch config/initializers/recaptcha.rb

recaptcha.rb

# 追記
Recaptcha.configure do |config|
  config.site_key = ENV["RECAPTCHA_SITE_KEY"]
  config.secret_key = ENV["RECAPTCHA_SECRET_KEY"]
end

3.resistration_controller.rbを編集

resistration_controller.rb

# 追記
prepend_before_action :check_captcha, only: [:create]

private

  # reCAPTCA認証を行わないとサインアップ出来なくし、バリデーションメッセージを表示する
  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

4.ビューを編集

resistrations/new.html.slim

/ 追記
= recaptcha_tags

5.バリデーションメッセージを日本語化

①Gemを導入

Gemfile

gem 'rails-i18n'
gem 'devise-i18n'

ターミナル

$ bundle

②application.rbを編集

application.rb

module Bookers2Debug
  class Application < Rails::Application
    config.load_defaults 5.2
    config.i18n.default_locale = :ja # 追記
  end
end

③devise.ja.ymlファイルを作成・編集

devise.ja.yml

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