devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

网页版滑动验证码+短信验证码（史上最全版）_哎呀,出错了,点击刷新再来一次

作者：很楠不爱3 | 2024-02-26 01:58:30

赞

踩

哎呀,出错了,点击刷新再来一次

PC版滑动验证的实现

简介

滑动验证是基于人机识别技术开发的智能验证码产品。用户通过简单的右滑交互，无需思考即可通过验证。

资源引入说明

使用PC版滑动验证码，需要引入以下js资源，为保证服务功能最优，官方会定期迭代升级线上js资源，因此请避免使用本地文件导入js资源，以免后端版本更新而前端资源未更新造成冲突：

  1. <!-- 国内使用 -->
  2. <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
  3. <!-- 若您的主要用户来源于海外，请替换使用下面的js资源 -->
  4. <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script> -->

其中，t字段建议设置为小时级别时间戳，随时间更新，确保js不会被浏览器长时间缓存，这样能够享受到官方针对js的动态发布迭代。

完整接入demo

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <!-- 国内使用 -->
  6.         <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
  7.          <!-- 若您的主要用户来源于海外，请替换使用下面的js资源 -->
  8.         <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script> -->
  9.     </head>
  10.     <body>
  11.         <div id="your-dom-id" class="nc-container"></div> <!--No-Captcha渲染的位置，其中 class 中必须包含 nc-container-->
  12.         <script type="text/javascript">
  13.         var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
  14.         var NC_Opt = 
  15.         {
  16.             renderTo: "#your-dom-id",
  17.             appkey: "CF_APP_1",
  18.             scene: "register",
  19.             token: nc_token,
  20.             customWidth: 300,
  21.             trans:{"key1":"code0"},
  22.             elementID: ["usernameID"],
  23.             is_Opt: 0,
  24.             language: "cn",
  25.             isEnabled: true,
  26.             timeout: 3000,
  27.             times:5,
  28.             apimap: {
  29.                 // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
  30.                 // 'get_captcha': '//b.com/get_captcha/ver3',
  31.                 // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
  32.                 // 'get_img': '//c.com/get_img',
  33.                 // 'checkcode': '//d.com/captcha/checkcode.jsonp',
  34.                 // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
  35.                 // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
  36.                 // 'umid_serUrl': 'https://g.com/service/um.json'
  37.             },   
  38.             callback: function (data) { 
  39.                 window.console && console.log(nc_token)
  40.                 window.console && console.log(data.csessionid)
  41.                 window.console && console.log(data.sig)
  42.             }
  43.         }
  44.         var nc = new noCaptcha(NC_Opt)
  45.         nc.upLang('cn', {
  46.             _startTEXT: "请按住滑块，拖动到最右边",
  47.             _yesTEXT: "验证通过",
  48.             _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
  49.             _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
  50.         })
  51.         </script>
  52.     </body>
  53. </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
setTransObject可以设置滑动验证的业务键，方便问题排查定位。详见”问题排查与错误码说明”部分
upLangString,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结构如下图所示滑动验证1滑动验证2

(2) 颜色、图标自定义

您可以通过自定义CSS的方式来覆盖滑动验证各个UI组件的颜色、资源等，注意自定义样式需出现在滑动验证自带样式的后方，必要时可添加 !important滑动验证3

  1. .nc_scale {
  2.     background: #e8e8e8; /* 默认背景色 */
  3. }
  4. .nc_scale .scale_text {
  5.     color: #9c9c9c; /* 默认字体颜色 */
  6. }
  7. .nc_scale div.nc_bg {
  8.     background: #7ac23c; /* 滑过时的背景色 */
  9. }
  10. .nc_scale .scale_text2 {
  11.     color: #fff; /* 滑过时的字体颜色 */
  12. }
  13. .nc_scale span {
  14.     border: 1px solid #ccc;
  15.     background: #fff url("//g.alicdn.com/sd/ncpc/images/rt.png") no-repeat center;
  16. }
  17. .nc_scale .btnok {
  18.     background: #fff url("//g.alicdn.com/sd/ncpc/images/yes.png") no-repeat center;
  19. }
  20. .errloading {
  21.     border: #faf1d5 1px solid;
  22.     background: url("//g.alicdn.com/sd/ncpc/images/no.png") #fffff0 no-repeat 10px 9px;
  23.     color: #ef9f06;
  24. }

自定义文案与多语言

(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()方法，让滑动验证重新渲染即可。

  1. /**
  2.  * @param name {string} 语言名，可选 cn、tw、en ，也可添加自定义语言
  3.  * @param detail {object} 语言详情，key/value 格式
  4.  */
  5. nc.upLang('cn', {
  6.     _startTEXT: "请按住滑块，拖动到最右边",
  7.     _yesTEXT: "验证通过",
  8.     _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
  9.     _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
  10. })

问题排查与错误码说明

(1) 上传业务键

滑动验证默认不会采集您当前业务场景下的用户名、手机号等业务键，为了方便问题排查，这里强烈建议您配置上传业务主键，这样遇到问题的客户可以提供”业务键+时间”，很方便的关联到对应滑动验证的请求。否则您必须提供引导用户进行抓包才能具体对应查到日志和请求。
您有两种方法可以上传业务键：
a. 您可以在用户操作滑块前的任何时刻调用滑动验证维护的setTrans方法上传。比如您可以在用户填写完用户名（从用户名输入框失焦）时调用nc.setTrans({‘userName’:用户名输入框value})来上传用户名；也可以在页面加载完毕的时候调用nc.setTrans({‘业务会话标示’:业务会话session的值})来上传您业务上唯一的会话标示。
b. 您也可以配置elementID来让滑动验证主动采集。elementID的值为一个stringList，配置之后在滑动结束的时刻，滑块会以elementID当中的每一个string作为ID，去获取对应dom的value值并上传。举个例子，如果您配置elementID:[“usernameID”]，则滑动结束时document.getElementById(“usernameID”).value会自动被上传至滑动验证服务端。

(2) 错误码

滑动验证发生异常的情况下，在错误信息后会附带错误码，如下图：

滑动验证4

其中错误码含义如下：

错误码含义
00analyze请求超时
01uab.js加载超时
02um.js加载超时
04设备指纹代码加载异常
08

waitForUmx超出重试次数 

 

 

 

 

 

 

 

H5版滑动验证的实现

简介

滑动验证是服役于阿里巴巴人机识别第一线的验证码产品。用户通过简单的右滑交互，无需思考即可通过验证。滑动验证

资源引入说明

使用H5版滑动验证码，需要引入以下js资源：

  1. <!-- 国内使用 -->
  2. <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
  3. <!-- 若您的主要用户来源于海外，请替换使用下面的js资源 -->
  4. <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/nch5/index.js?t=2015052012"></script> -->

其中，t字段建议设置为小时级别时间戳，随时间更新，确保js不会被浏览器长时间缓存，这样能够享受到针对js的动态发布迭代。

完整接入demo

  1. <html>
  2. <head>
  3. <meta charset="utf-8"/>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  5. <!-- 国内使用 -->
  6. <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
  7. <!-- 若您的主要用户来源于海外，请替换使用下面的js资源 -->
  8. <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/nch5/index.js?t=2015052012"></script> -->
  9. </head>
  10. <body>
  11. <div id="__nc" style="margin-left:auto;margin-right:auto;width:80%;height:100px;padding-top:100px;">
  12. <div id="nc"></div>
  13. </div>
  14.  
  15. <script>
  16. var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
  17. var nc=NoCaptcha.init({
  18. renderTo: '#nc',
  19. appkey: 'CF_APP_1',
  20. scene: 'register',
  21. token: nc_token,
  22. trans: {"key1": "code200"},
  23. elementID: ["usernameID"],
  24. is_Opt: 0,
  25. language: "cn",
  26. timeout: 10000,
  27. retryTimes: 5,
  28. errorTimes: 5,
  29. inline:false,
  30. apimap: {
  31. // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
  32. // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
  33. },
  34. bannerHidden:false,
  35. initHidden:false,
  36. callback: function (data) {
  37. window.console && console.log(nc_token)
  38. window.console && console.log(data.csessionid)
  39. window.console && console.log(data.sig)
  40. },
  41. error: function (s) {
  42. }
  43. });
  44. NoCaptcha.setEnabled(true);
  45. nc.reset();//请务必确保这里调用一次reset()方法
  46.  
  47. NoCaptcha.upLang('cn', {
  48. 'LOADING':"加载中...",//加载
  49. 'SLIDER_LABEL': "请向右滑动验证",//等待滑动
  50. 'CHECK_Y':"验证通过",//通过
  51. 'ERROR_TITLE':"非常抱歉，这出错了...",//拦截
  52. 'CHECK_N':"验证未通过", //准备唤醒二次验证
  53. 'OVERLAY_INFORM':"经检测你当前操作环境存在风险，请输入验证码",//二次验证
  54. 'TIPS_TITLE':"验证码错误，请重新输入"//验证码输错时的提示
  55. });
  56. </script>
  57. </body>
  58. </html>

参数详细说明

参数含义是否必填项
renderTo声明滑动验证需要渲染的目标元素ID是
appkey应用标示。它和scene字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值，请勿乱写是
scene场景标示。它和appkey字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值，请勿乱写是
token滑动验证码的主键，请务必不需要写死固定值。请确保每个用户每次打开页面时，token都是不同的。建议格式为”您的appkey”+”时间戳”+”随机数”是
trans业务键字段。您可以不写此字段，也可以按照下文中”问题排查与错误码”部分文档配置此字段，便于线上问题排查否
elementID通过Dom的ID属性自动填写trans业务键，您可以不写此字段，也可以按照下文中”问题排查与错误码”部分文档配置此字段，便于线上问题排查否
is_Opt是否自己配置底层采集组件。如无特殊场景请保持写0或不写此项。默认为0否
language语言。H5场景默认支持简中、繁中、英文，详细配置方法请见下方”自定义文案与多语言”部分。默认为cn(中文)否
timeout内部网络请求的超时时间，一般不需要改，默认值为10000ms否
retryTimes允许服务器超时重复次数，默认5次否
errorTimes弹出二次验证时，允许二次验证填错的最大次数，默认5次否
bannerHidden验证通过后，验证码组件是否自动隐藏，默认为 true否
initHidden是否默认不渲染，设置为true时，不会自动渲染，需要自行调用show方法将其渲染，默认为false否
inline弹出二次验证是否为inline方式，默认为false(浮层模式)否
apimap用于自己指定滑动验证各项请求的接口地址。如无特殊情况，请不要配置这里的apimap否
callback前端滑动验证通过时会触发此回调，您可以在这个回调中将token、sessionid、sig记录下来，随业务请求带到您的server端调用验签是

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

方法详细说明

NoCaptcha的实例化对象中维护了一些方法提供给您使用，您可以通过诸如var nc=NoCaptcha.init(NC_Opt); nc.functionName(parm);的方式来调用使用它们。

方法名参数作用
reset无任何时候调用此方法，可以将滑动验证重置为初始状态(等待滑动)
hide无任何时候调用此方法，可以隐藏滑动验证组件
show无在调用hide方法后，任何时候调用此方法，可以展示滑动验证组件
setTransObject可以设置滑动验证的业务键，方便问题排查定位。详见”问题排查与错误码说明”部分
upLangString,Object用于配置NC自定义文案，详见”自定义文案与多语言”部分
on事件名(String),回调函数(Function)为滑动验证状态设置监听

 

 

 

 

 

 

 

 

为滑动验证设置事件监听的具体方法：
var nc=NoCaptcha.init(NC_Opt); nc.on(‘事件名’, 回调函数);

事件列表：

事件名含义
beforeverify弹出验证浮层之前
afterverify弹出验证浮层之后
error系统或者网络错误
fail用户验证失败
success用户验证成功
refresh点击刷新

 

 

 

 

 

测试指南

(1) CF_APP_1复现验证码各个状态机

CF_APP_1这个appkey是验证码服务专门为用户测试验证码各个状态所维护的appkey。启用这个appkey后，您可以通过配置前端trans字段来直接控制验证码服务接口的返回（通过or二次验证or拦截），借此您可以直观的看到验证码各个状态的交互、样式和流程。正式上线时请务必将其替换为阿里云控制台上为您分配的appkey和scene，以免出现不必要的安全问题。
CF_APP_1下trans字段与验证码结果对应关系如下：

trans效果
{“key1”:”code0”}滑动一定会通过
{“key1”:”code200”}滑动一定出现二次验证
{“key1”:”code300”}滑动一定会被拦截

 

 

 

 

(2) 正式上线测试

正式上线之前，推荐您执行完整的功能性和兼容性测试。测试过程中有以下几点注意事项：

  • 请确保您使用阿里云控制台上分配的appkey和scene进行测试，不要胡乱填写
  • 请注意您当前验证码的使用场景。如果您的验证码在HTML5场景下使用，请不要用PCWeb浏览器进行测试

自定义样式：HTML结构与CSS定制说明

滑动验证Html5环境下的Dom结构如下图所示,共分为3种stage状态：stage1(初始状态)、stage2(二次验证)、stage3(拦截状态)。其中 {prefix} 为前缀，值形如 nc_1、nc_2…
滑动图1

您可以通过自定义CSS的方式来覆盖滑动验证各个UI组件的颜色、资源等，注意自定义样式需出现在滑动验证自带样式的后方，必要时可添加 !important

stage1(初始状态)：
滑动图2

  1. /* 滑动条高度、边框、背景色等 */
  2. ._nc .stage1 .slider {
  3. height: 52px;
  4. border-radius: 26px;
  5. box-shadow: 0 0 3px #999;
  6. background-color: #ddd;
  7. }
  8. /* 滑动条 */
  9. ._nc .stage1 .track div {
  10. border-radius: 26px;
  11. color: #fff;
  12. }
  13. /* 滑动条背景色-正常 */
  14. ._nc .stage1 .bg-green {
  15. background-color: #78c430;
  16. }
  17. /* 滑动条背景色-失败 */
  18. ._nc .stage1 .bg-red {
  19. background-color: #ff5500;
  20. }
  21. /* 各个状态的icon */
  22. 等待滑动："icon iconfont icon-slide-arrow"
  23. 验证出错："icon no iconfont icon-close"
  24. 验证通过："icon yes iconfont icon-ok"

stage2(二次验证)：
滑动图3

  1. .nc-h5-overlay div.info i.iconfont {
  2. color: #f00;
  3. width: 1.2em;
  4. font-size: 120%;
  5. margin-right: .3em;
  6. }
  7. /* 验证码输入框 */
  8. ._nc .stage2 .textbox .input {
  9. background: none;
  10. width: 140px;
  11. height: 40px;
  12. outline: none;
  13. font-size: 18px;
  14. color: #333;
  15. }
  16. /* 图标 */
  17. ._nc .icon {
  18. width: 32px;
  19. height: 32px;
  20. background-image: url("//g.alicdn.com/sd/nch5/icons.png?v=2");
  21. }
  22. ._nc .stage2 .icon.tip {
  23. left: 10px;
  24. background-position: -192px 0;
  25. }
  26. ._nc .stage2 .icon.clear {
  27. left: 106px;
  28. background-position: -224px 0;
  29. }
  30. ._nc .stage2 .icon.refresh {
  31. right: 11px;
  32. background-position: -256px 0;
  33. }
  34. /* 确定按钮、提示 */
  35. ._nc .stage2 .btn-ok, ._nc .stage2 .tips {
  36. width: 100%;
  37. height: 46px;
  38. border-radius: 5px;
  39. color: #fff;
  40. font-size: 20px;
  41. border: none;
  42. outline: none;
  43. background-color: #3199f4;
  44. }
  45. ._nc .stage2 .btn-ok:disabled {
  46. background-color: #ccc;
  47. }
  48. ._nc .stage2 .tips {
  49. background-color: #333;
  50. color: #fff;
  51. text-align: center;
  52. line-height: 46px;
  53. }

stage3(拦截状态)：
滑动图4

  1. ._nc .stage3 .title {
  2. font-size: 20px;
  3. color: #777;
  4. width: 100%;
  5. }
  6. /* 图标 */
  7. ._nc .icon {
  8. width: 32px;
  9. height: 32px;
  10. background-image: url("//g.alicdn.com/sd/nch5/icons.png?v=2");
  11. }
  12. ._nc .stage3 .menu.refresh .icon {
  13. background-position: -128px 0;
  14. }
  15. ._nc .stage3 .menu.feedback .icon {
  16. background-position: -160px 0;
  17. }
  18. /* 刷新链接 */
  19. ._nc .stage3 .menu.refresh {
  20. border-right: 2px solid #ccc;
  21. }

自定义文案与多语言

(1) 多语言

滑动验证默认支持简体中文、繁体中文、英文三种语言，您可以通过滑动验证配置项中的language字段来进行选择（默认为cn，简体中文）
cn:简体中文
tw:繁体中文
en:英文

(2) 自定义文案

您可以通过滑动验证对象维护的upLang方法来自定义您需要的文案。内置的语言有简体中文、繁体中文、英文（cn、tw、en）三种，可以选择其中一种进行更新，也可传入一个新名字以建立新语言。如果您调用upLang方法后，自定义文案没有生效，请在其之后调用reset()方法，让滑动验证重新渲染即可

  1. /**
  2. * @param name {string} 语言名，可选 cn、tw、en ，也可添加自定义语言
  3. * @param detail {object} 语言详情，key/value 格式
  4. */
  5. NoCaptcha.upLang('cn', {
  6. 'LOADING':"加载中...",//加载
  7. 'SLIDER_LABEL': "请向右滑动验证",//等待滑动
  8. 'CHECK_Y':"验证通过",//通过
  9. 'ERROR_TITLE':"非常抱歉，这出错了...",//拦截
  10. 'CHECK_N':"验证未通过", //准备唤醒二次验证
  11. 'OVERLAY_INFORM':"经检测你当前操作环境存在风险，请输入验证码",//二次验证
  12. 'TIPS_TITLE':"验证码错误，请重新输入"//验证码输错时的提示
  13. });

问题排查与错误码说明

(1) 上传业务键

滑动验证默认不会采集您当前业务场景下的用户名、手机号等业务键，为了方便问题排查，这里强烈建议您配置上传业务主键，这样遇到问题的客户可以提供”业务键+时间”，很方便的关联到对应滑动验证的请求。否则您必须提供引导用户进行抓包才能具体对应查到日志和请求。
您有两种方法可以上传业务键：
a. 您可以在用户操作滑块前的任何时刻调用滑动验证维护的setTrans方法上传。比如您可以在用户填写完用户名（从用户名输入框失焦）时调用nc.setTrans({‘userName’:用户名输入框value})来上传用户名；也可以在页面加载完毕的时候调用nc.setTrans({‘业务会话标示’:业务会话session的值})来上传您业务上唯一的会话标示。
b. 您也可以配置elementID来让滑动验证主动采集。elementID的值为一个stringList，配置之后在滑动结束的时刻，滑块会以elementID当中的每一个string作为ID，去获取对应dom的value值并上传。举个例子，如果您配置elementID:[“usernameID”]，则滑动结束时document.getElementById(“usernameID”).value会自动被上传至滑动验证服务端。

(2) 错误码

滑动验证发生异常的情况下，在错误信息后会附带错误码，如下图：
滑动图5

其中错误码含义如下：

错误码含义
00analyze请求超时
01uab.js加载超时
B0策略拦截

 

 

 

 

 

短信验证码的实现

简介

短信验证码是对图片验证、滑动验证一种兜底的人机验证方式，实现原理较为简单，但通常需要接入第三方短信服务商的短信验证码接口。

短信服务商接口对接

开发短信验证码功能通常是采用第三方短信服务商的服务，作为短信下发渠道，以这个网站短信验证码为例： https://www.veesing.com ，获取试用验证码条数和验证码接口文档。进行接口对接前需首先进行准备工作：

短信签名报备

短信验证码需预先设置短信签名，签名会经过平台审核，审核通过后才可作为接口参数使用。

短信验证码模板报备

短信验证码需预先设置短信模板，签名会经过平台审核，审核通过后才可作为接口参数使用。

获取appId和appKey 

为保障接口安全，短信验证码接口，使用多重加密的appId和appKey进行身份鉴权和校验，这两个字段作为验证码接口必填项，建议预先获取到，获取appKey时需要对注册人进行身份校验。

至此，短信服务商验证码接口已经准备完毕，接下来可以进行自身业务的开发，下面展示通用的短信验证码Demo。

短信验证码前端实现

短信验证码前端较为简单，主要就是发送验证码和校验验证码两个ajax请求，结合上面的滑动验证可实现双重验证。实现效果图如下：

实现代码如下：

  1. <html>
  2. <head>
  3.     <meta charset="utf-8"/>
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  5.     <!-- 国内使用 -->
  6.     <link rel="stylesheet" href="https://cdn.staticfile.org/amazeui/2.7.2/css/amazeui.min.css">
  7.     <script type="text/javascript" charset="utf-8" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
  8.     <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
  9.     <!-- 若您的主要用户来源于海外，请替换使用下面的js资源 -->
  10.     <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/nch5/index.js?t=2015052012"></script> -->
  11.     <style>
  12.         .am-form{
  13.             padding: 10px;
  14.         }
  15.         ._nc .stage1 .slider{
  16.             left: 0;
  17.             right: 0;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.  
  23. <div class="am-form">
  24.     <div class="am-form-group">
  25.         <label for="tel">请输入手机号</label>
  26.         <input type="text" class="" id="tel" placeholder="请输入手机号">
  27.     </div>
  28.  
  29.     <div id="__nc" style="height: 70px">
  30.         <div id="nc"></div>
  31.     </div>
  32.  
  33.     <div class="am-form-group">
  34.         <label for="code">请输入验证码</label>
  35.         <input id="code" type="text" placeholder="请输入验证码">
  36.     </div>
  37.  
  38.     <button type="button" class="am-btn am-btn-primary">提交</button>
  39. </div>
  40.  
  41. <script>
  42.     var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
  43.     var nc=NoCaptcha.init({
  44.         renderTo: '#nc',
  45.         appkey: 'CF_APP_1',
  46.         scene: 'register',
  47.         token: nc_token,
  48.         trans: {"key1": "code200"},
  49.         elementID: ["usernameID"],
  50.         is_Opt: 0,
  51.         language: "cn",
  52.         timeout: 10000,
  53.         retryTimes: 5,
  54.         errorTimes: 5,
  55.         inline:false,
  56.         apimap: {
  57. // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
  58. // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
  59.         },
  60.         bannerHidden:false,
  61.         initHidden:false,
  62.         callback: function (data) {
  63.             window.console && console.log(nc_token)
  64.             window.console && console.log(data.csessionid)
  65.             window.console && console.log(data.sig);
  66.             var tel = $('#tel').val();
  67.             $.ajax({
  68.                 url: "sendCode",
  69.                 type: "post",
  70.                 data: {
  71.                     tel:tel
  72.                 },
  73.                 dataType: "json",
  74.                 success: function (result) {
  75.                     if (result.code == 0) {
  76.                         alert("验证码已发送!", "green")
  77.                     } else {
  78.                         alert("发送失败,请稍后再试！");
  79.                         nc.reset()
  80.                     }
  81.                 },
  82.                 error: function () {
  83.                     alert("系统繁忙,请稍后再试!", "red")
  84.                 }
  85.             })
  86.         },
  87.         error: function (s) {
  88.         }
  89.     });
  90.     NoCaptcha.setEnabled(true);
  91.     nc.reset();//请务必确保这里调用一次reset()方法
  92.  
  93.     NoCaptcha.upLang('cn', {
  94.         'LOADING':"加载中...",//加载
  95.         'SLIDER_LABEL': "请向右滑动验证",//等待滑动
  96.         'CHECK_Y':"验证通过",//通过
  97.         'ERROR_TITLE':"非常抱歉，这出错了...",//拦截
  98.         'CHECK_N':"验证未通过", //准备唤醒二次验证
  99.         'OVERLAY_INFORM':"经检测你当前操作环境存在风险，请输入验证码",//二次验证
  100.         'TIPS_TITLE':"验证码错误，请重新输入"//验证码输错时的提示
  101.     });
  102. </script>
  103. </body>
  104. </html>

短信验证码后端实现

后端代码主要职责是两方面：1）接收生成验证码请求，生成验证码存入session中；2）接收校验验证码的请求，将存入session的验证码去除，与前端输入的验证码进行比对，比对一致则通过并进行视图转发，比对不一致则告知前端错误原因。

实现代码如下：

  1. HttpSession session = req.getSession();
  2.     // TODO 验证码有效时间
  3.     session.setMaxInactiveInterval(600);
  4.     try {
  5.       Integer num = RandNumber.getNum();
  6.       // TODO 发送验证码通道
  7.       Sendsms.Send(num, phone);
  8.       session.setAttribute(phone, num);
  9.       return R.ok();
  10.     } catch (Exception e) {
  11.       e.printStackTrace();
  12.       logger.error(e.getMessage());
  13.       return R.error("fasle");
  14.     }

 

  1. import java.io.Exception;
  2.  
  3. import org.apache.commons.httpclient.HttpClient;
  4. import org.apache.commons.httpclient.HttpException;
  5. import org.apache.commons.httpclient.NameValuePair;
  6. import org.apache.commons.httpclient.methods.PostMethod;
  7.  
  8. public class Sendsms {
  9.  
  10.   private static String Url = "https://vip.veesing.com/smsApi/verifyCode";
  11.  
  12.   // 发送短信验证码
  13.   public static void Send(Integer num, String mobile) {
  14.     try {
  15.     HttpClient client = new HttpClient();
  16.     PostMethod method = new PostMethod(Url);
  17.     client.getParams().setContentCharset("UTF-8");
  18.     method.setRequestHeader("ContentType", "application/x-www-form-urlencoded;charset=UTF-8");
  19.     NameValuePair[] data = { 
  20.         new NameValuePair("appId", "*********"),
  21.         new NameValuePair("appKey", "**********"), 
  22.         new NameValuePair("templateId", "*******"), 
  23.         new NameValuePair("mobile", "*******"),
  24.         new NameValuePair("variables", "*******") 
  25.         };
  26.     method.setRequestBody(data);
  27.     client.executeMethod(method);
  28.     String submitResult = method.getResponseBodyAsString();
  29.     System.out.println(submitResult);
  30.     } catch (Exception e) {
  31.       e.printStackTrace();
  32.     }
  33.   }
  34.  
  35. }
  1. HttpSession session = req.getSession();
  2.     String yzm = String.valueOf(session.getAttribute(username));
  3.     logger.info(yzm);
  4.     if (yzm == null) {
  5.       return R.error("验证码错误");
  6.     }
  7.     if (yzm != null && !verifycode.equals(yzm)) {
  8.       return R.error("验证码错误");
  9.     }

以上就是Java实现网页滑动验证与短信验证码的全部实现，仔细研究此案例，可实现安全性高、用户体验好的登录注册+滑动验证+短信验证码功能。

内容来源：https://blog.csdn.net/veesing/article/details/88290441

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/143152
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号