zoukankan      html  css  js  c++  java
  • 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... ...

  • 相关阅读:
    游标
    mobaxterm安装与使用(root_35/37/36/121)
    美团笔试--修改矩阵
    美团笔试1--螺旋矩阵
    assert函数
    2019年头条笔试--围坐分糖果
    邻值查找——stl函数lower_bound和upper_bound的使用
    动态规划练习1--腾讯暑期实习正式批
    Windows 7下硬盘安装CentOS6.4的解决方法
    Sublime Text 3 的一些基本使用方法和配置
  • 原文地址:https://www.cnblogs.com/itmangelihai/p/3254608.html
Copyright © 2011-2022 走看看