前端
<!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=)