全部产品
云市场

前端接入代码集成

更新时间:2019-08-14 14:03:07

滑动验证是应用于阿里巴巴集团人机识别业务场景第一线的验证码服务。只需通过简单的右滑交互操作,用户无需思考即可通过验证。在云盾人机验证控制台中根据场景添加配置后,您需要将系统生成的前端页面代码集成到您需要使用滑动验证功能的PC端Web页面中。

资源引入

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

  • 页面的主要访问来自中国大陆地区用户时,使用以下代码:

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

  • 页面的主要访问来自非中国大陆地区用户时,使用以下代码:

    <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>

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

前端接入代码集成

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <!--适用于主要访问来自中国大陆地区用户的业务场景-->
  6. <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
  7. <!--适用于主要访问来自非中国大陆地区用户的业务场景-->
  8. <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script> -->
  9. </head>
  10. <body>
  11. <!--No-Captcha渲染的位置,其中 class 中必须包含 nc-container-->
  12. <div id="your-dom-id" class="nc-container"></div>
  13. <script type="text/javascript">
  14. var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
  15. var NC_Opt =
  16. {
  17. //声明滑动验证需要渲染的目标元素ID。
  18. renderTo: "#your-dom-id",
  19. //应用类型标识。它和使用场景标识(scene字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
  20. appkey: "CF_APP_1",
  21. //使用场景标识。它和应用类型标识(appkey字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值,请务必正确填写。
  22. scene: "register",
  23. //滑动验证码的主键,请勿将该字段定义为固定值。确保每个用户每次打开页面时,其token值都是不同的。系统默认的格式为:”您的appkey”+”时间戳”+”随机数”。
  24. token: nc_token,
  25. //滑动条的宽度。
  26. customWidth: 300,
  27. //业务键字段,可为空。为便于线上问题的排查,建议您按照线上问题定位文档中推荐的方法配置该字段值。
  28. trans:{"key1":"code0"},
  29. //通过Dom的ID属性自动填写trans业务键,可为空。建议您按照线上问题定位文档中推荐的方法配置该字段值。
  30. elementID: ["usernameID"],
  31. //是否自定义配置底层采集组件。如无特殊场景,请使用默认值(0),即不自定义配置底层采集组件。
  32. is_Opt: 0,
  33. //语言。PC端Web页面场景默认支持18国语言,详细配置方法请参见自定义文案与多语言文档。
  34. language: "cn",
  35. //是否启用。一般情况,保持默认值(true)即可。
  36. isEnabled: true,
  37. //内部网络请求的超时时间。一般情况建议保持默认值(3000ms)。
  38. timeout: 3000,
  39. //允许服务器超时重复次数,默认5次。超过重复次数后将触发报错。
  40. times:5,
  41. //用于自定义滑动验证各项请求的接口地址。一般情况,请勿配置该参数。
  42. apimap: {
  43. // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
  44. // 'get_captcha': '//b.com/get_captcha/ver3',
  45. // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
  46. // 'get_img': '//c.com/get_img',
  47. // 'checkcode': '//d.com/captcha/checkcode.jsonp',
  48. // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
  49. // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
  50. // 'umid_serUrl': 'https://g.com/service/um.json'
  51. },
  52. //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识(token)、会话ID(sessionid)、签名串(sig)字段记录下来,随业务请求一同发送至您的服务端调用验签。
  53. callback: function (data) {
  54. window.console && console.log(nc_token)
  55. window.console && console.log(data.csessionid)
  56. window.console && console.log(data.sig)
  57. }
  58. }
  59. var nc = new noCaptcha(NC_Opt)
  60. //用于自定义文案。详细配置方法请参见自定义文案与多语言文档。
  61. nc.upLang('cn', {
  62. _startTEXT: "请按住滑块,拖动到最右边",
  63. _yesTEXT: "验证通过",
  64. _error300: "哎呀,出错了,点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
  65. _errorNetwork: "网络不给力,请<a href=\"javascript:__nc.reset()\">点击刷新</a>"
  66. })
  67. </script>
  68. </body>
  69. </html>

参数定义说明

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

参数 含义 是否必填
renderTo 声明滑动验证需要渲染的目标元素ID。
appkey 应用类型标识。它和使用场景标识(scene字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
scene 使用场景标识。它和应用类型标识(appkey字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值,请务必正确填写。
token 滑动验证码的主键,请勿将该字段定义为固定值。确保每个用户每次打开页面时,其token值都是不同的。系统默认的格式为:”您的appkey”+”时间戳”+”随机数”。
customWidth 滑动条的宽度(单位:px)。建议您为滑动条预留300px以上的宽度。
trans 业务键字段,可为空。为便于线上问题的排查,建议您按照线上问题定位中的推荐方法配置该字段值。
elementID 通过Dom的ID属性自动填写trans业务键,可为空。为便于线上问题的排查,建议您按照线上问题定位中的推荐方法配置该字段值。
is_Opt 是否自定义配置底层采集组件。如无特殊场景,请使用默认值(0),即不自定义配置底层采集组件。
language 语言,默认值为cn(中文)。PC端Web页面应用类型默认支持18国语言。关于多语言的详细配置方法,请参见自定义文案与多语言
isEnabled 是否启用。一般情况,保持默认值(true)即可。
timeout 内部网络请求的超时时间。一般情况建议保持默认值(3000ms)。
times 允许服务器超时重复次数,默认5次。
apimap 用于自定义滑动验证各项请求的接口地址。一般情况,请勿配置该参数。
callback 前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识(token)、会话ID(sessionid)、签名串(sig)字段记录下来,随业务请求一同发送至您的服务端调用验签。

方法定义说明

NoCaptcha的实例化对象中提供了一些方法供您使用。您可以通过诸如var nc = new noCaptcha(NC_Opt); nc.functionName(parm);的方式来调用这些方法。

方法名参数作用
reload任何时候调用此方法,可将滑动验证重置为初始状态(即等待滑动状态)。
hide任何时候调用此方法,可隐藏滑动验证组件。
show在调用hide方法后,任何时候调用此方法,可重新展示滑动验证组件。
getToken任何时候调用此方法,可获取当前滑动验证实例的请求唯一标识。
setTransObject调用此方法,可设置滑动验证的业务键,便于线上问题的排查定位。详细信息,请参见线上问题定位
upLangString,Object用于配置滑动验证的自定义文案。详细信息,请参见自定义文案与多语言
destroy任何时候调用此方法,销毁当前滑动验证实例。

代码集成后测试

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

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

    您可以通过将appkey字段值设置为验证码服务预设的CF_APP_1并将scene字段值设置为register,来测试验证码各个状态的效果。将appkey字段和scene字段设置为该特定值后,您可以通过配置前端页面接入代码中的trans字段来直接控制验证码服务接口的返回结果(通过、拦截)。

    trans字段值模拟效果
    {“key1”:”code0”}滑动验证通过。
    {“key1”:”code300”}滑动验证未通过,被拦截。

    通过这样的方式,您可以直观地观察验证码各个状态的交互、样式和流程。

    说明:在正式上线时,请务必将appkey字段和scene字段替换回云盾人机验证控制台中为您分配的值,以免出现不必要的安全问题。

  2. 功能性测试和兼容性测试

    在正式上线前,建议您执行完整的功能性测试和兼容性测试。在测试过程中,请注意:

    • 确保测试过程中,使用云盾人机验证控制台中为您分配的appkey和scene值进行测试。
    • 务必根据您配置的业务类型场景进行测试。例如,您的验证码配置在PC端Web页面业务类型使用,请不要通过手机等移动端设备进行测试。
    • 针对低版本Internet Explorer浏览器进行测试时,请勿使用Internet Explorer 11浏览器的兼容模式来模拟低版本浏览器。需使用真正低版本的Internet Explorer浏览器进行测试。