全部产品
阿里云办公

H5版本

更新时间:2018-02-27 15:06:10

简介

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

资源引入说明

使用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. <script>
  15. var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
  16. var nc=NoCaptcha.init({
  17. renderTo: '#nc',
  18. appkey: 'CF_APP_1',
  19. scene: 'register',
  20. token: nc_token,
  21. trans: {"key1": "code200"},
  22. elementID: ["usernameID"],
  23. is_Opt: 0,
  24. language: "cn",
  25. timeout: 10000,
  26. retryTimes: 5,
  27. errorTimes: 5,
  28. inline:false,
  29. apimap: {
  30. // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
  31. // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
  32. },
  33. bannerHidden:false,
  34. initHidden:false,
  35. callback: function (data) {
  36. window.console && console.log(nc_token)
  37. window.console && console.log(data.csessionid)
  38. window.console && console.log(data.sig)
  39. },
  40. error: function (s) {
  41. }
  42. });
  43. NoCaptcha.setEnabled(true);
  44. nc.reset();//请务必确保这里调用一次reset()方法
  45. NoCaptcha.upLang('cn', {
  46. 'LOADING':"加载中...",//加载
  47. 'SLIDER_LABEL': "请向右滑动验证",//等待滑动
  48. 'CHECK_Y':"验证通过",//通过
  49. 'ERROR_TITLE':"非常抱歉,这出错了...",//拦截
  50. 'CHECK_N':"验证未通过", //准备唤醒二次验证
  51. 'OVERLAY_INFORM':"经检测你当前操作环境存在风险,请输入验证码",//二次验证
  52. 'TIPS_TITLE':"验证码错误,请重新输入"//验证码输错时的提示
  53. });
  54. </script>
  55. </body>
  56. </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方法后,任何时候调用此方法,可以展示滑动验证组件
setTrans Object 可以设置滑动验证的业务键,方便问题排查定位。详见”问题排查与错误码说明”部分
upLang String,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

其中错误码含义如下:

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