滑動驗證碼

時間 2019-11-21

標籤滑動驗證碼简体版

原文原文鏈接

一，使用極驗的滑動驗證

　　1）先看下效果html

二，註冊後就能夠獲取到ID 與KEY(用於獲取驗證碼，與校驗驗證碼)

三，頁面

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>gt-node-sdk-demo</title>
    <style>
        body {
            margin: 50px 0;
            text-align: center;
            font-family: "PingFangSC-Regular", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
        }
        .inp {
            border: 1px solid #cccccc;
            border-radius: 2px;
            padding: 0 10px;
            width: 278px;
            height: 40px;
            font-size: 18px;
        }
        .btn {
            border: 1px solid #cccccc;
            border-radius: 2px;
            width: 100px;
            height: 40px;
            font-size: 16px;
            color: #666;
            cursor: pointer;
            background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
        }
        .btn:hover {
            background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%)
        }
        #captcha1,
        #captcha2 {
            width: 300px;
            display: inline-block;
        }
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
        #notice1,
        #notice2 {
            color: red;
        }
        label {
            vertical-align: top;
            display: inline-block;
            width: 80px;
            text-align: right;
        }
        #wait1, #wait2 {
            text-align: left;
            color: #666;
            margin: 0;
        }
    </style>
</head>
<body>
<form action="loginGee" method="post">
    <div>
        <label for="username1">用戶名：</label>
        <input class="inp" id="username1" type="text" value="極驗驗證">
    </div>
    <br>
    <div>
        <label for="password1">密碼：</label>
        <input class="inp" id="password1" type="password" value="123456">
    </div>
    <br>
    <div>
        <label>完成驗證：</label>
        <div id="captcha1">
            <p id="wait1" class="show">正在加載驗證碼......</p>
        </div>
    </div>
    <br>
    <p id="notice1" class="hide">請先完成驗證</p>
    <input class="btn" id="submit1" type="submit" value="提交">
</form>

<!-- 注意，驗證碼自己是不須要 jquery 庫，此處使用 jquery 僅爲了在 demo 使用，減小代碼量 -->
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>

<!-- 引入 gt.js，既能夠使用其中提供的 initGeetest 初始化函數 -->
<script src="js/gt.js"></script>

<script>
    var handler1 = function (captchaObj) {
        $("#submit1").click(function (e) {
            var result = captchaObj.getValidate();
            if (!result) {
                $("#notice1").show();
                setTimeout(function () {
                    $("#notice1").hide();
                }, 2000);
                e.preventDefault();
            }
        });
        // 將驗證碼加到id爲captcha的元素裏，同時會有三個input的值用於表單提交
        captchaObj.appendTo("#captcha1");
        captchaObj.onReady(function () {
            $("#wait1").hide();
        });
        // 更多接口參考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        url: "getGee", // 加隨機數防止緩存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 調用 initGeetest 初始化參數
            // 參數1：配置參數
            // 參數2：回調，回調的第一個參數驗證碼對象，以後能夠使用它調用相應的接口
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha, // 用於宕機時表示是新驗證碼的宕機
                offline: !data.success, // 表示用戶後臺檢測極驗服務器是否宕機，通常不須要關注
                product: "float", // 產品形式，包括：float，popup
                width: "100%"
            }, handler1);
        }
    });
</script>
</body>
</html>

四，引用jar包，與工具類

　　1）依賴，導入官方提供的jar包到maven項目java

<dependency>
        <groupId>java</groupId>
        <artifactId>json</artifactId> 
        <version>1.0.0</version>
        <systemPath>${project.basedir}/src/main/webapp/WEB-INF/lib/java-json.jar</systemPath>
        <scope>compile</scope> 
    </dependency>
    
    <dependency>
        <groupId>servlet</groupId>
        <artifactId>api</artifactId> 
        <version>1.0.0</version>
        <systemPath>${project.basedir}/src/main/webapp/WEB-INF/lib/servlet-api.jar</systemPath>
        <scope>compile</scope> 
    </dependency>

　　2）引入工具類node

　　把官方demo中sdk下的 GeetestLib 放在你項目的工具包中jquery

五，調用

//獲取驗證碼
    @RequestMapping("getGee")
    public void getGee(HttpServletRequest request,HttpServletResponse response) {
        
        GeetestLib gtSdk = new GeetestLib("你的id", "你的key", true);
        
        String resStr = "{}";
        
        String userid = "test";
        
        HashMap<String, String> param = new HashMap<String, String>();
        
        param.put("uid", "12");
        
        int gtServerStatus = gtSdk.preProcess(param);
        
        //將服務器狀態設置到session中
        request.getSession().setAttribute(gtSdk.gtServerStatusSessionKey, gtServerStatus);
        //將userid設置到session中
        request.getSession().setAttribute("userid", userid);
        
        resStr = gtSdk.getResponseStr();
        
        PrintWriter out=null;
        try {
            out = response.getWriter();
        } catch (IOException e) {
            e.printStackTrace();
        }
        out.println(resStr);
    }
    //驗證是否經過
    @RequestMapping("loginGee")
    public void loginGee(HttpServletRequest request,HttpServletResponse response) {
        
        GeetestLib gtSdk = new GeetestLib("你的id", "你的key", true);
        
        String challenge = request.getParameter(GeetestLib.fn_geetest_challenge);
        String validate = request.getParameter(GeetestLib.fn_geetest_validate);
        String seccode = request.getParameter(GeetestLib.fn_geetest_seccode);
        
        
        //從session中獲取gt-server狀態
        int gt_server_status_code = (Integer) request.getSession().getAttribute(gtSdk.gtServerStatusSessionKey);
        
        //從session中獲取userid
        String userid = (String)request.getSession().getAttribute("userid");
        
        HashMap<String, String> param = new HashMap<String, String>(); 
        param.put("user_id", userid); //網站用戶id
        
        int gtResult = 0;
        if (gt_server_status_code == 1) {
            //gt-server正常，向gt-server進行二次驗證
                
            gtResult = gtSdk.enhencedValidateRequest(challenge, validate, seccode, param);
            System.out.println(gtResult);
        } else {
            // gt-server非正常狀況下，進行failback模式驗證
                
            System.out.println("failback:use your own server captcha validate");
            gtResult = gtSdk.failbackValidateRequest(challenge, validate, seccode);
            System.out.println(gtResult);
        }

        if (gtResult == 1) {
            // 驗證成功
            System.out.println("驗證成功");
        }
        else {
            // 驗證失敗
            System.out.println("驗證失敗");
        
        }
    
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。