全部产品
阿里云办公

H5版本

更新时间:2018-02-27 16:04:22

简介

智能验证以一个button的形式提供给接入方集成人机识别的能力,大部分用户只需要一次点击交互即可完成原先复杂的人机验证码操作

智能H5

完整接入demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <script>
  6. window.NVC_Opt = {
  7. appkey:'CF_APP_1',
  8. scene:'nvc_register',
  9. renderTo:'#captcha',
  10. trans: {"key1": "code0", "nvcCode":200},
  11. elements: [
  12. '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png',
  13. '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png'
  14. ],
  15. bg_back_prepared: '//img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png',
  16. bg_front: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABQCAMAAADY1yDdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURefk5w+ruswAAAAfSURBVFjD7cExAQAAAMKg9U9tCU+gAAAAAAAAAIC3AR+QAAFPlUGoAAAAAElFTkSuQmCC',
  17. obj_ok: '//img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png',
  18. bg_back_pass: '//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png',
  19. obj_error: '//img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png',
  20. bg_back_fail: '//img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png',
  21. upLang:{"cn":{
  22. _ggk_guide: "请在屏幕上滑动,刮出两面盾牌",
  23. _ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧",
  24. _ggk_loading: "加载中",
  25. _ggk_fail: ['呀,盾牌不见了<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
  26. _ggk_action_timeout: ['我等得太久啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
  27. _ggk_net_err: ['网络实在不给力<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
  28. _ggk_too_fast: ['您刮得太快啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题']
  29. }
  30. }
  31. }
  32. </script>
  33. <script src="//g.alicdn.com/sd/nvc/1.1.112/guide.js"></script>
  34. <script>
  35. window.onload = function(){
  36. var ic = new smartCaptcha({
  37. renderTo: '#sc',
  38. width: 300,
  39. height: 42,
  40. default_txt: '点击按钮开始智能验证',
  41. success_txt: '验证成功',
  42. fail_txt: '验证失败,请在此点击按钮刷新',
  43. scaning_txt: '智能检测中',
  44. success: function(data) {
  45. console.log(NVC_Opt.token)
  46. console.log(data.sessionID);
  47. console.log(data.sig);
  48. },
  49. });
  50. ic.init();
  51. }
  52. </script>
  53. </head>
  54. <body>
  55. <script src="//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js"></script>
  56. <div id="sc">
  57. </div>
  58. </body>
  59. </html>

接入注意事项

1.window.NVC_Opt全局变量的声明一定要在”//g.alicdn.com/sd/nvc/1.1.112/guide.js” 资源引入之前配置完毕
2.new smartCaptcha的声明需要在window.NVC_Opt和”//g.alicdn.com/sd/nvc/1.1.112/guide.js” 资源引入之后配置

参数详细说明

window.NVC_Opt

参数 含义
appkey 应用标示。它和scene字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值,请勿乱写
scene 场景标示。它和appkey字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值,请勿乱写
trans 业务键字段。您可以不写此字段,也可以按照下文中”问题排查”部分文档配置此字段,便于线上问题排查
elements 两个长度的List,自定义需要刮出的两个elements的图片资源
bg_back_prepared 自定义刮动时的背景图像,平铺填充
bg_front 自定义刮动的前景(浮层),注意这里只接受base64数据流
obj_ok 自定义验证通过时显示的图标资源
bg_back_pass 自定义验证通过时的背景图像,平铺填充
obj_error 自定义验证失败或异常时显示的图标资源
bg_back_fail 自定义验证失败或异常时显示的背景图像,平铺填充
upLang 用于自定义刮刮卡文案,具体可以参见”刮刮卡交互验证前端代码集成文档”

new smartCaptcha配置项

参数 含义
renderTo 配置智能验证按钮渲染的位置
width 按钮长度,最小值300,默认300
height 按钮高度,最小值42,默认42
default_txt 配置按钮等待交互状态的文案
success_txt 配置验证通过的文案
fail_txt 配置验证拦截的文案
scaning_txt 配置检测状态中的文案
success 验证成功的回调,请在此回调中保留token、sessionId和sig参数用作验签

测试指南

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

CF_APP_1这个appkey是验证码服务专门为用户测试验证码各个状态所维护的appkey。启用这个appkey后,您可以通过配置前端trans字段来直接控制验证码服务接口的返回(通过or二次验证or拦截),借此您可以直观的看到验证码各个状态的交互、样式和流程。正式上线时请务必将其替换为阿里云控制台上为您分配的appkey和scene,以免出现不必要的安全问题。
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) 正式上线测试

正式上线之前,推荐您执行完整的功能性和兼容性测试。测试过程中有以下几点注意事项:
·请确保您使用阿里云控制台上分配的appkey和scene进行测试,不要胡乱填写
·请注意您当前验证码的使用场景。如果您的验证码在PCweb场景下使用,请不要用手机等移动设备进行测试
·在测试低版本IE浏览器时,不要用IE11浏览器的兼容模式去模拟生成低版本浏览器。请用真正低版本IE浏览器进行测试