無痕驗證集成方式
無痕驗證是阿里巴巴集團提供的全新的驗證碼解決方案。由無痕驗證組件收集并統一調度下游驗證碼服務實現綜合人機對抗的識別與處理。
在業務中接入無痕驗證后,組件完全靜默采集所需信息,從而對大部分正常用戶完全“零打擾”,僅對存在風險的用戶根據風險等級返回相應的下游驗證碼服務的喚醒建議(即調用該風險等級相應的驗證碼服務進行阿里云驗證碼)。
前端接入代碼示例
在需要使用無痕驗證功能的Web前端頁面中,首先需要對無痕驗證進行初始化,然后需要主動獲取人機信息串并傳給業務服務端,業務服務端通過風險服務端進行查詢后,返回結果給予客戶端,客戶端根據風險等級判斷無痕驗證通過,攔截,及是否需要喚醒二次驗證。以下代碼為無痕驗證功能的前端接入代碼示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script 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>
var btn = document.getElementById("register");
// 實例化nvc 對無痕驗證進行初始化操作
AWSC.use("nvc", function (state, module) {
// 初始化 調用module.init進行初始化
window.nvc = module.init({
// 應用類型標識。它和使用場景標識(scene字段)一起決定了無痕驗證的業務場景與后端對應使用的策略模型。您可以在阿里云驗證碼控制臺的配置管理頁簽找到對應的appkey字段值,請務必正確填寫。
appkey: "CF_APP_1",
//使用場景標識。它和應用類型標識(appkey字段)一起決定了無痕驗證的業務場景與后端對應使用的策略模型。您可以在阿里云驗證碼控制臺的配置管理頁簽找到對應的scene值,請務必正確填寫。
scene: "nvc_register",
// 二次驗證獲取人機信息串,跟隨業務請求一起上傳至業務服務器,由業務服務器進行驗簽。
success: function (data) {
window.console && console.log(data)
},
// 前端二次驗證失敗時觸發該回調參數
fail: function (failCode) {
window.console && console.log(failCode)
},
// 前端二次驗證加載異常時觸發該回調參數。
error: function (errorCode) {
window.console && console.log(errorCode)
}
});
// 綁定事件
btn.onclick = onclick;
});
// 發送業務請求:點擊按鈕時觸發,主動獲取人機信息串,并發送給業務服務端
function onclick() {
window.nvc.getNVCValAsync(function (nvcVal) {
var s = document.createElement('script');
// 獲取人機信息串
// 將以下getNVCVal()函數的值,跟隨業務請求一起上傳,由后端請求AnalyzeNvc接口并返回200,400,600或者800。
// 正式上線前務必將該服務端接口,更改為您自己的業務服務端接口
s.src = 'https://cf.aliyun.com/nvc/nvcAnalyze.jsonp?callback=yourRegisterRequest&a=' + nvcVal;
document.body.append(s);
});
}
// 處理業務返回結果:人機信息串上傳接口的回調函數,通過業務服務端的返回結果,控制無痕驗證的不同狀態。
function yourRegisterRequest(json) {
// 業務服務器請求回調控制是否需要二次驗證
if (json.result.code === 100 || json.result.code === 200) {
// 無痕驗證通過
alert("register success!")
} else if (json.result.code === 800 || json.result.code === 900) {
// 無痕驗證失敗,直接攔截
alert("register failed!")
} else if (json.result.code === 400) {
// 無痕驗證失敗,觸發二次驗證
// 二次驗證碼(滑動驗證碼)配置項設置,詳情請見滑動驗證集成方式文檔
// 二次驗證的appkey,scene,test值及success,fail,error的回調由nvc初始化時決定,請不要在二次驗證時傳入
var ncoption = {
// 聲明滑動驗證需要渲染的目標ID。
renderTo: "nc",
}
// 喚醒二次驗證(滑動驗證碼)
window.nvc.getNC(ncoption);
}
}
</script>
</body>
</html>
初始化
資源引入
在Web頁面中使用無痕驗證功能,需要在前端頁面代碼中添加以下代碼,引入所需的JS資源。
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
。初始化代碼說明
AWSC.use("nvc", function (state, module) { var nvcOption = {} // nvc初始化參數對象 // 初始化 調用module.init進行初始化 window.nvc = module.init(nvcOption); });
說明初始化
module.init
完成后,會返回一個實例化的nvc對象。示例代碼中該實例化的nvc對象存在window.nvc
變量中。初始化參數說明
在前端代碼實例化驗證組件時提供了以下初始化參數,您可以根據業務需要在代碼中調整這些參數。??
參數
含義
是否必填
appkey
應用類型標識。它和使用場景標識(scene字段)一起決定了無痕驗證的業務場景與后端對應使用的策略模型。您可以在阿里云驗證碼控制臺的配置管理頁簽找到對應的appkey字段值,請務必正確填寫。
是
scene
使用場景標識。它和應用類型標識(appkey字段)一起決定了無痕驗證的業務場景與后端對應使用的策略模型。您可以在阿里云驗證碼控制臺的配置管理頁簽找到對應的scene值,請務必正確填寫。
是
test
測試字段,用于測試驗證碼的不同狀態。
否
success
二次驗證成功后獲取人機信息串
否
fail
二次驗證失敗時觸發該回調參數
否
error
二次驗證出現錯誤時觸發該回調參數
否
發起業務請求
在無痕驗證初始化完成后,需要您主動調用nvc對象的getNVCVal方法獲取人機信息串,并將其隨業務請求一起傳遞至您的業務服務端,并參見服務端代碼集成文檔中的說明發起“業務服務端->風控服務端”的風險查詢請求。
function onclick() {
// 觸發綁定事件后,主動調用getNVCVal方法
window.nvc.getNVCValAsync(function (nvcVal) {
var s = document.createElement('script');
// 將以下getNVCVal()函數的值,跟隨業務請求一起上傳,由后端請求AnalyzeNvc接口并返回200,400,600或者800。
// 正式上線前務必將該服務端接口,更改為您自己的業務服務端接口
s.src = 'https://cf.aliyun.com/nvc/nvcAnalyze.jsonp?callback=yourRegisterRequest&a=' + nvcVal;
document.body.append(s);
});
}
務必將上述示例中維護的默認接口https://cf.aliyun.com/nvc/nvcAnalyze.jsonp
替換為您自己的業務請求接口(默認接口為線上Demo測試接口,不具備任何實際攻防能力)。
處理業務返回結果
在獲取到風險查詢返回結果后,您可以直接返回給客戶端,客戶端根據風險等級選擇放行、攔截或調用nvc對象的getNC方法在指定div上喚醒二次驗證。如果您的業務服務端自身具有風控策略(例如,黑、白名單),您也可以將您自身業務中的風控策略與阿里云驗證碼接口二者得到的結果進行綜合,最終決定客戶端的風險處置方式。
function yourRegisterRequest(json) {
// 根據業務服務器返回,控制無痕驗證放行,攔截,觸發二次驗證
if (json.result.code === 100 || json.result.code === 200) {
// 無痕驗證通過
alert("register success!")
} else if (json.result.code === 800 || json.result.code === 900) {
// 無痕驗證失敗,直接攔截
alert("register failed!")
} else if (json.result.code === 400) {
// 無痕驗證失敗,觸發二次驗證
var ncoption = {} // ncoption為二次驗證初始化參數對象,詳情請參考滑動驗證初始化參數
// 喚醒二次驗證(滑動驗證碼)
window.nvc.getNC(ncoption);
}
}
二次驗證的初始化參數詳情參考滑動驗證碼初始化參數列表,且二次驗證初始化參數中的appkey,scene,test值及success,fail,error等回調由nvc初始化時決定,請不要在二次驗證中傳入。
測試
在將前端接入代碼集成至Web頁面后,建議您在正式上線前通過以下方法進行測試。
通過設定初始化參數test的值復現無痕驗證的各個狀態工作機制
您可以通過將test字段值設置為無痕驗證服務提供的不同內容,來測無痕試驗證各個狀態的效果。通過配置前端頁面初始化代碼中的test字段來直接控制無痕驗證服務接口的返回結果(通過、攔截)。例如,當您使用代碼示例中提供的
http://cf.aliyun.com/nvc/nvcAnalyze.jsonp
服務端接口進行測試時,test字段值與無痕驗證服務接口返回的結果關系如下表所示:test字段值
模擬效果
module.TEST_PASS
無痕驗證通過
module.TEST_BLOCK
無痕驗證未通過,直接攔截
module.TEST_NC_PASS
喚醒滑動驗證,且滑動驗證通過
module.TEST_NC_BLOCK
喚醒滑動驗證,且滑動驗證不通過
通過這樣的方式,您可以直觀地觀察驗證碼各個狀態的交互、樣式和流程。
說明前綴
module
為AWSC.use
返回的對象,示例代碼中命名為module
。在正式上線前務必刪除集成代碼中的test配置項,避免出現不必要的安全問題。新版集成代碼中token是自動生成的,無需用戶自行指定token。如果您在正式上線或進行完整的功能性測試時未提前刪除test配置項,會導致token異常,從而可能導致集成操作中某個環節出現異常,例如:驗簽失敗等。
測試代碼示例:
AWSC.use("nvc", function (state, module) { window.nvc = module.init({ ... ... // 該配置項為測試項 在僅用來測試驗證碼不同狀態時使用。上線時請將其刪除. 無痕驗證test配置項有4種不同的值對應不同的驗證碼狀態,具體請參考文中參數定義說明部分。 test: module.TEST_PASS, // 測試無痕驗證通過 // test: module.NVC.TEST_BLOCK, // 測試無痕驗證失敗 // test: module.TEST_NC_PASS, // 喚醒二次驗證(滑動驗證),且二次驗證通過 // test: module.TEST_NC_BLOCK, // 喚醒二次驗證(滑動驗證),且二次驗證失敗 ... ... }); });
進行功能性測試和兼容性測試。
在正式上線前,建議您執行完整的功能性測試和兼容性測試。在測試過程中,請注意:
務必在前端代碼中將代碼示例提供的
http://cf.aliyun.com/nvc/nvcAnalyze.jsonp
服務端接口替換為您自己的業務接口,并按照無痕驗證服務端代碼集成在服務端接入阿里云驗證碼。確保測試過程中,使用阿里云驗證碼控制臺中為您分配的appkey和scene值進行測試。
對于Internet Explorer瀏覽器,驗證組件最低支持至Internet Explorer 9,Internet Explorer 8及以下不支持。
新版集成代碼中token是自動生成的,無需用戶自行指定token。如果您在正式上線或進行完整的功能性測試時未提前刪除test配置項,會導致token異常,從而可能導致集成操作中某個環節出現異常,例如:驗簽失敗等。