验证码 - 使用geetest 或者网易云盾提供的动态二维码

访问量: 405

直接访问:    https://github.com/sg552/geetest-ruby-sdk  这个是已经提取出来的SDK .

参考:  http://geetest.com   或者 https://github.com/GeeTeam/gt-ruby-sdk 

由于官方网站没有给出ruby SDK的链接,不要怕,搜一下就可以看到了(见上面得链接) 

研究完了。 上面的ruby sdk是版本2.0的。  所以搞了大半天,我们还是要做3.0 的东东。 

参考 java sdk:    https://docs.geetest.com/install/deploy/server/java/#%E4%B8%8B%E8%BD%BDSDK

1. 在本地搭建好JDK, eclipse, tomcat 环境

2. 跑起来。  (这些都是废话。。。呃。。。)

然后感受是: 

1. 先定义一个登陆页面( 注意定义的 submit1,   jquery , gt.js )

<form action="gt/ajax-validate1" method="post">
    <h2>大图点击Demo,使用表单进行二次验证</h2>
    <br>
    <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="gt.js"></script>

<script>
    var handler1 = function (captchaObj) {
        $("#submit1").click(function (e) {
            var result = captchaObj.getValidate();
            console.log("== result: " + result);
            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: "gt/register1?t=" + (new Date()).getTime(), // 加随机数防止缓存
        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%"
                // 更多配置参数请参见:http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handler1);
        }
    });
</script>

2. 请注意上面的 页面加载后, 会自动加载:   gt/register 这个url,   这个就是我们后端要做的事儿。 

后端代码: 会根据这个,返回类似于这样的结果的response: 

// result: 

{
  success: 1,    // 表示申请流水号成功
  challenge: "9aa704bb66dd93590adb5cdb3536db92",    // 这个 challenge 是流水号, 从 gee test服务器返回的。
  gt: "433133f5197e42bf5748be2230dbffd4"    // 这个是我们申请的 app id, 
}

同时,服务器端要在session中保存 “gee_test_server_status ” 和 "user_id" 的值   

user_id 就是当前服务器的一个标志。 是可选参数。 似乎是可以被GeeTest用作分析和统计

3. 接下来, WEB页面就会自动加载一系列的东东。 显示拖拽窗口啥的。 当拖拽完毕后, js端会自动把结果保存到一个对象: captchaObject.  (这个是前端的对象)允许用户点击表单的“下一步”按钮。(例如 登陆,注册,发送验证码 等等)

4. 然后, url 被 我们的后端处理。  我们的后端的代码中, 看起来是这样的: 

                 //1. 先获得sdk instance
		GeetestLib gtSdk = new GeetestLib(GeetestConfig.getGeetest_id(), GeetestConfig.getGeetest_key(), 
				GeetestConfig.isnewfailback());
			
                // 2. 这三个参数是被自动提交到form的。 根据 JS的结果传递进来的。
		String challenge = request.getParameter(GeetestLib.fn_geetest_challenge);
		String validate = request.getParameter(GeetestLib.fn_geetest_validate);
		String seccode = request.getParameter(GeetestLib.fn_geetest_seccode);
		
		// 3.   从session中获取gt-server状态.  正常工作情况下是 1 。 
		int gt_server_status_code = (Integer) request.getSession().getAttribute(gtSdk.gtServerStatusSessionKey);
		
		//从session中获取userid      
		String userid = (String)request.getSession().getAttribute("userid");
		
		//自定义参数,可选择添加
		HashMap param = new HashMap(); 
		param.put("user_id", userid); //网站用户id
		param.put("client_type", "web"); //web:电脑上的浏览器;h5:手机上的浏览器,包括移动应用内完全内置的web_view;native:通过原生SDK植入APP应用的方式
		param.put("ip_address", "127.0.0.1"); //传输用户请求验证时所携带的IP


		if (gt_server_status_code == 1) {
			//gt-server正常,向gt-server进行二次验证    4. 这个是最最重要的方法。 把结果交给 GeeTest远程服务器去验证。 
			gtResult = gtSdk.enhencedValidateRequest(challenge, validate, seccode, param);
			System.out.println(gtResult);
                }

5. 在上面的代码中,  enhencedValidateRequest是最重要的。  看起来如下: 

具体代码略了。反正就是根据上面几个参数,向GeeTest服务器发送请求。 服务器返回结果。 我们的后端就可以进行下一步的处理了!

订阅/RSS Feed

Subscribe

分类/category