接入阿里无痕验证

阅读：评论：0

接入阿里无痕验证

前端

<!DOCTYPE html>
<html xmlns:th="">
<head><meta charset="utf-8" /><script th:src="@{/public/js/jquery.min.js}"></script><script th:src="@{.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) {sole && console.log(data)verificationData(data, 'nc');},// 前端二次验证失败时触发该回调参数fail: function (failCode) {sole && console.log("fail:"+failCode)},// 前端二次验证加载异常时触发该回调参数。error: function (errorCode) {sole && console.log("error:"+errorCode)}});});// 发送业务请求：点击按钮时触发，主动获取人机信息串，并发送给业务服务端$('#register').click(function () {NVCValAsync(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 (de == '100' || de == '200') {// 无痕验证通过alert("验证通过!");// 去注册或登录} else if (de == '800' || de == '900') {// 无痕验证失败，直接拦截alert("验证失败!");// 跳转到账号密码页var ncoption = {// 声明滑动验证需要渲染的目标ID。renderTo: "nc",// 二次验证文案配置upLang: {'cn': {//加载状态提示。'LOADING': "加载中...",//等待滑动状态提示。'SLIDE': "请向右滑动验证",//验证通过状态提示。'SUCCESS': "验证通过",//验证失败触发拦截状态提示。'ERROR': "非常抱歉，网络出错了...",//验证失败触发拦截状态提示。'FAIL': "验证失败，请重试"}}}// 唤醒二次验证（滑动验证码）NC(ncoption);} else if (de == '400') {// 无痕验证失败，触发二次验证// 二次验证码（滑动验证码）配置项设置，详情请见滑动验证集成方式文档// 二次验证的appkey，scene，test值及success，fail，error的回调由nvc初始化时决定，请不要在二次验证时传入var ncoption = {// 声明滑动验证需要渲染的目标ID。renderTo: "nc",// 二次验证文案配置upLang: {'cn': {//加载状态提示。'LOADING': "加载中...",//等待滑动状态提示。'SLIDE': "请向右滑动验证",//验证通过状态提示。'SUCCESS': "验证通过",//验证失败触发拦截状态提示。'ERROR': "非常抱歉，网络出错了...",//验证失败触发拦截状态提示。'FAIL': "验证失败，请重试"}}}// 唤醒二次验证（滑动验证码）NC(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";public static final IClientProfile PROFILE = Profile(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")@ResponseBodypublic Object nvcAnalyze(String data, String type) {Map<String, Object> hashMap = new HashMap<>();String code = verificationData(data);if (code == null || "".im())) {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 = AcsResponse(request);BizCode();// TODO} catch (Exception e) {e.printStackTrace();}return "";}
}

本文发布于:2024-01-30 23:52:48，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170662996923738.html

上一篇：ios无痕埋点

下一篇：Android无痕埋点开源,Android无痕埋点（1）— 点击监听

标签：阿里无痕

留言与评论（共有 0 条评论）