カテゴリー: Server

【Google Invisible reCAPTCHA】Railsサイトにキャプチャ導入

はじめに

こんにちは、最近休みなく仕事をいただいており、ブログへの投稿が久しぶりになってしまいました。今後は、ちゃんと定期的に投稿できるようにしたいと思います。

さて、今回はWebサイトのログインフォームやコンメント投稿画面などでロボットによるアクセスかどうかを判定し、排除するための機能である、CAPTCH(キャプチャ)に関しての投稿です。

CAPTCHも色々と実装方法はあると思いますが、今回はGoogleのInvisible reCAPTCHをRailsプロジェクトに組み込む方法を詳細させていただきます。

reCAPTCHAとは

まず、「CAPTCH」とは「Completely Automated Public Turing test to tell Computers and Humans Apart」の略で、直訳すると「コンピュータと人間を分かち合うために完全に自動化された公的チューリングテスト」となります。

Webの世界であれば、Webサイトにアクセスする人間とロボットを判別するためのシステム・仕組みのことと理解しても良いのではないでしょうか。

従来から方式では、ログインやコメント投稿時にロボットでは判別困難な画像の文字をWebサイト訪問者に入力させるなどをして、人間とロボットを判別しています。

Googleの提供する「reCAPTCH」は、従来の方式ではなく、画像を選択させる方式や単にチェックボックスをチェックさせるだけで判別ができます。

また、2017年からは更に進化して、「Invisible reCAPTCHA」というものも提供をはじめています。これは、Webサイト訪問者及びユーザに文字入力、画像選択、チェックボックスのチェックすらもさせることなく、ロボット判別ができるというものです。

Site keyとSecret keyの取得

先ずは、GoogleのreCAPTCHAのサイトでreCAPTCHAを利用するためのkeyを取得します。サイト右上の「Get reCAPTCHA」をクリックして、Googleアカウントでログインをします。そうすると下記のような画面が表示されますので、Invisible reCAPTCHAを選択し、reCAPTCHAを導入するサイトのドメインを入力したら、利用規約にチェックを入れて登録します。そうすると登録後の画面で、Site keyとSecret keyが取得できますので、メモしておきます。

Rails gemの導入

gemを使わなくてもWebサイトに導入することは難しくありませんが、今回はRailsを利用しているため、今回はこちらのgemを導入して簡単にWebサイトに組み込みたいと思います。

先ず、Gemfileに下記を追記して、bundle install –path vendor/bundle を実行します。

gem 'recaptcha', require: 'recaptcha/rails'

次にinitializersなどで先ほど取得したkeyを設定します。今回はそのまま記載していますが、githubなどにpushする場合は、keyは環境変数などにしてそのままpushしない方が良いでしょう。また、ローカルの開発環境などでは、Google reCAPTCHAで登録したドメインと異なることになると思いますので、development環境では無効にしておきます。

Recaptcha.configure do |config|
  config.site_key  = 'Googleのサイトで取得した、Site keyを入力してください。'
  config.secret_key = 'Googleのサイトで取得した、Secret keyを入力してください。'
  config.skip_verify_env += %w[development]
end

サイトへの組み込み

例として、deviseの新規登録画面に組み込んでみようと思います。

先ず、View側ですが、formタグ内にsubmitのかわりにinvisible_recaptcha_tags を組み込むだけです。

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  ...
  ...
  <%= invisible_recaptcha_tags({ text: "登録する", class: "btn" }) %>
<% end %>

上記を組み込むと下記の画像がページ内の右下に表示されます。

次にコントローラ側での処理ですが、deviseの場合はdeviseのコントローラを継承したクラスで処理をさせる必要がありますので、routes.rbを下記のように修正します。

devise_for :users, controllers: { registrations: 'registrations'}

そして、deviseのコントローラを継承したregistrations_controller.rbで登録時に検証を行います。verify_recaptchaのメソッドをコールし、trueが返却されればロボットではないと判定されたことになりますので、登録処理を継続させます。

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

さいごに

Webサイト訪問者やユーザの方に追加の入力や操作を強いることなく、ロボット判定ができるというのは良いと思いました。また、導入も非常に簡単なので、ぜひ皆さんのサイトでも試していただければと思います。

原弘

twitter: @hir_hara

シェア
執筆者:
原弘

最近の投稿

フロントエンドで動画デコレーション&レンダリング

はじめに 今回は、以下のように…

3週間 前

Goのクエリビルダー goqu を使ってみる

はじめに 最近携わっているとあ…

1か月 前

【Xcode15】プライバシーマニフェスト対応に備えて

はじめに こんにちは、suzu…

2か月 前

FSMを使った状態管理をGoで実装する

はじめに 一般的なアプリケーシ…

3か月 前