0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Rails】Google reCAPTCHAで簡単ボット対策!導入手順と実装方法を徹底解説

Posted at

背景

メールボム攻撃による影響が増加していることです。メールボムは短時間で大量のメールを送信し、システムの業務効率やストレージ容量に悪影響を及ぼします。この問題への対策として、Google reCAPTCHAを導入し、不正なボットによるアクセスをブロックすることでシステム負荷を軽減し、リソースの保護を図る必要がありました。その時の実装内容をまとめます。

reCAPTCHAとは

reCAPTCHAはGoogleが提供するセキュリティサービスで、不正なボットアクセスを防止し、人間と自動プログラムを識別する仕組みです。フォーム送信時にユーザーに簡単な操作(チェックや画像選択)を求めることで、不正アクセスやスパムを防ぎます。サイトの安全性向上やサーバー負荷軽減に有効で、導入も比較的簡単に行えます。

実装手順

Google reCAPTCHAの公式ページを開く

v3 Admin Console を開く

青いボタンの「Get Started with Enterprise」を押してしまうと、Enterpriseの方に行ってしまうため注意が必要です。
スクリーンショット 2024-12-17 14.30.31.png

必要な情報入力

スクリーンショット 2024-12-17 14.31.40.png
スクリーンショット 2024-12-17 14.31.47.png

登録を行い、サイトキーとシークレットキーを取得

image.png

下準備はこれで完了です。

gemのインストール

gem 'recaptcha'
↓
bundle install

ある記事では、「gem 'recaptcha', require: 'recaptcha/rails'」をするよう指示がありますが、Rails 4以降では、ほとんどの場合 require 'recaptcha/rails' を書く必要はありません。

必要な場合

・自動読み込みが働かない環境:たとえば、Railsの設定をカスタマイズしていて、自動的にgemが読み込まれない場合
・非標準のRailsアプリケーション:例えば、API-onlyモードや特定の依存関係が壊れているケース
・明示的にrequireすることで予期しない問題を防ぎたい場合:アプリケーションの動作がgemの自動読み込みに依存しているとき、手動でrequireを書くと確実にファイルが読み込まれるので安全です

config/initializers 配下に、recaptcha.rbを作成

Recaptcha.configure do |config|
  if Rails.env.production?
    # 本番環境用のSiteキーとSecretキー
    config.site_key = ENV['GOOGLE_RECAPTCHA_SITE_KEY']
    config.secret_key = ENV['GOOGLE_RECAPTCHA_SEACRET_KEY']
  else
    # テスト用のSiteキーとSecretキー(ローカル環境用)
    config.site_key  = '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
    config.secret_key = '6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe'
  end
end

.env.developmentに環境変数を定義

GOOGLE_RECAPTCHA_SITE_KEY= キー
GOOGLE_RECAPTCHA_SEACRET_KEY= キー

viewに配置

下記のように設定すると写真のような要素が表示されるようになります。
開発環境の場合には、赤字でエラーメッセージが表示されます。

= recaptcha_tags

スクリーンショット 2024-12-17 14.20.16.png

reCAPTCHAウィジェットのデザイン自体はGoogleが提供するもので、CSSやHTMLのカスタマイズはほぼ不可能です。ただし、スマホ画面で表示が崩れたりウィジェットが大きすぎる場合、CSSを使った工夫で改善することができます。

@media screen and (max-width: 480px) {
  .g-recaptcha {
    transform: scale(0.75); /* さらに縮小 */
    transform-origin: 0 0;
  }
}

認証

実際にフォーム送信を行い、recaptchaのチェックが行われているかを判断できるようにしていきます。

今回はコントローラーアクションに設定をしていきます。
recaptchaのチェックが行われているかを「verify_recaptcha」という専用メソッドを使用します。

unless verify_recaptcha
  redirect_to root_path and return
end

これにより、recaptchaのチェックが行われていない場合には別ページへリダイレクトされるようになります。

まとめ

この記事では、Google reCAPTCHAを利用してボット対策を簡単に実装する方法を解説しています。公式ページからSiteキーとSecretキーを取得し、recaptcha gemを導入すれば、わずかな設定とコード追加でフォーム送信時の不正アクセスを防止できます。特にverify_recaptchaメソッドを使えば認証チェックがシンプルに行え、CSSによる調整でスマホ対応も可能です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?