SlidingBlock.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. export const SlidingBlock = {
  2. data() {
  3. return {
  4. sliderData: {},
  5. appKey: 'FFFF0N00000000007EC0'
  6. }
  7. },
  8. methods: {
  9. /**
  10. * 串联加载指定的脚本
  11. * 串联加载[异步]逐个加载,每个加载完成后加载下一个
  12. * 全部加载完成后执行回调
  13. * @param array|string 指定的脚本们
  14. * @param function 成功后回调的函数
  15. * @return array 所有生成的脚本元素对象数组
  16. * 异步加载js后运行回调函数callback / scripts 为数组或字符串
  17. */
  18. seriesLoadScripts(scripts, callback) {
  19. if (typeof (scripts) != "object") var scripts = [scripts];
  20. var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement;
  21. var s = new Array(), last = scripts.length - 1, recursiveLoad = function (i) { //递归
  22. s[i] = document.createElement("script");
  23. s[i].setAttribute("type", "text/javascript");
  24. s[i].onload = s[i].onreadystatechange = function () { //Attach handlers for all browsers
  25. if (!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") {
  26. this.onload = this.onreadystatechange = null;
  27. this.parentNode.removeChild(this);
  28. if (i != last) recursiveLoad(i + 1); else if (typeof (callback) == "function") callback();
  29. }
  30. };
  31. s[i].setAttribute("src", scripts[i]);
  32. HEAD.appendChild(s[i]);
  33. };
  34. recursiveLoad(0);
  35. },
  36. // 滑块
  37. sliderFun() {
  38. const nc_token = [this.appKey, (new Date()).getTime(), Math.random()].join(':');
  39. const NC_Opt = {
  40. //声明滑动验证需要渲染的目标元素ID。
  41. renderTo: "#your-dom-id",
  42. //应用类型标识。它和使用场景标识(scene字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
  43. appkey: this.appKey,
  44. //使用场景标识。它和应用类型标识(appkey字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值,请务必正确填写。
  45. scene: "nc_message",
  46. //滑动验证码的主键,请勿将该字段定义为固定值。确保每个用户每次打开页面时,其token值都是不同的。系统默认的格式为:”您的appkey”+”时间戳”+”随机数”。
  47. token: nc_token,
  48. //滑动条的宽度。
  49. customWidth: 300,
  50. //业务键字段,可为空。为便于线上问题的排查,建议您按照线上问题定位文档中推荐的方法配置该字段值。
  51. trans:{"key1":"code0"},
  52. //通过Dom的ID属性自动填写trans业务键,可为空。建议您按照线上问题定位文档中推荐的方法配置该字段值。
  53. elementID: ["usernameID"],
  54. //是否自定义配置底层采集组件。如无特殊场景,请使用默认值(0),即不自定义配置底层采集组件。
  55. is_Opt: 0,
  56. //语言。PC端Web页面场景默认支持18国语言,详细配置方法请参见自定义文案与多语言文档。
  57. language: "cn",
  58. //是否启用。一般情况,保持默认值(true)即可。
  59. isEnabled: true,
  60. //内部网络请求的超时时间。一般情况建议保持默认值(3000ms)。
  61. timeout: 3000,
  62. //允许服务器超时重复次数,默认5次。超过重复次数后将触发报错。
  63. times:5,
  64. //用于自定义滑动验证各项请求的接口地址。一般情况,请勿配置该参数。
  65. apimap: {
  66. // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
  67. // 'get_captcha': '//b.com/get_captcha/ver3',
  68. // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
  69. // 'get_img': '//c.com/get_img',
  70. // 'checkcode': '//d.com/captcha/checkcode.jsonp',
  71. // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
  72. // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
  73. // 'umid_serUrl': 'https://g.com/service/um.json'
  74. },
  75. //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识(token)、会话ID(sessionid)、签名串(sig)字段记录下来,随业务请求一同发送至您的服务端调用验签。
  76. callback: (data) => {
  77. this.sliderData = Object.assign({}, data, {
  78. appkey: NC_Opt.appkey,
  79. scene: NC_Opt.scene
  80. });
  81. }
  82. };
  83. let date11 = () => {
  84. let _date = new Date();
  85. let year=_date.getFullYear().toString();
  86. let month=_date.getMonth().toString();
  87. let day=_date.getDate().toString();
  88. return year+month+day;
  89. };
  90. let c = date11();
  91. const scripts = [
  92. `https://g.alicdn.com/sd/ncpc/nc.js?t=${c}`
  93. ];
  94. this.seriesLoadScripts(scripts, function () {
  95. var nc = new noCaptcha(NC_Opt);
  96. nc.upLang('cn', {
  97. _startTEXT: "请按住滑块,拖动到最右边",
  98. _yesTEXT: "验证通过",
  99. _error300: "哎呀,出错了,点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
  100. _errorNetwork: "网络不给力,请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
  101. });
  102. })
  103. },
  104. },
  105. mounted() {
  106. this.sliderFun();
  107. }
  108. };