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... ...

posted on 2013-08-13 10:31  小海少  阅读(1210)  评论(0编辑  收藏  举报