AliyunAfs.js 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. function loadJs(url, callback) {
  2. return new Promise((resolve, reject) => {
  3. const script = document.createElement('script')
  4. script.async = true
  5. script.addEventListener('load', () => {
  6. callback()
  7. })
  8. script.addEventListener('error', () => {
  9. reject(new Error(`Error loading ${url}`))
  10. })
  11. script.src = url
  12. document.head.appendChild(script)
  13. })
  14. }
  15. export default function(id, scene, appkey, callback) {
  16. return {
  17. nc: null,
  18. init() {
  19. var self = this
  20. function call() {
  21. self.show()
  22. }
  23. loadJs('//g.alicdn.com/sd/ncpc/nc.js', call)
  24. },
  25. show() {
  26. let nc_token = ['CF_APP_1', (new Date()).getTime(), Math.random()].join(':')
  27. let NC_Opt = {
  28. // 声明滑动验证需要渲染的目标元素ID。
  29. renderTo: id,
  30. // 应用类型标识。它和使用场景标识(scene字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
  31. appkey: appkey,
  32. // 使用场景标识。它和应用类型标识(appkey字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值,请务必正确填写。
  33. scene: scene,
  34. // 滑动验证码的主键,请勿将该字段定义为固定值。确保每个用户每次打开页面时,其token值都是不同的。系统默认的格式为:”您的appkey”+”时间戳”+”随机数”。
  35. token: nc_token,
  36. // 滑动条的宽度。
  37. customWidth: '100%',
  38. // 业务键字段,可为空。为便于线上问题的排查,建议您按照线上问题定位文档中推荐的方法配置该字段值。
  39. trans: {},
  40. // 语言。PC端Web页面场景默认支持18国语言,详细配置方法请参见自定义文案与多语言文档。
  41. language: 'cn',
  42. // 是否启用。一般情况,保持默认值(true)即可。
  43. isEnabled: true,
  44. // 内部网络请求的超时时间。一般情况建议保持默认值(3000ms)。
  45. timeout: 3000,
  46. // 允许服务器超时重复次数,默认5次。超过重复次数后将触发报错。
  47. times: 5,
  48. // 前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识(token)、会话ID(sessionid)、签名串(sig)字段记录下来,随业务请求一同发送至您的服务端调用验签。
  49. callback: function(data) {
  50. data.nc_token = nc_token
  51. callback(data)
  52. }
  53. }
  54. this.nc = new noCaptcha(NC_Opt) // eslint-disable-line
  55. // 用于自定义文案。详细配置方法请参见自定义文案与多语言文档。
  56. this.nc.upLang('cn', {
  57. _startTEXT: '请按住滑块,拖动到最右边',
  58. _yesTEXT: '验证通过',
  59. _error300: '哎呀,出错了,点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次',
  60. _errorNetwork: '网络不给力,请<a href=\"javascript:__nc.reset()\">点击刷新</a>'
  61. })
  62. },
  63. reload() {
  64. this.nc.reload()
  65. }
  66. }
  67. }