全部产品
阿里云办公

H5版本

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

简介

无痕验证是阿里巴巴提供的新一套人机解决方案。由无痕组件负责收集和统一调度下游验证码产品实现综合人机对抗。
用户接入后完全静默采集,对大部分正常用户0打扰,对有风险用户会根据风险等级返回相应的下游验证码产品唤醒建议。
无痕验证采用服务端-服务端的风险查询机制,业务方在有风控能力的情况下可以很轻松的将无痕验证人机识别的能力并联到自己的业务风控上。

资源引入说明

使用无痕验证,需要引入以下js资源:

  1. <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nvc/1.1.112/guide.js?t=2015052012"></script>

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

完整接入demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  6. </head>
  7. <body>
  8. <div id="captcha"></div>
  9. <button type="button" id='register'>注册</button>
  10. <script>
  11. window.NVC_Opt = {
  12. //无痕配置 && 滑动验证、刮刮卡通用配置
  13. appkey:'CF_APP_1',
  14. scene:'nvc_register',
  15. isH5:true,
  16. popUp:false,
  17. renderTo:'#captcha',
  18. trans: {"key1": "code0","nvcCode":400},
  19. language: "cn",
  20. //滑动验证长度配置
  21. customWidth: 300,
  22. //刮刮卡配置项
  23. width: 300,
  24. height: 100,
  25. elements: [
  26. '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png',
  27. '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png'
  28. ],
  29. bg_back_prepared: '//img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png',
  30. bg_front: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABQCAMAAADY1yDdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURefk5w+ruswAAAAfSURBVFjD7cExAQAAAMKg9U9tCU+gAAAAAAAAAIC3AR+QAAFPlUGoAAAAAElFTkSuQmCC',
  31. obj_ok: '//img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png',
  32. bg_back_pass: '//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png',
  33. obj_error: '//img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png',
  34. bg_back_fail: '//img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png',
  35. upLang:{"cn":{
  36. _ggk_guide: "请在屏幕上滑动,刮出两面盾牌",
  37. _ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧",
  38. _ggk_loading: "加载中",
  39. _ggk_fail: ['呀,盾牌不见了<br/>请', "javascript:NoCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
  40. _ggk_action_timeout: ['我等得太久啦<br/>请', "javascript:NoCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
  41. _ggk_net_err: ['网络实在不给力<br/>请', "javascript:NoCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
  42. _ggk_too_fast: ['您刮得太快啦<br/>请', "javascript:NoCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题']
  43. }
  44. }
  45. }
  46. function yourRegisterRequest(url, params){
  47. var callbackName = ('jsonp_' + Math.random()).replace('.', '')
  48. params += '&callback=' + callbackName
  49. var o_scripts = document.getElementsByTagName("script")[0]
  50. var o_s = document.createElement('script')
  51. o_scripts.parentNode.insertBefore(o_s, o_scripts);
  52. //您注册请求的业务回调
  53. window[callbackName] = function(json) {
  54. if(json.result.code == 400) {
  55. //唤醒滑动验证
  56. getNC().then(function(){
  57. NoCaptcha.upLang('cn', {
  58. 'LOADING':"加载中...",//加载
  59. 'SLIDER_LABEL': "请向右滑动验证",//等待滑动
  60. 'CHECK_Y':"验证通过",//通过
  61. 'ERROR_TITLE':"非常抱歉,这出错了...",//拦截
  62. 'CHECK_N':"验证未通过", //准备唤醒二次验证
  63. 'OVERLAY_INFORM':"经检测你当前操作环境存在风险,请输入验证码",//二次验证
  64. 'TIPS_TITLE':"验证码错误,请重新输入"//验证码输错时的提示
  65. });
  66. _nvc_nc.reset();
  67. })
  68. } else if (json.result.code == 600) {
  69. //唤醒刮刮卡
  70. getSC().then(function(){})
  71. } else if (json.result.code == 100 || json.result.code == 200) {
  72. //注册成功
  73. alert("register success!")
  74. } else if (json.result.code == 800 || json.result.code == 900) {
  75. //直接拦截
  76. alert("register failed!")
  77. }
  78. }
  79. o_s.src = url + '?' + params
  80. }
  81. document.getElementById('register').onclick = function() {
  82. var params = 'a=' + getNVCVal()
  83. yourRegisterRequest('http://cf.aliyun.com/nvc/nvcAnalyze.jsonp', params)
  84. }
  85. </script>
  86. <script src="//g.alicdn.com/sd/nvc/1.1.112/guide.js"></script>
  87. </body>
  88. </html>

接入注意事项

1.window.NVC_Opt全局变量的声明一定要在”//g.alicdn.com/sd/nvc/1.1.112/guide.js” 资源引入之前配置完毕
2.切记:yourRegisterRequest方法中维护的”http://cf.aliyun.com/nvc/nvcAnalyze.jsonp“ 接口必须顶替为您自己的业务请求接口(现有接口属于线上Demo接口,不具备任何实际攻防能力),在这个接口调用的过程中需带上getNVCVal()获取的人机信息串,随业务请求一起带到您的业务服务端,并按照 “Link:服务端接入文档” 中的指引发起”业务服务端->风控服务端”的风险查询请求。
3.风险查询请求返回的结果,您可以直接返回给客户端使用,客户端可以根据风险等级选择放过、拦截、或者调用getNC()、getSC()方法在指定div上唤醒二次验证。如果您服务端维护有自己的风控策略(比如黑白名单),也可以综合您自己风控策略与人机接口二者的结果,综合在客户端决定风险处置方式。

参数详细说明

参数 含义
appkey 应用标示。它和scene字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值,请勿乱写
scene 场景标示。它和appkey字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值,请勿乱写
isH5 是否是Html5场景,这里H5接入需填true。默认为false
popUp 决定二次验证唤醒的方式。true为浮层式,false为嵌入式
renderTo 声明二次验证需要渲染的目标元素ID
trans 业务键字段。您可以不写此字段,也可以按照下文中”问题排查”部分文档配置此字段,便于线上问题排查
customWidth 当唤醒滑动验证作为二次验证时,配置滑动验证的长度
width 当唤醒刮刮卡验证作为二次验证时,配置刮刮卡的长度
height 当唤醒刮刮卡验证作为二次验证时,配置刮刮卡的高度
language 配置二次验证的语言,详见”自定义文案”部分。默认为cn(中文)
elements 两个长度的List,自定义需要刮出的两个elements的图片资源
bg_back_prepared 自定义刮动时的背景图像,平铺填充
bg_front 自定义刮动的前景(浮层),注意这里只接受base64数据流
obj_ok 自定义验证通过时显示的图标资源
bg_back_pass 自定义验证通过时的背景图像,平铺填充
obj_error 自定义验证失败或异常时显示的图标资源
bg_back_fail 自定义验证失败或异常时显示的背景图像,平铺填充
upLang 用于自定义刮刮卡文案,具体可以参见”刮刮卡交互验证前端代码集成文档”

测试指南

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

CF_APP_1这个appkey是验证码服务专门为用户测试验证码各个状态所维护的appkey。启用这个appkey后,您可以通过配置前端trans字段来直接控制验证码服务接口的返回(通过or二次验证or拦截),借此您可以直观的看到验证码各个状态的交互、样式和流程。正式上线时请务必将其替换为阿里云控制台上为您分配的appkey和scene,以免出现不必要的安全问题。
当您使用demo中提供的http://cf.aliyun.com/nvc/nvcAnalyze.jsonp 服务端接口进行测试时,CF_APP_1下trans字段与验证码结果对应关系如下:

trans 效果
{“nvcCode”:200} 无痕验证直接通过
{“nvcCode”:400, “key1”: “code0”} 无痕验证会唤醒滑动验证,且滑动验证一定通过
{“nvcCode”:400, “key1”: “code300”} 无痕验证会唤醒滑动验证,且滑动验证一定拦截
{“nvcCode”:600, “key1”: “code0”} 无痕验证会唤醒刮刮卡验证,且刮刮卡验证一定通过
{“nvcCode”:600, “key1”: “code300”} 无痕验证会唤醒刮刮卡验证,且刮刮卡验证一定拦截
{“nvcCode”:800} 无痕验证直接拦截

(2) 正式上线测试

正式上线之前,推荐您执行完整的功能性和兼容性测试。测试过程中有以下几点注意事项:
·请务必将demo中的http://cf.aliyun.com/nvc/nvcAnalyze.jsonp 接口替换为您自己的业务接口,并按照无痕验证服务端接入文档进行后端风控接入
·请确保您使用阿里云控制台上分配的appkey和scene进行测试,不要胡乱填写
·请注意您当前验证码的使用场景。如果您的验证码在Html5场景下使用,请不要用PC浏览器进行测试
·在测试低版本IE浏览器时,不要用IE11浏览器的兼容模式去模拟生成低版本浏览器。请用真正低版本IE浏览器进行测试

自定义文案

(1)二次弹出滑动验证文案

调用getNC()方法唤醒滑动验证时,可以在getNC().then(function{})中调用NoCaptcha.upLang方法来自定义文案。自定义之后请记得调用reset()方法刷新渲染滑动验证。

  1. getNC().then(function(){
  2. NoCaptcha.upLang('cn', {
  3. 'LOADING':"加载中...",//加载
  4. 'SLIDER_LABEL': "请向右滑动验证",//等待滑动
  5. 'CHECK_Y':"验证通过",//通过
  6. 'ERROR_TITLE':"非常抱歉,这出错了...",//拦截
  7. 'CHECK_N':"验证未通过", //准备唤醒二次验证
  8. 'OVERLAY_INFORM':"经检测你当前操作环境存在风险,请输入验证码",//二次验证
  9. 'TIPS_TITLE':"验证码错误,请重新输入"//验证码输错时的提示
  10. });
  11. _nvc_nc.reset()
  12. })

(2)二次弹出刮刮卡验证文案

调用getSC()方法唤醒刮刮卡验证时,自定义文案可以直接在NVC_Opt配置项中配置upLang来修改。

  1. upLang:{"cn":{
  2. _ggk_guide: "请摁住鼠标左键,刮出两面盾牌",//初始化完成
  3. _ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧",//验证成功
  4. _ggk_loading: "加载中",//加载过程
  5. _ggk_fail: ['呀,盾牌不见了<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],//验证失败
  6. _ggk_action_timeout: ['我等得太久啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],//操作超时
  7. _ggk_net_err: ['网络实在不给力<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],//加载失败
  8. _ggk_too_fast: ['您刮得太快啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题']//刮动过快
  9. }
  10. }