阿里云无痕验证前端代码:
第一步创建一个 无痕验证返回400状态,需要二次验证滑动条的div:
<!-- 验证 -->
<div id="_nc" style="margin-left:auto;margin-right:auto;width: 91%;height: 48px;padding-top: 24px; display: none">
<div id="nc"></div> //这里的div的id 最好使用 nc 防止出现不必要错误
</div>
第二步添加按钮触发事件:
// 自定义 id="register"
<div class="form-submit-buttom" id="register" style="margin-top: 15px;" lay-submit="">
登录
</div>
第三步点击按钮后出发事件:
var btn = document.getElementById("register");
// 实例化nvc 对无痕验证进行初始化操作
AWSC.use("nvc", function (state, module) {
// 初始化 调用module.init进行初始化
window.nvc = module.init({
// 应用类型标识。它和使用场景标识(scene字段)一起决定了无痕验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
appkey: "FFFF0N0000000000B4E7", /* 请勿修改,修改后端会不通过*/
//使用场景标识。它和应用类型标识(appkey字段)一起决定了无痕验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值,请务必正确填写。
scene: "nvc_login", /* 请勿修改,修改后端会不通过*/
// 二次验证获取人机信息串,跟随业务请求一起上传至业务服务器,由业务服务器进行验签。
success: function (data) {
console.log(data)
},
// 前端二次验证失败时触发该回调参数
fail: function (failCode) {
console.log(failCode)
},
// 前端二次验证加载异常时触发该回调参数。
error: function (errorCode) {
console.log(errorCode)
}
});
// 绑定事件
btn.onclick = onclick;
});
// 发送业务请求:点击按钮时触发,主动获取人机信息串,并发送给业务服务端
function onclick() {
window.nvc.getNVCValAsync(function (nvcVal) {
verificationData(nvcVal, 'nvc');
});
}
//这里是自己业务的逻辑代码
// (
// username : 登录用户账号
// password : 用户密码
// data: 前端获取的阿里云无痕验证的人机码,做参数传给后端验证
//)
function verificationData(data, type) {
var username = $('#username').val();
var password = $('#password').val();
var verifyCode = data; //$('#verifyCode').val();
$.ajax({
url: "Login/Login",
data: { username: username, password: password, verifyCode: verifyCode },
type: "Post",
dataType: "json",
success: function (result) {
if (result.Success) {
window.location.href = result.Data; //业务接口返回状态是 true: 跳转到系统
}
else {
//阿里云后端验证返回的状态码
if ( result.Message == "100" || result.Message == "200"
|| result.Message == "400"
|| result.Message == "800" || result.Message == "900") {
//调用 人机信息串上传接口的回调函数
yourRegisterRequest(result);
//阿里云无痕验证返回状态,显示成中文输出
if (result.Message == "100" || result.Message == "200") {
result.Message = "验证通过!";
}
else if (result.Message == "800" || result.Message == "900") {
result.Message = "当前登录存在风险,禁止访问登录!";
}
else {
result.Message = "存在风险,请拖动滑条至最右侧!";
}
}
//业务中,登录失败,有业务需要跳转到错误页
if (result.Message.indexOf('url@@') == 0) {
var url = result.Message.replace('url@@', '');
window.location.href = url;
}
//提示 错误信息
else {
$('#boldError').text(result.Message);
}
}
}
});
}
// 处理业务返回结果:人机信息串上传接口的回调函数,通过业务服务端的返回结果,控制无痕验证的不同状态。
function yourRegisterRequest(result) {
console.log(result);
// 业务服务器请求回调控制是否需要二次验证
if (result.Message == "100" || result.code == "200") {
// 无痕验证通过
/* alert("register success!")*/
}
else if (result.Message == "800" || result.code == "900") {
// 无痕验证失败,直接拦截
/* alert("register failed!")*/
}
else if (result.Message == "400") {
// 无痕验证失败,触发二次验证
// 二次验证码(滑动验证码)配置项设置,详情请见滑动验证集成方式文档
// 二次验证的appkey,scene,test值及success,fail,error的回调由nvc初始化时决定,请不要在二次验证时传入
// 二次验证
$("#_nc").show();
var ncoption = {
// 声明滑动验证需要渲染的目标ID。
renderTo: "nc",
}
// 唤醒二次验证(滑动验证码)
window.nvc.getNC(ncoption);
}
}
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Security.Cryptography;
using System.Text;
using System.Threading.Tasks;
using Aliyun.Acs.afs.Model.V20180112;
using Aliyun.Acs.Core;
using Aliyun.Acs.Core.Profile;
using Aliyun.OSS;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using Newtonsoft.Json;
//后端验证
namespace BMOA.Common.ALiYunCode
{
/// <summary>
/// 用于Web端的拦截
/// </summary>
public static class AnalyzeNvc
{
// 请填写您的regionid。
public static string regionid = "cn-hangzhou"; //默认值,不需要修改
// 请填写您的AccessKeyId。
public static string accessKeyId = "";
// 请填写您的AccessKeySecret。
public static string accessKeySecret = "";
public static IAcsClient acsClient;
static AnalyzeNvc()
{
IClientProfile profile = DefaultProfile.GetProfile(regionid, accessKeyId, accessKeySecret);
acsClient = new DefaultAcsClient(profile);
}
/// <summary>
/// 无痕验证方法
/// </summary>
/// <param name="data">data由前端传的Data值</param>
/// <returns></returns>
public static string Nontrace(string data)
{
#region 无痕验证
DefaultProfile.AddEndpoint(regionid, regionid, "afs", "afs.aliyuncs.com");
AnalyzeNvcRequest analyze = new AnalyzeNvcRequest
{
//必填参数,由前端获取getNVCVal方法获得的值。
//通过setScoreJsonStr方法声明"服务端调用阿里云验证码接口得到的返回结果"与"前端执行操作"间的映射关系,并通知验证码服务端进行二次验证授权。
//注意:前端页面必须严格按照该映射关系执行相应操作,否则将导致调用异常。
//例如,在setScoreJsonStr方法中声明"400":"NC",则当服务端返回400时,您的前端必须唤醒滑动验证(SC),如果唤醒其他验证,则将导致失败。
Data = data,
//("{\"200\":\"PASS\",\"400\":\"NC\",\"800\":\"BLOCK\"}");//根据业务需求设置各返回结果对应的客户端处置方式。
ScoreJsonStr = "{\"100\":\"PASS\",\"200\":\"PASS\",\"400\":\"NC\",\"800\":\"BLOCK\",\"900\":\"BLOCK\"}"
};
AnalyzeNvcResponse response = acsClient.GetAcsResponse(analyze);
return response.BizCode;
#endregion
}
}
}
//业务接口调用阿里云后端验证接口,判断返回状态 未通过验证,返回给前端 验证状态 前端判断是否启用二次验证
var aliyunCodeCheck = AnalyzeNvc.Nontrace(verifyCode);
//返回100或 200 就是通过 直接执行业务内代码
//返回400 启用前端二次验证
//返回 800 或 900 直接拦截
if (aliyunCodeCheck != "200" && aliyunCodeCheck != "100")
{
result.Success = false;
result.Message = aliyunCodeCheck;
return result;
}