Rails3使用easy_captcha来实现验证码

阅读更多

easy_captcha是一个比较简洁的用来做验证码的gem插件

1、安装依赖rmagick

gem 'easy_captcha'
gem 'rmagick'

2、安装配置

rails g easy_captcha:install

执行安装后，配置config/initializers/easy_captcha.rb的各种参数
这是官网的一个配置例子（根据自己的需求，解注释）

EasyCaptcha.setup do |config|
  # Cache
  # config.cache          = true
  # Cache temp dir from Rails.root
  # config.cache_temp_dir = Rails.root.join('tmp', 'captchas')
  # Cache size
  # config.cache_size     = 500
  # Cache expire
  # config.cache_expire   = 1.day

  # Chars
  # config.chars          = %w(2 3 4 5 6 7 9 A C D E F G H J K L M N P Q R S T U X Y Z)

  # Length
  # config.length         = 6

  # Image
  # config.image_height   = 40
  # config.image_width    = 140

  # eSpeak (default disabled)
  # config.espeak do |espeak|
    # Amplitude, 0 to 200
    # espeak.amplitude = 80..120

    # Word gap. Pause between words
    # espeak.gap = 80

    # Pitch adjustment, 0 to 99
    # espeak.pitch = 30..70

    # Use voice file of this name from espeak-data/voices
    # espeak.voice = nil
  # end

  # configure generator
  # config.generator :default do |generator|

    # Font
    # generator.font_size              = 24
    # generator.font_fill_color        = '#333333'
    # generator.font_stroke_color      = '#000000'
    # generator.font_stroke            = 0
    # generator.font                   = File.expand_path('../../resources/afont.ttf', __FILE__)

    # Background color
    # generator.image_background_color = "#FFFFFF"
    # Or background image (e.g. transparent png)
    # generator.background_image       = File.expand_path('../../resources/captcha_bg.png', __FILE__)

    # Wave
    # generator.wave                   = true
    # generator.wave_length            = (60..100)
    # generator.wave_amplitude         = (3..5)

    # Sketch
    # generator.sketch                 = true
    # generator.sketch_radius          = 3
    # generator.sketch_sigma           = 1

    # Implode
    # generator.implode                = 0.1

    # Blur
    # generator.blur                   = true
    # generator.blur_radius            = 1
    # generator.blur_sigma             = 2
  # end
end

3、使用
在页面的form表单中添加：

  
<%= captcha_tag %>
  
<%= text_field_tag :captcha %>

在对应的提交的action中

  if captcha_valid? params[:captcha]
     redirect_to :index, :notice => "验证成功"
  else
     flash[:alert] = "验证失败"
  end

补充：
结合使用devise登录验证的验证码实现
devise是gem包的形式来存在的，所以基于devise的登录需要重写他的session类
1、创建sessions_controller并重载devise的sessions_controller

# encoding: utf-8

class SessionsController < Devise::SessionsController
  skip_before_filter :require_no_authentication, :only => [:new, :create]  

  def create
    if captcha_valid? params[:captcha]
      super
    else
      build_resource
      flash[:error] = "验证码输入错误"
      respond_with_navigational(resource) { render :new }
    end        
  end 
end

2、修改路由配置（默认的devise的配置是devise/sessions#create）

devise_for :users, controllers: {sessions: "sessions"}

参考资料
easy_captcha
https://github.com/phatworx/easy_captcha
easy_captcha实例
https://github.com/phatworx/easy_captcha_example

3、动态刷新
也可以去重写他的captcha_tag 方法，另外也可以去写js

   $(document).ready ->
     # 验证码刷新
     $("img[alt='captcha']").each (index, item) ->
       item.title = '看不清？点击刷新'
     $("img[alt='captcha']").bind 'click', (event) ->
       this.src = this.src + '?'