用到的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">×</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... ...