文章目录
- 简介
- 验证码样例
- 开发准备
- 入门demo
简介
滑块验证码主要的作用是方便用户进行快捷验证操作,但是同时要合理的辨别到底是机器操作还是人工操作,这一点显得难度比较大,是属于人机识别的智能开发范畴,所以相对于之前的传统4位或者6位图片验证码来说,开发起来显得更加困难,所以一般来说都会接入一些第三方的Api来辅助开发人员进行滑块识别和验证。主要是根据用户在页面内的一些鼠标点击,停留,滑动距离等信息,综合来断定这个滑动操作是否是人为发起的。本文将结合阿里云的滑块验证技术来实现网站安全登录操作。
验证码样例
开发准备
进入阿里云的云盾·人机验证,配置管理里面添加对应的服务
可以在系统集成板块找到你想要的代码
根据语言需求下载对应的sdk
入门demo
废话不多说,开整
html文件
//引入js文件
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
//页面添加这个div
<!--No-Captcha渲染的位置,其中class中必须包含nc-container-->
<div id="your-dom-id" class="nc-container"></div>
<input type="hidden" id="sessionId" name="sessionId"/>
//js代码
<script type="text/javascript">
//xxxxxxxxxxxxx token 我填的是阿里云控制台的appkey
var nc_token = ["appkey", (new Date()).getTime(), Math.random()].join(':');
var NC_Opt =
{
renderTo: "#your-dom-id",
appkey: "appkey", //此处填阿里云控制台给你的appkey
scene: "scene", //此处填阿里云控制台给你的scene
token: nc_token,
customWidth: 306,
trans:{"key1":"code0"},
elementID: ["usernameID"],
is_Opt: 0,
language: "cn",
isEnabled: true,
timeout: 3000,
times:5,
apimap: {
// 'analyze': '//a.com/nocaptcha/analyze.jsonp',
// 'get_captcha': '//b.com/get_captcha/ver3',
// 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
// 'get_img': '//c.com/get_img',
// 'checkcode': '//d.com/captcha/checkcode.jsonp',
// 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
// 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
// 'umid_serUrl': 'https://g.com/service/um.json'
},
callback: function (data) {
var sessionId=data.csessionid+","+data.sig+","+data.token+","+"nc_login";
$("#sessionId").val(sessionId);
}
}
var nc = new noCaptcha(NC_Opt)
nc.upLang('cn', {
_startTEXT: "请按住滑块,拖动到最右边",
_yesTEXT: "验证通过",
_error300: "哎呀,出错了,单击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
_errorNetwork: "网络不给力,请<a href=\"javascript:__nc.reset()\">单击刷新</a>",
})
</script>
java后端代码
登录代码中加上验证码验证逻辑
/**
* 用户登录验证
*/
@ResponseBody
@RequestMapping(value = "/login", method = RequestMethod.POST)
public ResponseResult login(@RequestParam("username") String username,
@RequestParam("password") String password,
@RequestParam("sessionId") String sessionId,
ModelMap model, HttpServletRequest request) throws IOException {
if (StringUtils.isEmpty(sessionId)) {
return new ResponseResult(205, "请滑动图形码");
}
if (!AfsCheck.check(sessionId, request)) {
return new ResponseResult(205, "图形码验证失败");
}
}
AfsCheck.java
package com.ph.bscCloud.common.utils;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.afs.model.v20180112.AuthenticateSigRequest;
import com.aliyuncs.afs.model.v20180112.AuthenticateSigResponse;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.profile.IClientProfile;
import org.apache.commons.lang3.StringUtils;
import javax.servlet.http.HttpServletRequest;
public class AfsCheck {
//ACCESS_KEY、ACCESS_SECRET请替换成您的阿里云accesskey和secret
private static String ACCESS_KEY = "ACCESS_KEY";
private static String ACCESS_SECRET = "ACCESS_SECRET";
/**
* sessionId
*
* @param sessionId 为h5从风控服务器获取的返回值(字符串),具体格式:sessionId<-->sig<-->token<-->scene
* @param req
* @return
*/
public static boolean check(String sessionId, HttpServletRequest req) {
try {
if (StringUtils.isEmpty(sessionId)) {
return false;
}
String[] afs = sessionId.split(",");
IClientProfile profile = DefaultProfile.getProfile("cn-beijing", ACCESS_KEY, ACCESS_SECRET);
IAcsClient client = new DefaultAcsClient(profile);
DefaultProfile.addEndpoint("cn-beijing", "cn-beijing", "afs", "afs.aliyuncs.com");
AuthenticateSigRequest request = new AuthenticateSigRequest();
request.setSessionId(afs[0]);// 必填参数,从前端获取,不可更改
request.setSig(afs[1]);// 必填参数,从前端获取,不可更改
request.setToken(afs[2]);// 必填参数,从前端获取,不可更改
request.setScene(afs[3]);// 必填参数,从前端获取,不可更改
request.setAppKey("appkey");// 必填参数,此处填阿里云控制台给你的appkey
request.setRemoteIp(GetIpUtil.getIp(req));// 必填参数,后端填写
AuthenticateSigResponse response = client.getAcsResponse(request);
if (response.getCode() == 100) {
return true;
}
} catch (Exception e) {
e.printStackTrace();
}
return false;
}
}
浏览器输出结果,下面结果表示验证成功,现在一般来说就可以创建一个session标识验证成功,前台点击登录就可以放行了。
ok,阿里云滑块验证集成到此结束,溜了…