Railsでリキャプチャを実行しよう!!

こんにちは、皆さん!

f:id:Programming_Shop:20180713093204p:plain
今回はロボット対策のリキャプチャをRailsで実行する方法についてまとめた。
リキャプチャはただロボット対策をするだけでなく、ウェブサイトをよりプロフェッショナルに見せてくれる。一石二鳥ってところだね!!
スターターのコードもあり、それをダウンロードしてこの記事通りにコードを書いていけばRailsでリキャプチャを実行する方法を学習できる。
完成版のコードはこちら↓↓
https://github.com/Eric1015/recaptcha-tutorial



難易度と対象者

  • 難易度:★★☆☆☆
  • 対象者:中級者

***詳細はこちら→難易度と対象者の設定について - Programming_Shopの日記***

必要条件:

  1. MVCを理解している
  2. Herokuにアプリをデプロイできる


トピック:


スターターのダウンロード

スターターのリンクはこちら↓↓
https://github.com/Eric1015/recaptcha-tutorial-starter


ターミナルからコマンドでダウンロードするなら下記のコマンド

git clone https://github.com/Eric1015/recaptcha-tutorial-starter.git


セットアップと確認

ダウンロードしたら、ローカルサーバーで開きましょう

rails s

では、ローカルのそのウェブサイトに行ってみましょう。お好みのブラウザ(chromeを勧める)を開いてlocalhost:3000をURLに入れてサイトをロード。
下のような画面になったら問題なし
f:id:Programming_Shop:20180721092409p:plain


次にHerokuアプリを作りましょう

heroku create

そして、コードをHerokuにプッシュする

git add -A
git commit -m "Setup completed"
git push heroku master

念のためにローカルの時と同じサイト画面になるか確認

gemのインストール

では、まずは必要なgemを追加しましょう。Gemfileを開いて下記のgemを追加

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

そしたら、コマンドからインストール

bundle install

では、次は実際にコードの中に入れましょう!

リキャプチャをHTMLに挿入する

Railsではリキャプチャ専用のタグが用意されており、これを挿入すればよいのだ。

<%= recaptcha_tags %>

これがそのタグ。そして、これを今のアプリケーションに入れると、app/views/users/new.html.erbファイルは次のようになる。

<h1>ユーザー登録</h1>
<% if flash[:alert] %>
    <div class="error">
    <% flash[:alert].each do |msg| %>
      <p id="error-message"><%= msg %></p>
    <% end %>
    </div>
<% end %>
<%= form_for(@user) do |f| %>
    <p>名前 (必須)</p>
    <%= f.text_field :name %>   
    <p>メール (必須)</p>
    <%= f.text_field :email %>
    <p>好きな動物</p>
    <%= f.text_field :animal %>
    <br>
    <%= recaptcha_tags %>
    <br>
    <%= f.submit 'Submit', id: 'button', class: 'btn btn-default' %>
<% end %>

では、Herokuにプッシュして、再びサイトを訪れてみましょう。
f:id:Programming_Shop:20180721162731p:plain
あれ?エラーが起きてる!!
そう、リキャプチャを使うためにはグーグル公式のサイトからキーを取得しなければならないのだ。

リキャプチャのキーを取得する

では、このサイトに行って、キーを取得しましょう!


そしたら、右上のこのボタンをクリック↓↓
f:id:Programming_Shop:20180721094634p:plain


その次の画面で下のように記入(Domainsには自分自身のHerokuアプリのURLを入れる)
f:id:Programming_Shop:20180721162917p:plain
Domainsの部分はこのAPIキーが使える箇所を制限してくれるもの
例えば、僕がilovecanada.caというウェブサイトを所有していたとしよう。それでここにそれを入れることでこのAPIキーはそのウェブサイトでしか使えなくなるのだ。これはいざAPIキーが他人に漏れた時のために乱用されないようにするためのもの。
しかし、今では自分のウェブサイトを指定しないとそもそもリキャプチャを使わせてくれないようだ。


そしたら、以下のように2つのキーが表示されるはずだ(僕のは隠したが)
f:id:Programming_Shop:20180721152630p:plain

キーを環境変数として設定する

ここで使う環境変数の設定の詳細はこちらの記事に↓↓
programming-shop.hatenablog.com

そしたら、以下のようにconfig/initializers/recaptcha.rbファイルを作成する

Recaptcha.configure do |config|
    config.site_key  = ENV['recaptcha_site_key']
    config.secret_key = ENV['recaptcha_secret_key']
  end

これでリキャプチャの2つのキーは環境変数からとるように設定したことになる。
わかったところで、これをまずはHerokuにプッシュ。
そしたら、Herokuに2つの環境変数を入れる。
下のyour_site_keyyour_secret_keyにそれぞれ自分のキーを入れて以下のコマンドを実行する

heroku config:set recaptcha_site_key=your_site_key
heroku config:set recaptcha_secret_key=your_secret_key

では、もう一度Herokuアプリを開いてみよう。次のようになっているはず
f:id:Programming_Shop:20180721164209p:plain
おめでとう!リキャプチャが正しく表示されました。


実践してみよう。名前とメールに適当に何か入れて"Submit"ボタンを押す。(これはリキャプチャやってないから拒否されるはず)
f:id:Programming_Shop:20180721164532p:plain
なんと!通ってしまった。
実はコードをつけ足さないとリキャプチャの判別をしてくれないのだ。

コントローラーにコードを入れる

では、コントローラーにコードを書いて、リキャプチャを正解できたか判別しましょう!

verify_recaptcha(model: @user)

このコードで@userの登録に関してリキャプチャを正解できたか判別する。この手法はform_for(@user)に少し似ていて@userのためのフォームみたいに@userのためのリキャプチャと考えると覚えやすい。


ではこのコードが何をするかなのだが、使用者がリキャプチャを正解できた場合、このコードはtrueを、正解してない場合はfalseを返してくる。なので、返ってきたのがtrueの時だけ何かすればよい。

if verify_recaptcha(model: @user)
   # your code here
end

つまりこんな感じになる。これを今のアプリケーションに入れるとなるとユーザーを作成するときにリキャプチャの判別をする。よって、コントローラーのcreate関数に上記のコードの形を入れる。
それで、やりたいことはリキャプチャを正解し尚且つ@userが有効であることを確認したい。そうすると下記のようになるはず。

  def create
    @user = User.new(user_params)
    if verify_recaptcha(model: @user) && @user.save
      redirect_to thanks_path
    else
      redirect_to root_path
      flash[:alert] = @user.errors.full_messages
    end
  end

では、実際に試してみよう!
先ほどと同じように名前とメールだけ記入して"Submit"ボタンを押す。そうすると...
f:id:Programming_Shop:20180722073622p:plain
今回はちゃんと拒否されました。では、リキャプチャを正解したら...
f:id:Programming_Shop:20180722082221p:plain
ちゃんと登録できました!!

言語設定を日本語にする

最後にリキャプチャを英語版から日本語版に変えましょう。

やり方は簡単。app/views/layouts/application.html.erbの中のheadタグ内に下記のを追加するだけ!

<script src='https://www.google.com/recaptcha/api.js?hl=ja'></script>

なお、他の言語に指定したいのならこのhlの後の値を変えるだけ
言語コードの一覧はこのサイトに→https://developers.google.com/recaptcha/docs/language

まとめ

以上でリキャプチャをRailsで実装するチュートリアル完了。今回は簡単な方に入るチュートリアルだと個人的には思う。でも、多くの人のアプリにとってセキュリティー強化と見栄えの良さをプラスしてくれるものだと踏んでいるので学んで損はないと思う。
こんな簡単になったのもオープンソースを作ってくれた方々とサービスを提供してくれているグーグルのおかげである。感謝してます!


もしも、何か質問や感想、次の依頼があるのならコメントまたはツイッターまでDMお願いします!!