概要
基于极验验证官网 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中获取userid
String userid = (String)httpSession.getAttribute("userid");
//自定义参数,可选择添加
HashMap<String, String> param = new HashMap<String, String>();
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
int 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); //网站用户id
param.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 = "{}";
//自定义userid
String userid = "test";
//自定义参数,可选择添加
HashMap<String, String> param = new HashMap<String, String>();
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
//进行验证预处理
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，popup
width: "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，popup
width: "100%"
// 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
}, handler2);
}
});
</script>Demo演示
1.登录界面，正在加载的验证码
2.验证码展示
3.验证成功之后，提交跳转到登录页面，再次点击提交显示验证失败，一个验证码只能使用一次。（AJAX登录同理）
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
