Java快速完成登录页⾯的滑动验证和短信验证码（直接复制粘贴版）
PC版滑动验证的实现
简介
滑动验证是基于⼈机识别技术开发的智能验证码产品。⽤户通过简单的右滑交互，⽆需思考即可通过验证。
资源引⼊说明
使⽤PC版滑动验证码，需要引⼊以下js资源，为保证服务功能最优，官⽅会定期迭代升级线上js资源，因此请避免使⽤本地⽂件导⼊js资源，以免后端版本更新⽽前端资源未更新造成冲突：
<!-- 国内使⽤ -->
<script type="text/javascript" charset="utf-8" src="//g.alicdn/sd/ncpc/nc.js?t=2015052012"></script>
<!-- 若您的主要⽤户来源于海外，请替换使⽤下⾯的js资源 -->
<!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn/sd/ncpc/nc.js?t=2015052012"></script> -->
其中，t字段建议设置为⼩时级别时间戳，随时间更新，确保js不会被浏览器长时间缓存，这样能够享受到官⽅针对js的动态发布迭代。
完整接⼊demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 国内使⽤ -->
<script type="text/javascript" charset="utf-8" src="//g.alicdn/sd/ncpc/nc.js?t=2015052012"></script>
<!-- 若您的主要⽤户来源于海外，请替换使⽤下⾯的js资源 -->
<!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn/sd/ncpc/nc.js?t=2015052012"></script> -->
</head>
<body>
<div id="your-dom-id" class="nc-container"></div> <!--No-Captcha渲染的位置，其中 class 中必须包
含 nc-container-->
<script type="text/javascript">
var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
var NC_Opt =
{
renderTo: "#your-dom-id",
appkey: "CF_APP_1",
scene: "register",
token: nc_token,
customWidth: 300,
trans:{"key1":"code0"},
elementID: ["usernameID"],
is_Opt: 0,
language: "cn",
isEnabled: true,
timeout: 3000,
times:5,
apimap: {
// 'analyze': '//a/nocaptcha/analyze.jsonp',
// 'get_captcha': '//b/get_captcha/ver3',
// 'get_captcha': '//pin3.aliyun/get_captcha/ver3'
// 'get_img': '//c/get_img',
/
/ 'checkcode': '//d/captcha/checkcode.jsonp',
// 'umid_Url': '//e/security/umscript/3.2.1/um.js',
// 'uab_Url': '//aeu.alicdn/js/uac/909.js',
// 'umid_serUrl': 'g/service/um.json'
},
callback: function (data) {
}
}
var nc = new noCaptcha(NC_Opt)
nc.upLang('cn', {
_startTEXT: "请按住滑块，拖动到最右边",
_yesTEXT: "验证通过",
_error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来⼀次",
_errorNetwork: "⽹络不给⼒，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
})
</script>
</body>
</html>
参数详细说明
参数含义是否必填renderTo声明滑动验证需要渲染的⽬标元素ID是appkey应⽤标⽰。它和scene字段⼀起决定了滑动验证的业务场景与后端对应使⽤的策略模型。您可以从console的配置⾥到它正确的值，请勿乱写是
scene场景标⽰。它和appkey字段⼀起决定了滑动验证的业务场景与后端对应使⽤的策略模型。您可以从console的配置⾥到它正确的值，请勿乱写是
token滑动验证码的主键，请务必不需要写死固定值。请确保每个⽤户每次打开页⾯时，token都是不同的。建议格式为”您的appkey”+”时间戳”+”随机数”是customWidth滑动条的长度，建议预留300像素以上否
trans业务键字段。您可以不写此字段，也可以按照下⽂中”问题排查与错误码”部分⽂档配置此字段，便于线上问题排查否elementID通过Dom的ID属性⾃动填写trans业务键，您可以不写此字段，也可以按照下⽂中”问题排查与错误码”部分⽂档配置此字段，便于线上问题排查否
is_Opt是否⾃⼰配置底层采集组件。如⽆特殊场景请保持写0或不写此项。默认为0否isEnabled是否启⽤，⽆特殊场景请默认写true。默认为true否timeout内部⽹络请求的超时时间，⼀般不需要改，默认值为3000ms否
times允许服务器超时重复次数，默认5次否apimap⽤于⾃⼰指定滑动验证各项请求的接⼝地址。如⽆特殊情况，请不要配置这⾥的apimap否callback前端滑动验证通过时会触发此回调，您可以在这个回调中将token、sessionid、sig记录下来，随业务请求带到您的server端调⽤验签是
⽅法详细说明
noCaptcha对象中维护了⼀些⽅法提供给您使⽤，您可以通过诸如var nc = new noCaptcha(NC_Opt); nc.functionName(parm)；的⽅式来调⽤使⽤它们。
⽅法名参数作⽤
reload⽆任何时候调⽤此⽅法，可以将滑动验证重置为初始状态(等待滑动)
hide⽆任何时候调⽤此⽅法，可以隐藏滑动验证组件
show⽆在调⽤hide⽅法后，任何时候调⽤此⽅法，可以展⽰滑动验证组件
getToken⽆任何时候调⽤此⽅法，可以获取当前滑动验证实例的token
setTrans Object可以设置滑动验证的业务键，⽅便问题排查定位。详见”问题排查与错误码说明”部分
upLang String,Object⽤于配置NC⾃定义⽂案，详见”⾃定义⽂案与多语⾔”部分
destroy⽆销毁当前滑动验证实例
测试指南
(1) CF_APP_1复现验证码各个状态机
CF_APP_1这个appkey是验证码服务专门为⽤户测试验证码各个状态所维护的appkey。启⽤这个appkey后，您可以通过配置前端trans字段来直接控制验证码服务接⼝的返回（通过or拦截），借此您可以直观的看到验证码各个状态的交互、样式和流程。正式上线时请务必将其替换为阿⾥云控制台上为您分配的appkey和scene，以免出现不必要的安全问题。
CF_APP_1下trans字段与验证码结果对应关系如下：
trans效果
{“key1”:”code0”}滑动⼀定会通过
{“key1”:”code300”}滑动⼀定会被拦截
(2) 正式上线测试
正式上线之前，推荐您执⾏完整的功能性和兼容性测试。测试过程中有以下⼏点注意事项：
请确保您使⽤阿⾥云控制台上分配的appkey和scene进⾏测试，不要胡乱填写
请注意您当前验证码的使⽤场景。如果您的验证码在PCweb场景下使⽤，请不要⽤⼿机等移动设备进⾏测试
在测试低版本IE浏览器时，不要⽤IE11浏览器的兼容模式去模拟⽣成低版本浏览器。请⽤真正低版本IE浏览器进⾏测试
⾃定义样式：HTML结构与CSS定制说明
(1) HTML结构图⽰
滑动验证PCweb环境下的Dom结构如下图所⽰
(2) 颜⾊、图标⾃定义
您可以通过⾃定义CSS的⽅式来覆盖滑动验证各个UI组件的颜⾊、资源等，注意⾃定义样式需出现在
滑动验证⾃带样式的后⽅，必要时可添加 !important
.nc_scale {
background: #e8e8e8; /* 默认背景⾊ */
}
.nc_scale .scale_text {
color: #9c9c9c; /* 默认字体颜⾊ */
}
.nc__bg {
background: #7ac23c; /* 滑过时的背景⾊ */
}
.nc_scale .scale_text2 {
color: #fff; /* 滑过时的字体颜⾊ */
}
.nc_scale span {
border: 1px solid #ccc;
background: #fff url("//g.alicdn/sd/ncpc/images/rt.png") no-repeat center;
}
.nc_scale .btnok {
background: #fff url("//g.alicdn/sd/ncpc/images/yes.png") no-repeat center;
}
.errloading {
border: #faf1d5 1px solid;
background: url("//g.alicdn/sd/ncpc/images/no.png") #fffff0 no-repeat 10px 9px;
color: #ef9f06;
}
⾃定义⽂案与多语⾔
(1) 多语⾔
滑动验证默认⽀持18国语⾔，您可以通过滑动验证配置项中的language字段来进⾏选择（默认为cn，中⽂）
ar_SA：阿拉伯⽂
de_DE：德⽂
es_ES：西班⽛⽂
fr_FR：法⽂
in_ID：印尼语
it_IT：意⼤利⽂
iw_HE：希伯来语
ja_JP:⽇⽂
ko_KR：韓⽂
nl_NL：荷蘭⽂
pt_BR：波蘭⽂
ru_RU：俄⽂
th_TH：泰⽂
tr_TR:⼟⽿其⽂
vi_VN：越南⽂
cn：简体中⽂
tw：繁体中⽂
en：英⽂
(2) ⾃定义⽂案
您可以通过滑动验证对象维护的upLang⽅法来⾃定义您需要的⽂案。内置的语⾔有简体中⽂、繁体中⽂、英⽂（cn、tw、en）三种，可以选择其中⼀种进⾏更新，也可传⼊⼀个新名字以建⽴新语⾔。如果您调⽤upLang⽅法后，⾃定义⽂案没有⽣效，请在其之后调⽤reload()⽅法，让滑动验证重新渲染即可。
/**
* @param name {string} 语⾔名，可选 cn、tw、en ，也可添加⾃定义语⾔
* @param detail {object} 语⾔详情，key/value 格式
*/
nc.upLang('cn', {
_startTEXT: "请按住滑块，拖动到最右边",
_yesTEXT: "验证通过",
_error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来⼀次",
_errorNetwork: "⽹络不给⼒，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
})
问题排查与错误码说明
(1) 上传业务键
滑动验证默认不会采集您当前业务场景下的⽤户名、⼿机号等业务键，为了⽅便问题排查，这⾥强烈建议您配置上传业务主键，这样遇到问题的客户可以提供”业务键+时间”，很⽅便的关联到对应滑动验证的请求。否则您必须提供引导⽤户进⾏抓包才能具体对应查到⽇志和请求。
您有两种⽅法可以上传业务键：
a. 您可以在⽤户操作滑块前的任何时刻调⽤滑动验证维护的setTrans⽅法上传。⽐如您可以在⽤户填
写完⽤户名（从⽤户名输⼊框失焦）时调⽤nc.setTrans({‘userName’:⽤户名输⼊框value})来上传⽤户名；也可以在页⾯加载完毕的时候调⽤nc.setTrans({‘业务会话标⽰’：业务会话session的值})来上传您业务上唯⼀的会话标⽰。
b. 您也可以配置elementID来让滑动验证主动采集。elementID的值为⼀个stringList，配置之后在滑动结束的时刻，滑块会以elementID当中的每⼀个string作为ID，去获取对应dom的value值并上传。举个例⼦，如果您配置elementID:[“usernameID”]，则滑动结束时ElementById(“usernameID”).value会⾃动被上传⾄滑动验证服务端。
(2) 错误码
滑动验证发⽣异常的情况下，在错误信息后会附带错误码，如下图：
其中错误码含义如下：
错误码含义
00analyze请求超时
01uab.js加载超时
错误码含义
02um.js加载超时
04设备指纹代码加载异常
08waitForUmx超出重试次数
H5版滑动验证的实现
简介
滑动验证是服役于阿⾥巴巴⼈机识别第⼀线的验证码产品。⽤户通过简单的右滑交互，⽆需思考即可通过验证。
资源引⼊说明
使⽤H5版滑动验证码，需要引⼊以下js资源：
<!-- 国内使⽤ -->
<script type="text/javascript" charset="utf-8" src="//g.alicdn/sd/nch5/index.js?t=2015052012"></script>
<!-- 若您的主要⽤户来源于海外，请替换使⽤下⾯的js资源 -->
<!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn/sd/nch5/index.js?t=2015052012"></script> -->
其中，t字段建议设置为⼩时级别时间戳，随时间更新，确保js不会被浏览器长时间缓存，这样能够享受到针对js的动态发布迭代。完整接⼊demo
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!-- 国内使⽤ -->
<script type="text/javascript" charset="utf-8" src="//g.alicdn/sd/nch5/index.js?t=2015052012"></script>
手机上可以打html与css的app<!-- 若您的主要⽤户来源于海外，请替换使⽤下⾯的js资源 -->
<!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn/sd/nch5/index.js?t=2015052012"></script> -->
</head>
<body>
<div id="__nc" >
<div id="nc"></div>
</div>
<script>
var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
var nc=NoCaptcha.init({
renderTo: '#nc',
appkey: 'CF_APP_1',
scene: 'register',
token: nc_token,
trans: {"key1": "code200"},
elementID: ["usernameID"],
is_Opt: 0,
language: "cn",
timeout: 10000,
retryTimes: 5,
errorTimes: 5,
inline:false,
apimap: {
// 'analyze': '//a/nocaptcha/analyze.jsonp',
// 'uab_Url': '//aeu.alicdn/js/uac/909.js',
},
bannerHidden:false,
initHidden:false,
callback: function (data) {
},
error: function (s) {
}
});
NoCaptcha.setEnabled(true);
NoCaptcha.upLang('cn', {
'LOADING':"加载中...",//加载
'SLIDER_LABEL': "请向右滑动验证",//等待滑动
'CHECK_Y':"验证通过",//通过
'ERROR_TITLE':"⾮常抱歉，这出错了...",//拦截
'CHECK_N':"验证未通过", //准备唤醒⼆次验证
'OVERLAY_INFORM':"经检测你当前操作环境存在风险，请输⼊验证码",//⼆次验证
'TIPS_TITLE':"验证码错误，请重新输⼊"//验证码输错时的提⽰
});
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。