Railsでリキャプチャを実行しよう!!
こんにちは、皆さん!
今回はロボット対策のリキャプチャをRailsで実行する方法についてまとめた。
リキャプチャはただロボット対策をするだけでなく、ウェブサイトをよりプロフェッショナルに見せてくれる。一石二鳥ってところだね!!
スターターのコードもあり、それをダウンロードしてこの記事通りにコードを書いていけばRailsでリキャプチャを実行する方法を学習できる。
完成版のコードはこちら↓↓
https://github.com/Eric1015/recaptcha-tutorial
難易度と対象者
- 難易度:★★☆☆☆
- 対象者:中級者
***詳細はこちら→難易度と対象者の設定について - Programming_Shopの日記***
必要条件:
- MVCを理解している
- Herokuにアプリをデプロイできる
トピック:
- スターターのダウンロード
- セットアップと確認
- gemのインストール
- リキャプチャをHTMLに挿入する
- リキャプチャのキーを取得する
- キーを環境変数として設定する
- コントローラーにコードを入れる
- 言語設定を日本語にする
スターターのダウンロード
https://github.com/Eric1015/recaptcha-tutorial-starter
ターミナルからコマンドでダウンロードするなら下記のコマンド
git clone https://github.com/Eric1015/recaptcha-tutorial-starter.git
セットアップと確認
rails s
では、ローカルのそのウェブサイトに行ってみましょう。お好みのブラウザ(chromeを勧める)を開いてlocalhost:3000
をURLに入れてサイトをロード。
下のような画面になったら問題なし
次にHerokuアプリを作りましょう
heroku create
そして、コードをHerokuにプッシュする
git add -A git commit -m "Setup completed" git push heroku master
念のためにローカルの時と同じサイト画面になるか確認
gemのインストール
Gemfile
を開いて下記のgemを追加
gem 'recaptcha', require: 'recaptcha/rails'
そしたら、コマンドからインストール
bundle install
では、次は実際にコードの中に入れましょう!
リキャプチャをHTMLに挿入する
<%= 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にプッシュして、再びサイトを訪れてみましょう。
あれ?エラーが起きてる!!
そう、リキャプチャを使うためにはグーグル公式のサイトからキーを取得しなければならないのだ。
リキャプチャのキーを取得する
そしたら、右上のこのボタンをクリック↓↓
その次の画面で下のように記入(Domainsには自分自身のHerokuアプリのURLを入れる)
Domains
の部分はこのAPIキーが使える箇所を制限してくれるもの例えば、僕が
ilovecanada.ca
というウェブサイトを所有していたとしよう。それでここにそれを入れることでこのAPIキーはそのウェブサイトでしか使えなくなるのだ。これはいざAPIキーが他人に漏れた時のために乱用されないようにするためのもの。しかし、今では自分のウェブサイトを指定しないとそもそもリキャプチャを使わせてくれないようだ。
そしたら、以下のように2つのキーが表示されるはずだ(僕のは隠したが)
キーを環境変数として設定する
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_key
とyour_secret_key
にそれぞれ自分のキーを入れて以下のコマンドを実行する
heroku config:set recaptcha_site_key=your_site_key heroku config:set recaptcha_secret_key=your_secret_key
では、もう一度Herokuアプリを開いてみよう。次のようになっているはず
おめでとう!リキャプチャが正しく表示されました。
実践してみよう。名前とメールに適当に何か入れて"Submit"ボタンを押す。(これはリキャプチャやってないから拒否されるはず)
なんと!通ってしまった。
実はコードをつけ足さないとリキャプチャの判別をしてくれないのだ。
コントローラーにコードを入れる
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"ボタンを押す。そうすると...
今回はちゃんと拒否されました。では、リキャプチャを正解したら...
ちゃんと登録できました!!
言語設定を日本語にする
やり方は簡単。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
まとめ
こんな簡単になったのもオープンソースを作ってくれた方々とサービスを提供してくれているグーグルのおかげである。感謝してます!
もしも、何か質問や感想、次の依頼があるのならコメントまたはツイッターまでDMお願いします!!