滑動驗證的設計與實現J2EE

滑動驗證的設計與實現J2EE

注：本博文為博主原創，轉載請注明出處。

項目源碼地址：https://github.com/zhangxy1035/Verify

本篇博文的主要目錄如下：

一、項目簡介
二、項目演示
　　2.1滑動驗證演示
　　2.2驗證碼演示
三、項目構建
　　3.1滑動驗證的項目構建
　　3,2驗證碼生成與實現
四、項目總結以及參考資料

　　　　一、項目簡介

　　　　　驗證碼在網頁中隨處可見，它主要是防止對某一個特定注冊用戶用特定程序進行暴力破解方式不斷的登陸嘗試。現在大多數的驗證包括，字符驗證碼、文字驗證等。在本博文中也實現了一般驗證碼的生成。但是本文的重點還是放在了基於極驗插件實現的滑動驗證功能。

　　　　　二、項目演示

　　　　　　2.1滑動驗證演示

 

　　　　　　2.2驗證碼驗證

　　　　三、項目構建

　　　　　　3.1滑動驗證項目構建

　　　　　　在滑動驗證中，使用了第三方的插件極驗（http://www.geetest.com/）。在極驗的官方文檔中介紹比較詳細，什么樣的后台，用什么樣的代碼，並且如何將這個插件集成在自己的項目中，在本節，我們將主要完成極驗插件與Java Web的集成。

　　　　　　先來一張極驗的原理圖（圖片來源：http://www.geetest.com/install/sections/idx-main-frame.html）

 

　　　　　　首先在極驗平台上下載所需的平台插件。http://www.geetest.com/install/（以Java為例）。在認真閱讀極驗技術文檔后，在https://github.com/GeeTeam/gt-java-sdk上下載插件。在插件中的主要類的代碼如下。

　　　　GeetestLib.java（這個類是主要的類，必須在文件中包含）

　　　　GeetestConfig.java（基礎的配置信息，比較重要的為id，key）

// 填入自己的captcha_id和private_key
    private static final String geetest_id = "72ddccf637ee857411051fe81f66412e";
    private static final String geetest_key = "fc84991f179bc1f9210556739f62c9ff";

　　　　StartCaptchaServlet.java（Servlet，這個類所在的包一定要和web.xml文件中保持一致）

　　　　web.xml（因為要融合到自己的項目中，所以在此之前我們需要新建一個java web項目，然后在web.xml文件中增加以下內容）

    <servlet>
        <servlet-name>StartCaptchaServlet</servlet-name>
        <servlet-class>com.controller.login.StartCaptchaServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>StartCaptchaServlet</servlet-name>
        <url-pattern>/login/pc-geetest/register</url-pattern>
    </servlet-mapping>

　　　　其中上圖中的關於servlet配置和普通的配置是一樣的。只是在此需要注意<url-pattern>這個應該和自己的實際路徑保持一致，並且要與前台頁面中的也需要一致，前台頁面中url為pc-geetest/register，這里卻是/login/pc-geetest/register，這是由於，我本身的項目中用到了SpringMVC地址多映射了一層。

　　　　login.jsp

<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<!-- 引入封裝了failback的接口--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>

 <form id="loginForm" action="login.from" method="post">
    <p>
      <input type="text" id="username2" name="username" placeholder="用戶名" class="form-control top">
      <input type="password" id="password2" name="password" placeholder="密碼" class="form-control top">

    <div id="embed-captcha"></div>
    <p id="wait" class="show">正在加載驗證碼......</p>
    <p id="notice" class="hide">請先拖動驗證碼到相應位置</p>

<br>
     <button class="btn btn-lg btn-primary btn-block" id="embed-submit" onclick="doSubmit();">登陸</button>
</form>

<script>
    var handlerEmbed = function (captchaObj) {
        $("#embed-submit").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice")[0].className = "show";
                setTimeout(function () {
                    $("#notice")[0].className = "hide";
                }, 2000);
                e.preventDefault();
            }
        });
        // 將驗證碼加到id為captcha的元素里，同時會有三個input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口參考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        // 獲取id，challenge，success（是否啟用failback）
        url: "pc-geetest/register?t=" + (new Date()).getTime(), // 加隨機數防止緩存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 使用initGeetest接口
            // 參數1：配置參數
            // 參數2：回調，回調的第一個參數驗證碼對象，之后可以使用它做appendTo之類的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "embed", // 產品形式，包括：float，embed，popup。注意只對PC版驗證碼有效
                offline: !data.success // 表示用戶后台檢測極驗服務器是否宕機，一般不需要關注
                // 更多配置參數請參見：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerEmbed);
        }
    });
</script>

　　　　在上述代碼中比較重要的是在網頁中必須引入jquery，以及，極驗平台提供的js，<script src="http://static.geetest.com/static/tools/gt.js"></script>這個js主要會去加載圖片，以及根據驗證的ID和key進行判斷。這樣一個項目就構建成功了。這個實現的主要功能為，通過將小的圖片移動到缺口處，即可通過驗證。

　　　　3.2一般驗證碼項目構建

 　　　　首先在這個項目中實現的一般驗證碼為生成了從A-Za-z0-9之中的5個隨機數，將此隨機數在傳遞到前台進行，驗證碼的正確與否則是通過后台進行判斷。主要的代碼如下：

　　　　驗證碼生成

package com.ow.appmg.controller.login;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.OutputStream;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/login")
public class GetCodeController {
    
    @RequestMapping("/getCode")
    public void execute(
        HttpServletResponse response,
        HttpSession session) throws Exception{
        //0.創建空白圖片
        BufferedImage image = new BufferedImage(100,30,BufferedImage.TYPE_INT_RGB);
        //1.獲取圖片畫筆
        Graphics g = image.getGraphics();
        Random r = new Random();
        //2.設置畫筆顏色
        g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
        //3.繪制矩形的背景
        g.fillRect(0, 0, 100, 30);    
        //4.調用自定義的方法，獲取長度為5的字母數字組合的字符串
        String number = getNumber(5);    
        //將圖片字符存入session,用於驗證碼檢查使用
        session.setAttribute("scode", number);
        g.setColor(new Color(0,0,0));
        g.setFont(new Font(null,Font.BOLD,24));
        //5.設置顏色字體后，繪制字符串
        g.drawString(number, 5, 25);
        //6.繪制8條干擾線
        for(int i=0;i<8;i++){
            g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255),r.nextInt(255)));
            g.drawLine(r.nextInt(100), r.nextInt(30), r.nextInt(100), r.nextInt(30));
        }
        response.setContentType("image/jpeg");
        OutputStream ops = response.getOutputStream();
        ImageIO.write(image, "jpeg", ops);
        ops.close();
    }
    
    private String getNumber(int size){
        String str = "qwertyuioplkjhgfdsazxcvbnmABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        String number = "";
        Random r = new Random();
        for(int i=0;i<size;i++){
            number+=str.charAt(r.nextInt(str.length()));
        }
        return number;
    }
}

　　　　在上述代碼中使用了SpringMVC，前台通過請求可以得到從后台生成的驗證碼。

　　　　前台頁面login.jsp

<form id="loginForm" action="login.from" method="post">
                <p class="text-muted text-center">
                    輸入用戶名和密碼
                </p>
                <input type="text" name="username" placeholder="用戶名" class="form-control top">
                <input type="password" name="password" placeholder="密碼" class="form-control top">
                <input name="code" type="text" placeholder="驗證碼" class="form-control bottom">
                <img src="getCode.from" alt="驗證碼" id="img" onclick="change()" />
                <div class="checkbox">
          <label>
            <input type="checkbox"> 記住用戶名和密碼
          </label>
        </div>
                <button class="btn btn-lg btn-primary btn-block" onclick="doSubmit();">登陸</button>
            </form>
    <script type="text/javascript">

        function doSubmit(){
            //表單數據js檢查
            //提交表單
            document.getElementById("loginForm").submit();
        }
        function change(){
            document.getElementById("img").src='getCode.from?'+new Date().getTime();
        };

    </script>

　　　　在本頁面中也實現了一個功能，點擊驗證碼可以進行重新請求，重新生成。函數名稱為change()函數。

　　　　四、項目總結以及參考資料

　　　　在本文中主要實現了滑動驗證的功能，和一般驗證碼生成的功能，從本質上對於用戶來說都是有區別的，滑動驗證可以檢測是否是用戶行為從而進行驗證，這一點無疑是比一般驗證要安全很多。

　　　　參考的資料

　　　　極驗（http://www.geetest.com/）技術文檔