全部产品
云市场

前端接入代码集成

更新时间:2019-07-04 18:25:58

智能验证是阿里巴巴集团提供的一种人机验证解决方案。对大部分正常用户来说,只需一次点击交互即可完成人机验证操作。对于您的业务来说,智能验证采用先进的风险分析引擎,有效区分来自人类与机器人的访问行为并拦截机器风险,为您提供安全可靠的业务环境。

资源引入

在HTML5页面中使用智能验证功能,需要在前端页面代码中添加以下代码,引入所需的JS资源。

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

说明:其中,t字段值建议设置为小时级别的时间戳。随实际时间更新,确保所引入的JS资源不会被浏览器长时间缓存,以免无法享受阿里云对JS资源的动态更新。

前端接入代码集成

在需要使用智能验证功能的HTML5前端页面中集成前端接入代码。

说明:以下代码为智能验证功能的前端接入代码示例,请在云盾人机验证控制台中相应服务配置的系统代码集成&测试页面,获取系统根据您选择的业务场景生成的智能验证前端集成代码,并将其集成在对应的移动端WAP/HTML5页面代码中。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <script src="//g.alicdn.com/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
  6. <script src="//g.alicdn.com/sd/smartCaptcha/0.0.4/index.js"></script>
  7. <script src="//g.alicdn.com/sd/quizCaptcha/0.0.1/index.js"></script>
  8. </head>
  9. <body>
  10. <div id="sc"></div>
  11. <script>
  12. window.NVC_Opt = {
  13. //应用类型标识。它和使用场景标识(scene字段)一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
  14. appkey:'CF_APP_1',
  15. //使用场景标识。它和应用类型标识(appkey字段)一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值,请务必正确填写。
  16. scene:'nvc_register_h5',
  17. //声明二次验证需要渲染的目标元素ID。
  18. renderTo:'#captcha',
  19. //业务键字段,可为空。该参数可用于上线前测试,请按照代码集成后测试部分中的方法配置该字段值。
  20. trans: {"key1": "code0","nvcCode":200},
  21. //当唤醒刮刮卡验证作为二次验证时,配置需要刮出的两个elements的图片资源。
  22. elements: [
  23. '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png',
  24. '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png'
  25. ],
  26. //当唤醒刮刮卡验证作为二次验证时,配置刮动时的背景图像(自动应用平铺填充的方式)。
  27. bg_back_prepared: '//img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png',
  28. //当唤醒刮刮卡验证作为二次验证时,配置刮动时的前景图像(仅支持base64数据流)。
  29. bg_front: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABQCAMAAADY1yDdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURefk5w+ruswAAAAfSURBVFjD7cExAQAAAMKg9U9tCU+gAAAAAAAAAIC3AR+QAAFPlUGoAAAAAElFTkSuQmCC',
  30. //当唤醒刮刮卡验证作为二次验证时,配置验证通过时显示的图标资源。
  31. obj_ok: '//img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png',
  32. //当唤醒刮刮卡验证作为二次验证时,配置验证通过时显示的背景图像(自动应用平铺填充的方式)。
  33. bg_back_pass: '//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png',
  34. //当唤醒刮刮卡验证作为二次验证时,配置验证失败或异常时显示的图标资源。
  35. obj_error: '//img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png',
  36. //当唤醒刮刮卡验证作为二次验证时,配置验证失败或异常时显示的背景图像(自动应用平铺填充的方式)。
  37. bg_back_fail: '//img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png',
  38. //当唤醒刮刮卡验证作为二次验证时,用于自定义文案。详细配置方法请参见自定义文案文档。
  39. upLang:{"cn":{
  40. _ggk_guide: "请摁住鼠标左键,刮出两面盾牌",
  41. _ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧",
  42. _ggk_loading: "加载中",
  43. _ggk_fail: ['呀,盾牌不见了<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
  44. _ggk_action_timeout: ['我等得太久啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
  45. _ggk_net_err: ['网络实在不给力<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
  46. _ggk_too_fast: ['您刮得太快啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题']
  47. }
  48. }
  49. }
  50. </script>
  51. <script src="//g.alicdn.com/sd/nvc/1.1.112/guide.js"></script>
  52. <script>
  53. window.onload = function(){
  54. var ic = new smartCaptcha({
  55. //声明智能验证需要渲染的目标元素ID。
  56. renderTo: '#sc',
  57. //智能验证组件的宽度。
  58. width: 300,
  59. //智能验证组件的高度。
  60. height: 42,
  61. //智能验证组件初始状态文案。
  62. default_txt: '点击按钮开始智能验证',
  63. //智能验证组件验证通过状态文案。
  64. success_txt: '验证成功',
  65. //智能验证组件验证失败(拦截)状态文案。
  66. fail_txt: '验证失败,请在此点击按钮刷新',
  67. //智能验证组件验证中状态文案。
  68. scaning_txt: '智能检测中',
  69. //前端智能验证通过时会触发该回调参数。您可以在该回调参数中将请求标识(token)、会话ID(sessionid)、签名串(sig)字段记录下来,随业务请求一同发送至您的服务端调用验签。
  70. success: function(data) {
  71. console.log(NVC_Opt.token)
  72. console.log(data.sessionId);
  73. console.log(data.sig);
  74. },
  75. });
  76. ic.init();
  77. }
  78. </script>
  79. </body>
  80. </html>

注意事项

  • 全局变量window.NVC_Opt的声明必须在引入”//g.alicdn.com/sd/nvc/1.1.112/guide.js” 资源前配置完成。

  • new smartCaptcha的声明必须在引入”//g.alicdn.com/sd/nvc/1.1.112/guide.js” 资源后配置。

参数定义说明

在前端接入代码中提供了以下参数,您可以根据业务需要在代码中调整这些参数。

全局变量window.NVC_Opt参数

参数 含义 是否必填
appkey 应用类型标识。它和使用场景标识(scene字段)一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
scene 使用场景标识。它和应用类型标识(appkey字段)一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值,请务必正确填写。
trans 业务键字段,可为空。该参数可用于上线前测试,请按照代码集成后测试部分中的方法配置该字段值。
elements 当唤醒刮刮卡验证作为二次验证时,配置需要刮出的两个elements的图片资源。
bg_back_prepared 当唤醒刮刮卡验证作为二次验证时,配置刮动时的背景图像(自动应用平铺填充的方式)。
bg_front 当唤醒刮刮卡验证作为二次验证时,配置刮动时的前景图像(仅支持base64数据流格式)。
obj_ok 当唤醒刮刮卡验证作为二次验证时,配置验证通过时显示的图标资源。
bg_back_pass 当唤醒刮刮卡验证作为二次验证时,配置验证通过时显示的背景图像(自动应用平铺填充的方式)。
obj_error 当唤醒刮刮卡验证作为二次验证时,配置验证失败或异常时显示的图标资源。
bg_back_fail 当唤醒刮刮卡验证作为二次验证时,配置验证失败或异常时显示的背景图像(自动应用平铺填充的方式)。
upLang 当唤醒刮刮卡验证作为二次验证时,用于自定义文案。详细配置方法请参见自定义文案

smartCaptcha变量参数

参数 含义 是否必填
renderTo 声明智能验证需要渲染的目标元素ID。
width 智能验证组件的宽度,默认值300px。强烈建议您将该宽度设置为不小于300px。
height 智能验证组件的高度,默认值42px。强烈建议您将该高度设置为不小于42px。
default_txt 智能验证组件初始状态文案。
success_txt 智能验证组件验证通过状态文案。
fail_txt 智能验证组件验证失败(拦截)状态文案。
scaning_txt 智能验证组件验证中状态文案。
success 前端智能验证通过时会触发该回调参数。您可以在该回调参数中将请求标识(token)、会话ID(sessionid)、签名串(sig)字段记录下来,随业务请求一同发送至您的服务端调用验签。

代码集成后测试

在将前端接入代码集成至HTML5页面后,建议您在正式上线前通过以下方法进行测试。

  1. 通过CF_APP_1值复现验证码各个状态工作机制

    您可以通过将appkey字段值设置为验证码服务预设的CF_APP_1并将scene字段值设置为nvc_register_h5,来测试验证码各个状态的效果。将appkey字段和scene字段设置为该特定值后,您可以通过配置前端页面接入代码中的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值进行测试。
    • 务必根据您配置的业务类型场景进行测试。例如,您的验证码配置在HTML5业务类型使用,请不要通过Web浏览器的方式进行测试。