虎の穴開発室ブログ

虎の穴ラボ株式会社所属のエンジニアが書く技術ブログです

MENU

Ruby on RailsにおけるreCAPTCHAの実装

こんにちは、虎の穴開発室です。

 

本日はRuby on Railsにおける「reCAPTCHA」(リキャプチャ)の導入方法をご紹介します。

 

reCAPTCHAって?

Googleが提供する、送信者のBOT判別を行うシステムです。

BOT判別というと、従来は文字がぐにゃっとしたものを入力させる型(CAPTCHA)が主流でした。皆さんもあのシステムを利用されたことが一度はあると思います。あのぐにゃっとした文字ですが、人間でも判別できなかったりしますよね。何度打ち込んでも認証を通らない…なんてことを皆さん経験されているのではないでしょうか。

そんな中、新たにGoogle社から提供されたシステムが「reCAPTCHA」です!なんとあのややこしい文字判別が不要!クリックをするだけでBOT判別を行ってくれる素晴らしいシステムです。この画期的なreCAPTCHAですが、なんと無償で提供されているのです。

f:id:toranoana-lab:20180205001537p:plain

 

reCAPTCHAの導入準備

まずはreCAPTCHAのAPIを利用するために、ユーザ登録をする必要があります。ユーザ登録は以下のページから行えます。

reCAPTCHA: Easy on Humans, Hard on Bots

まずは画面右上の「Get reCAPTCHA」をクリックします。以下のボタンです。

f:id:toranoana-lab:20180204120528p:plain

 次に入力フォームから必要な情報を入力します。リキャプチャを導入するサイトの情報ですね。

f:id:toranoana-lab:20180204120819p:plain

これで登録を行うと、リキャプチャを使用する準備が整います。「Site key」と「Secret key」が発行されますので、この情報を大事に保管しておきましょう。

なお、ここで設定するドメインによって、keyの値が変わります。ローカル環境で動作させる場合には「localhost」によって取得する必要がありますので、要注意です。

 

f:id:toranoana-lab:20180204121226j:plain

Ruby on Railsで使ってみる

リキャプチャを簡単に扱えるGemが公開されていますので、インストールしましょう。

gem "recaptcha", require: "recaptcha/rails"
bundle install

Gemの詳細はこちらをご覧ください。

 

1.設定

config/initializers/recaptcha.rb に設定ファイルが作成されていますので、その内容を編集します。

ここで先ほど取得した「Site key」と「Secret key」を入力します。それぞれ「config.public_key」と「config.private_key」に設定します。

Recaptcha.configure do |config|
  config.public_key  = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
  config.private_key = 'YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY'

end

 

2.Viewの編集

さて続きましてViewの方はというと…

<%= recaptcha_tags %>

なんとこれだけです。リキャプチャを挿入したい場所に、上記のタグを入れてください。なお、上記タグを利用するには、環境変数に以下の定義がされている必要があります。

RECAPTCHA_SITE_KEY='XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
RECAPTCHA_SECRET_KEY='YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY'

環境変数の設定を忘れないようにしましょう。

 

3.Controllerの編集

Viewは簡単だったから、Controllerは複雑なんでしょう…?

if verify_recaptcha
	# 正常時に実行する処理
end

 なんとこれだけです。リキャプチャが正常の場合はverify_recaptchaがtrueで返されますので、その後の処理を記述しましょう。

 

以上で、簡単にリキャプチャ処理が実装できてしまいました。うーん、シンプルでとても良いですね。

 

4.リキャプチャ処理の完了を待つ

さて、以上でリキャプチャ処理が実装できましたので、虎の穴開発室内でテストプレイをしてみました。するとなんと…「リキャプチャ失敗するんだけど!」という声が一部の人から上がるではありませんか。話を聞いてみると、一刻も早くsubmitをしたいがために、リキャプチャのチェック部分をクリックしてからすぐに他のボタンを押していたようです。

リキャプチャの応答が返されるまでは若干かかりますので、その一瞬をついて、リキャプチャ完了前にsubmitしてしまうわけですね。これは困ります。何か抑止する方法はないかなーと思いGemのREADMEを読んでいると、いいものがありました。今回使用したGemですが、リキャプチャ処理が完了した時点で、javascriptのfunctionをコールバックできるようです。

Viewのソースを以下のように書き換えます。

<%= recaptcha_tags callback: 'recaptchaCallbackFunction' %>

あわせて、「recaptchaCallbackFunction」というfunctionを記述しておきます。これにより、リキャプチャ完了時に「recaptchaCallbackFunction」がコールされることになります。

あとは簡単ですね。submitをするボタンをまずは非活性(disabled)にしておき、コールバックファンクションの中で活性化してあげればよいのです。これによって、せっかちな人でも、リキャプチャ完了前にsubmitしてしまうなんとことがなくなりました。

 

いかがでしたでしょうか。BOTを判別するリキャプチャ処理、こんなにも簡単に実装できてしまうんですね。

機会がありましたら是非ご活用ください。