reCAPTCHAを導入する方法 - ryotaku's Tech Blog

【結論】
・reCAPTCHAとは、
　Botなどによる悪質なアクセスを防ぐ為の機能

・「ロボットではありません」と書かれた
　チェックボックスにチェックすることで、
　ロボットであるか判定を行う

・ロボットかどうかの判定する手法は
　他にも様々ある。

【目次】

reCAPTCHAを入れてみた
reCAPTCHAとは
実装の流れ
実装方法
reCAPTCHA v3が凄い
総括

【本題】

reCAPTCHAを入れてみた

現在、メルカリのクローンサイト制作をしていますが、
その中で、reCAPTCHAを実装する機会があったので、
実装方法をまとめてみました。

reCAPTCHAとは

Botなどによる悪質なアクセスを防ぐ為の機能です。
具体的には、下記の様なものです。

以前は同じbot対策でも、
変形した文字を読み解いて入力する手法が定番でした。

但し、下記の様な課題がありました。

・入力するのが面倒なのと、
　人の目でも見づらく、誤入力が頻繁に発生。

・技術が進歩し、botが変形文字を
　判読する精度が高まってきた

そこで、Googleが新たに開発したのが、
今回の「reCAPTCHA」です。

ロボットか人か判別する精度は高いまま、
従来までの入力作業が不要となり、
チェックボックスだけで判別が可能となっています。

他にも、画像選択で判定を行うタイプも存在します。

実装の流れ

１：GoogleでreCAPTCHAのユーザー登録を行う
２：gem(recaptchaとdotenv)を導入する
３：dotenvで環境変数を設定する
４：ビューにrecaptchaを呼び出す記述をする
５：コントローラーにrecaptchaのバリデーションを記述する

実装方法

１：GoogleでreCAPTCHAのユーザー登録を行う

まず下記サイトでユーザー登録を行います。
（右上のAdmin console）
www.google.com

「ラベル」「reCAPTCHAタイプ」「ドメイン」を入力します
（今回は、本家メルカリが採用している「v2」を選択しました）

ドメイン名を設定しますが、開発環境でも使用できる様に
「localhost」を忘れない様にしましょう。（下記の様なエラーが出てしまいます）

登録が完了すると、site_keyとsecret_keyが表示されます。
これらは後で使用するので、コピーしておきましょう。
（設定画面から再度確認することも可能です）

２：gem(recaptchaとdotenv)を導入する

gemの「recaptcha」と「dotenv」を導入します。

「recaptcha」は、reCAPTCHAを簡単な手順で
導入できる様にする為のgemです。

「dotenv」は、先ほどコピーしたsite_keyとsecret_keyを
環境変数として、設定する為のgemです。

github.com

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

Gemfileに上記を追加して「bundle install」します。

３：dotenvで環境変数を設定する
先ほどコピーしたsite_keyとsecret_keyが
外部に漏れない様に、環境変数として読み込ませます。

色々やり方がある様ですが、今回は
公式のGitHubにも記載されていた「dotenv」を利用します。

やり方は、アプリケーションのルートディレクトリに
「.env」ファイルを作成し、下記の様に記述するだけです。

RECAPTCHA_SITE_KEY = '6Lc************************************ZB'
RECAPTCHA_SECRET_KEY = '6Lcxpo******************************WN3HdXZF'

また、せっかく環境変数を設定しても、GitHubに上げてしまっては意味が無いので、
「.gitignone」ファイルに「.env」を追記して、gitの監視対象から外しておきましょう。

４：ビューにrecaptchaを呼び出す記述をする

recaptchaを呼び出したいHTMLの箇所に、下記を記述するだけです。

= recaptcha_tags

５：コントローラーにrecaptchaのバリデーションを記述する

今回はdeviseで認証機能を実装しているので、
RegistrationsControllerを継承したコントローラーを作成し、
そちらで判定結果に応じた処理を記述します。

「rails g devise:controllers users」で
deviseの挙動を変える為のコントローラー一式が作成できます。

判定結果は、verify_recaptchaメソッドで取得でき、
ロボットで無いと判定されるとtrueが返されます。

registrations_controller.rbに下記の様に記述します。

class RegistrationsController < Devise::RegistrationsController
  def create
    if verify_recaptcha
      super
    else
      self.resource = resource_class.new
      respond_with_navigational(resource) { render :new }
    end
  end
end

reCAPTCHA v3が凄い

今回は、「v2」の実装を行いましたが、
現在は新しく「v3」が登場しています。

こちらは、ユーザーに一切の操作を要求せず、
ユーザーがページ内でどの様な操作を行うかを
スコアとして算出して、botか特定する事が可能となっています。

総括

攻撃する側と防御する側との終わらない闘いの一端が垣間見れて
非常に興味深かったです。

セキュリティ関連の知識は、スクールでは取り扱っていませんが、
非常に重要だと思われるので、自主的に勉強していきたいと考えています。