前端
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<script th:src="@{/public/js/jquery.min.js}"></script>
<script th:src="@{https://g.alicdn.com/AWSC/AWSC/awsc.js}"></script>
</head>
<body>
<form id="login-form">
<input id="account" type="text" placeholder="账号" />
<input id="password" type="password" placeholder="密码">
<button type="button" id="register" >注册</button>
</form>
<div id="nc"></div>
<script th:inline="javascript">
var appKey = [[${appKey}]];
var scene = [[${scene}]];
// 实例化nvc 对无痕验证进行初始化操作
AWSC.use("nvc", function (state, module) {
// 初始化 调用module.init进行初始化
window.nvc = module.init({
// 应用类型标识。它和使用场景标识（scene字段）一起决定了无痕验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
appkey: appKey,
//使用场景标识。它和应用类型标识（appkey字段）一起决定了无痕验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
scene: scene,
// 二次验证获取人机信息串，跟随业务请求一起上传至业务服务器，由业务服务器进行验签。
success: function (data) {
window.console && console.log(data)
verificationData(data, 'nc');
},
// 前端二次验证失败时触发该回调参数
fail: function (failCode) {
window.console && console.log("fail:"+failCode)
},
// 前端二次验证加载异常时触发该回调参数。
error: function (errorCode) {
window.console && console.log("error:"+errorCode)
}
});
});
// 发送业务请求：点击按钮时触发，主动获取人机信息串，并发送给业务服务端
$('#register').click(function () {
window.nvc.getNVCValAsync(function (nvcVal) {
// 获取人机信息串
// 将以下getNVCVal()函数的值，跟随业务请求一起上传，由后端请求AnalyzeNvc接口并返回200，400，600或者800。
verificationData(nvcVal, 'nvc');
});
})
function verificationData(data, type) {
$.ajax({
url: "/ali/nvcAnalyze",
type: "POST",
data: {"data": data, 'type': type},
success: function (data) {
business_handle(data);
}
})
}
// 处理业务返回结果：人机信息串上传接口的回调函数，通过业务服务端的返回结果，控制无痕验证的不同状态。
function business_handle(data) {
console.log(JSON.stringify(data));
// 业务服务器请求回调控制是否需要二次验证
if (data.code == '100' || data.code == '200') {
// 无痕验证通过
alert("验证通过!");
// 去注册或登录
} else if (data.code == '800' || data.code == '900') {
// 无痕验证失败，直接拦截
alert("验证失败!");
// 跳转到账号密码页
var ncoption = {
// 声明滑动验证需要渲染的目标ID。
renderTo: "nc",
// 二次验证文案配置
upLang: {
'cn': {
//加载状态提示。
'LOADING': "加载中...",
//等待滑动状态提示。
'SLIDE': "请向右滑动验证",
//验证通过状态提示。
'SUCCESS': "验证通过",
//验证失败触发拦截状态提示。
'ERROR': "非常抱歉，网络出错了...",
//验证失败触发拦截状态提示。
'FAIL': "验证失败，请重试"
}
}
}
// 唤醒二次验证（滑动验证码）
window.nvc.getNC(ncoption);
} else if (data.code == '400') {
// 无痕验证失败，触发二次验证
// 二次验证码（滑动验证码）配置项设置，详情请见滑动验证集成方式文档
// 二次验证的appkey，scene，test值及success，fail，error的回调由nvc初始化时决定，请不要在二次验证时传入
var ncoption = {
// 声明滑动验证需要渲染的目标ID。
renderTo: "nc",
// 二次验证文案配置
upLang: {
'cn': {
//加载状态提示。
'LOADING': "加载中...",
//等待滑动状态提示。
'SLIDE': "请向右滑动验证",
//验证通过状态提示。
'SUCCESS': "验证通过",
//验证失败触发拦截状态提示。
'ERROR': "非常抱歉，网络出错了...",
//验证失败触发拦截状态提示。
'FAIL': "验证失败，请重试"
}
}
}
// 唤醒二次验证（滑动验证码）
window.nvc.getNC(ncoption);
}
}
</script>
</body>
</html> 后端接口：
@Controller
@RequestMapping("/ali")
public class AliWuHenYzmController {
public static final String REGIONID = "cn-hangzhou";
public static final String ACCESS_KEY_ID = "*** Provide your AccessKeyId ***";
public static final String ACCESS_KEY_SECTET = "*** Provide your AccessKeySecret ***";
public static final String PRODUCT = "afs";
public static final String ENDPOINT = "afs.aliyuncs.com";
public static final IClientProfile PROFILE = DefaultProfile.getProfile(REGIONID, ACCESS_KEY_ID, ACCESS_KEY_SECTET);
static {
DefaultProfile.addEndpoint(REGIONID, PRODUCT, ENDPOINT);
}
@RequestMapping("/index")
public String index(ModelMap map) {
String appKey = "FFFF0N0000000000A01A";
map.put("appKey", appKey);
String scene = "nvc_register_h5";
map.put("scene", scene);
return "wuhen/slid_test";
}
@RequestMapping("/nvcAnalyze")
@ResponseBody
public Object nvcAnalyze(String data, String type) {
Map<String, Object> hashMap = new HashMap<>();
String code = verificationData(data);
if (code == null || "".equals(code.trim())) {
code = "400";
}
hashMap.put("code", code);
return hashMap;
}
public String verificationData(String nvcVal) {
AnalyzeNvcRequest request = new AnalyzeNvcRequest();
//必填参数，由前端获取getNVCVal方法获得的值。
request.setData(nvcVal);
// 通过setScoreJsonStr方法声明"服务端调用阿里云验证码接口得到的返回结果"与"前端执行操作"间的映射关系，并通知验证码服务端进行二次验证授权。
// 注意：前端页面必须严格按照该映射关系执行相应操作，否则将导致调用异常。
// 例如，在setScoreJsonStr方法中声明"400":"NC"，则当服务端返回400时，您的前端必须唤醒滑动验证（NC），如果唤醒其他验证，则将导致失败。
//根据业务需求设置各返回结果对应的客户端处置方式。
request.setScoreJsonStr("{\"200\":\"PASS\",\"400\":\"NC\",\"800\":\"BLOCK\"}");
try {
IAcsClient client = new DefaultAcsClient(PROFILE);
AnalyzeNvcResponse response = client.getAcsResponse(request);
return response.getBizCode();
// TODO
} catch (Exception e) {
e.printStackTrace();
}
return "";
}
} ![一位经验丰富的前端开发人员因未能通过算法面试题而受人嘲笑[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)