全部产品
云市场

前端接入代码集成

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

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

资源引入

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

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

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

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

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

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

前端接入代码集成

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

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

  1. <html>
  2. <head>
  3. <meta charset="utf-8"/>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  5. <!--适用于主要访问来自中国大陆地区用户的业务场景-->
  6. <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
  7. <!--适用于主要访问来自非中国大陆地区用户的业务场景-->
  8. <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/nch5/index.js?t=2015052012"></script> -->
  9. </head>
  10. <body>
  11. <div id="__nc" style="margin-left:auto;margin-right:auto;width:80%;height:100px;padding-top:100px;">
  12. <div id="nc"></div>
  13. </div>
  14. <script>
  15. var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
  16. var nc=NoCaptcha.init({
  17. //声明滑动验证需要渲染的目标元素ID。
  18. renderTo: '#nc',
  19. //应用类型标识。它和使用场景标识(scene字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
  20. appkey: 'CF_APP_1',
  21. //使用场景标识。它和应用类型标识(appkey字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值,请务必正确填写。
  22. scene: 'register',
  23. //滑动验证码的主键,请勿将该字段定义为固定值。确保每个用户每次打开页面时,其token值都是不同的。系统默认的格式为:”您的appkey”+”时间戳”+”随机数”。
  24. token: nc_token,
  25. //业务键字段,可为空。为便于线上问题的排查,建议您按照线上问题定位文档中推荐的方法配置该字段值。
  26. trans: {"key1": "code0"},
  27. //通过Dom的ID属性自动填写trans业务键,可为空。建议您按照线上问题定位文档中推荐的方法配置该字段值。
  28. elementID: ["usernameID"],
  29. //是否自定义配置底层采集组件。如无特殊场景,请使用默认值(0),即不自定义配置底层采集组件。
  30. is_Opt: 0,
  31. //语言,默认值为cn(中文)。HTML5应用类型默认支持简体中文、繁体中文、英文语言。
  32. language: "cn",
  33. //内部网络请求的超时时间。一般情况建议保持默认值(10000ms)。
  34. timeout: 10000,
  35. //允许服务器超时重复次数,默认5次。
  36. retryTimes: 5,
  37. //用于自定义滑动验证各项请求的接口地址。一般情况,请勿配置该参数。
  38. apimap: {
  39. // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
  40. // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
  41. },
  42. //验证通过后,验证码组件是否自动隐藏,默认不隐藏(false)。
  43. bannerHidden:false,
  44. //是否默认不渲染,默认值false。当设置为true时,不自动渲染,需要自行调用show方法进行渲染。
  45. initHidden:false,
  46. //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识(token)、会话ID(sessionid)、签名串(sig)字段记录下来,随业务请求一同发送至您的服务端调用验签。
  47. callback: function (data) {
  48. window.console && console.log(nc_token)
  49. window.console && console.log(data.csessionid)
  50. window.console && console.log(data.sig)
  51. },
  52. error: function (s) {
  53. }
  54. });
  55. NoCaptcha.setEnabled(true);
  56. //请务必在此处调用一次reset()方法。
  57. nc.reset();
  58. //用于配置滑动验证的自定义文案。详细信息,请参见自定义文案与多语言文档。
  59. NoCaptcha.upLang('cn', {
  60. //加载状态提示。
  61. 'LOADING':"加载中...",
  62. //等待滑动状态提示。
  63. 'SLIDER_LABEL': "请向右滑动验证",
  64. //验证通过状态提示。
  65. 'CHECK_Y':"验证通过",
  66. //验证失败触发拦截状态提示。
  67. 'ERROR_TITLE':"非常抱歉,这出错了..."
  68. });
  69. </script>
  70. </body>
  71. </html>

参数定义说明

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

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

方法定义说明

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

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

代码集成后测试

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

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

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

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

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

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

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

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

    • 确保测试过程中,使用云盾人机验证控制台中为您分配的appkey和scene值进行测试。
    • 务必根据您配置的应用类型场景进行测试。例如,您的滑动验证配置在HTML5业务类型使用,请不要通过Web浏览器的方式进行测试。