概要

基于极验验证官网 java版gt3-java-sdk改编,使用Spring Boot 整合的极验滑动验证，包含form表单登录和ajax登录两种情况。

目录

• 注册账户获取ID和KEY
• Demo源码说明
• Demo演示
• 源码地址

---

注册账户获取ID和KEY

1.进入官网注册账户

2.登录后台选择行为认证

3.增加认证

4.输入信息

5.获取ID和KEY

Demo源码说明

1.Demo结构

2.关键代码说明

• sdk包下类和gt.js为极验验证官方提供

• GeetestConfig.java：ID和KEY配置位置

  // 填入自己的captcha_id和private_key
  private static final String geetest_id = "978b73ea94b4393026524553045ed2ab";
  private static final String geetest_key = "7cd60bfef0a65a78ace8ba085aad023d";
  private static final boolean newfailback = true;public static final String getGeetest_id() {return geetest_id;
  }public static final String getGeetest_key() {return geetest_key;
  }public static final boolean isnewfailback() {return newfailback;
  }
  

• GeeTestUtil.java：自定义极验验证工具类，对用户操作结果进行验证

/**** @param httpSession* @param challenge* @param validate* @param seccode* @return*/public static boolean validate(HttpSession httpSession,String challenge, String validate, String seccode){GeetestLib gtSdk = new GeetestLib(GeetestConfig.getGeetest_id(), GeetestConfig.getGeetest_key(),GeetestConfig.isnewfailback());//从session中获取gt-server状态int gt_server_status_code = (Integer) httpSession.getAttribute(gtSdk.gtServerStatusSessionKey);//从session中获取useridString userid = (String)httpSession.getAttribute("userid");//自定义参数,可选择添加HashMap<String, String> param = new HashMap<String, String>();param.put("user_id", userid); //网站用户idparam.put("client_type", "web"); //web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式param.put("ip_address", "127.0.0.1"); //传输用户请求验证时所携带的IPint gtResult = RESULT_FAIL;boolean flag = false;if (gt_server_status_code == GT_SERVER_STATUS_CODE_OK) {//gt-server正常，向gt-server进行二次验证gtResult = gtSdk.enhencedValidateRequest(challenge, validate, seccode, param);} else {// gt-server非正常情况下，进行failback模式验证System.out.println("failback:use your own server captcha validate");gtResult = gtSdk.failbackValidateRequest(challenge, validate, seccode);System.out.println(gtResult);}return gtResult == RESULT_OK;}

• GeetTestController.java：注册验证码，获取流水号，加载验证码时调用

   /*** 验证1初始化* @return*/@ResponseBody@GetMapping("register1")public String register1(){GeetestLib gtSdk = new GeetestLib(GeetestConfig.getGeetest_id(), GeetestConfig.getGeetest_key(),GeetestConfig.isnewfailback());String resStr = "{}";String userid = "test";//自定义参数,可选择添加HashMap<String, String> param = new HashMap<String, String>();param.put("user_id", userid); //网站用户idparam.put("client_type", "web"); //web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式param.put("ip_address", "127.0.0.1"); //传输用户请求验证时所携带的IP//进行验证预处理int gtServerStatus = gtSdk.preProcess(param);//将服务器状态设置到session中httpSession.setAttribute(gtSdk.gtServerStatusSessionKey, gtServerStatus);//将userid设置到session中httpSession.setAttribute("userid", userid);resStr = gtSdk.getResponseStr();return resStr;}/*** 验证2 二次验证* @return*/@ResponseBody@GetMapping("register2")public String register2(){GeetestLib gtSdk = new GeetestLib(GeetestConfig.getGeetest_id(), GeetestConfig.getGeetest_key(),GeetestConfig.isnewfailback());String resStr = "{}";//自定义useridString userid = "test";//自定义参数,可选择添加HashMap<String, String> param = new HashMap<String, String>();param.put("user_id", userid); //网站用户idparam.put("client_type", "web"); //web:电脑上的浏览器；h5:手机上的浏览器，包括移动应用内完全内置的web_view；native：通过原生SDK植入APP应用的方式param.put("ip_address", "127.0.0.1"); //传输用户请求验证时所携带的IP//进行验证预处理int gtServerStatus = gtSdk.preProcess(param);//将服务器状态设置到session中httpSession.setAttribute(gtSdk.gtServerStatusSessionKey, gtServerStatus);//将userid设置到session中httpSession.setAttribute("userid", userid);resStr = gtSdk.getResponseStr();return resStr;}
  

• LoginController.java：登录验证类，控制验证码和账号密码验证结果

   /***模拟表单登录* @param model* @param geetest_challenge* @param geetest_validate* @param geetest_seccode* @param username1* @param password1* @return*/@RequestMapping("/loginForm")public String loginForm(Model model,String geetest_challenge, String geetest_validate, String geetest_seccode,String username1, String password1){if(!GeeTestUtil.validate(httpSession,geetest_challenge,geetest_validate,geetest_seccode)){model.addAttribute("result","验证失败!!!");return "result";}if("admin1".equals(username1) && "admin1".equals(password1)){model.addAttribute("result","登录成功!!!");}else{model.addAttribute("result","登录失败!!!");}return "result";}/*** 模拟AJAX登录* @param geetest_challenge* @param geetest_validate* @param geetest_seccode* @param username2* @param password2* @return*/@ResponseBody@RequestMapping("/loginAJAX")public String loginAJAX(String geetest_challenge, String geetest_validate, String geetest_seccode,String username2, String password2){if(!GeeTestUtil.validate(httpSession,geetest_challenge,geetest_validate,geetest_seccode)){return "验证失败!!!";}if("admin2".equals(username2) && "admin2".equals(password2)){return "登录成功!!!";}else{return "登录失败!!!";}}
  

• login.html：登录界面和验证码

  <form action="/login/loginForm" method="post" target="_blank"><h2>大图点击Demo，使用表单进行二次验证</h2><br><div><label for="username1">用户名：</label><input class="inp" id="username1" name="username1" type="text" value="admin1"></div><br><div><label for="password1">密码：</label><input class="inp" id="password1" name="password1" type="password" value="admin1"></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>
  <br><br>
  <hr>
  <form><h2>滑动demo，使用ajax进行二次验证</h2><br><div><label for="username2">用户名：</label><input class="inp" id="username2" type="text" value="admin2"></div><br><div><label for="password2">密码：</label><input class="inp" id="password2" type="password" value="admin2"></div><br><div><label>完成验证：</label><div id="captcha2"><p id="wait2" class="show">正在加载验证码......</p></div></div><br><p id="notice2" class="hide">请先完成验证</p><input class="btn" id="submit2" 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();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: "geetTest/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，popupwidth: "100%"// 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config}, handler1);}});var handler2 = function (captchaObj) {$("#submit2").click(function (e) {var result = captchaObj.getValidate();if (!result) {$("#notice2").show();setTimeout(function () {$("#notice2").hide();}, 2000);} else {$.ajax({url: 'login/loginAJAX',type: 'POST',// dataType: 'json',data: {username2: $('#username2').val(),password2: $('#password2').val(),geetest_challenge: result.geetest_challenge,geetest_validate: result.geetest_validate,geetest_seccode: result.geetest_seccode},success: function (data) {alert(data);}})}e.preventDefault();});// 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交captchaObj.appendTo("#captcha2");captchaObj.onReady(function () {$("#wait2").hide();});// 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html};$.ajax({url: "geetTest/register2?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: "popup", // 产品形式，包括：float，popupwidth: "100%"// 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config}, handler2);}});
  </script>
  

  Demo演示

  1.登录界面，正在加载的验证码

2.验证码展示

3.验证成功之后，提交跳转到登录页面，再次点击提交显示验证失败，一个验证码只能使用一次。（AJAX登录同理）

源码地址

• 官网Demo gt3-java-sdk
• github: git@github.com:hdlxt/lxtDaily.git