rails simple_captcha 驗證碼實現

　　用到的gem有

　　gem "galetahub-simple_captcha", :require => "simple_captcha"
　　gem "mini_magick"
　　執行bundle
　　重寫devise的controller方法

　　devise_for :users,
   　　 :controllers => { :sessions => "devise_hack/sessions",:registrations => "devise_hack/registrations" },
    　　:path_names  => { :sign_in  => 'login', :sign_out => 'logout', :sign_up => 'sign_up'}

　  執行下面命令安裝simple_captcha

rails generate simple_captcha

rake db:migrate

       生成_simple_captcha.html.erb文件，該文件爲驗證碼的局部視圖模板。

      修改局部視圖，添加一個切換驗證碼 連接

<div class='simple_captcha' id="simple_captcha">
  <div class='simple_captcha_image' id="simple_captcha_image">
    <%= simple_captcha_options[:image] %>
    <a href="javascript:void(0)" id="recognize_captcha">看不清，換一張</a>
  </div>
  
  <div class='simple_captcha_field'>
    <%= simple_captcha_options[:field] %>
  </div>
</div>

　　在controllers/devise_hack/registrations_controller.rb中    

# -*- encoding : utf-8 -*-
class DeviseHack::RegistrationsController < Devise::RegistrationsController
    include SimpleCaptcha::ControllerHelpers

    def create
    if simple_captcha_valid?
      super
    else
      build_resource
      #clean_up_passwords(resource)
      params[:user][:password] = nil
      flash.now[:alert] = "驗證碼錯誤!"
      respond_with_navigational(resource) { render :new }
    end
  end
end

　　註冊頁面的代碼

<h2>註冊</h2>

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
  <%= devise_error_messages! %>

  <div>
      <%= f.label :email, "郵箱" %>
      <%= f.email_field :email, :autofocus => true, :required => true %>
  </div>

  <div>
      <%= f.label :password, '密碼' %>
      <%= f.password_field :password, :required => true  %>
  </div>

  <div>
      <%= f.label :password_confirmation, '重複密碼' %>
      <%= f.password_field :password_confirmation, :required => true  %>
  </div>

  <%= show_simple_captcha( :label => t('simple_captcha.placeholder'))%>

  <label title="請先閱讀用戶須知">
      <input type="checkbox" name="" id="agree_box" value="" >贊成"<a href="#should_know" data-toggle = "modal">用戶須知</a>"和"<a href="">相關隱私政策</a>"
  </label>
  
  <div><%= f.submit "註冊", :id => 'commit', :class => 'btn btn-success', :disabled => true %></div>
<% end %>

<%= render "devise_hack/shared/links" %>

<div id="should_know" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>用戶須知</h3>
    </div>
    <div class="modal-body">
        <p>看完了就觀點掉好了</p>
        </div>
        <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">關閉</a>
    </div>
</div>

<script type="text/javascript">
  $(function(){
    $("#agree_box").attr('checked',false);
      $("#agree_box").click(function(){
          if($(this).is(":checked")){
              $('#commit').attr("disabled", false);
          }else{
              $('#commit').attr("disabled", true);
          }
      });

    $(document).on("click", '#recognize_captcha', function(){
       $.get("/update_captcha", function(data){
          $("#simple_captcha").replaceWith(data);
       });
    });
  })
</script>

     添加一個simple_cpatcha_controller.rb，並添加一個修改驗證碼的方法update_captcha

class SimpleCaptchaController < ApplicationController
    def update_captcha
        render :layout => false
    end
end

ola... ...