全部产品
云市场

前端接入代码集成

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

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

资源引入

在PC端Web页面中使用智能验证功能,需要在前端页面代码中添加以下代码,引入所需的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资源的动态更新。

前端接入代码集成

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

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

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

代码集成后测试

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

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

    您可以通过将appkey字段值设置为验证码服务预设的CF_APP_1并将scene字段值设置为nvc_register,来测试验证码各个状态的效果。将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值进行测试。
    • 务必根据您配置的业务类型场景进行测试。例如,您的验证码配置在PC端Web页面业务类型使用,请不要通过手机等移动端设备进行测试。
    • 针对低版本Internet Explorer浏览器进行测试时,请勿使用Internet Explorer 11浏览器的兼容模式来模拟低版本浏览器。需使用真正低版本的Internet Explorer浏览器进行测试。