reCAPTCHAを導入する方法

f:id:ryoutaku_jo:20190202204852p:plain

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

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

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


【目次】


【本題】

reCAPTCHAを入れてみた

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

reCAPTCHAとは

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

f:id:ryoutaku_jo:20190202205039p:plain

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

f:id:ryoutaku_jo:20190202205133j:plain

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

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

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

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

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

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

実装の流れ

1:GoogleでreCAPTCHAのユーザー登録を行う
2:gem(recaptchaとdotenv)を導入する
3:dotenvで環境変数を設定する
4:ビューにrecaptchaを呼び出す記述をする
5:コントローラーにrecaptchaのバリデーションを記述する


実装方法

1:GoogleでreCAPTCHAのユーザー登録を行う

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

f:id:ryoutaku_jo:20190202205241p:plain



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

f:id:ryoutaku_jo:20190202205820j:plain

f:id:ryoutaku_jo:20190202205849p:plain


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

f:id:ryoutaku_jo:20190202210708p:plain


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

f:id:ryoutaku_jo:20190202210013p:plain


2:gem(recaptchaとdotenv)を導入する

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

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

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

github.com

github.com

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

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


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

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

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

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

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


4:ビューにrecaptchaを呼び出す記述をする

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

= recaptcha_tags


5:コントローラーに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か特定する事が可能となっています。

総括

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

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


《今日の学習進捗》

チーム開発:8日目
ユーザー新規登録機能が概ね完成する。
後は、Javascriptにバリデーションを記述し、
テストコードを書くだけ・・・結構残ってる・・・
reCAPTCHAの実装を学ぶ。

学習開始からの期間 :57日
今日までの合計時間:578h
今日までに到達すべき目標時間:521h
目標との解離:57h
「10,000時間」まで、

残り・・・「9422時間!」