PC项目——vue 脚手架中实现阿里云人机滑动验证

你的名字 2022-11-13 10:23 186阅读 0赞

## 转自๑柯帆๑ ##

找半天才找到这个可用的 [vue 脚手架中实现阿里云人机滑动验证][vue]

### 一、报错问题解决 ###

#### 描述：照官网写的引入方式引入vue报错 ***AWSC is not define*** ####

#### 解决：.html文件引入script标签后 ####

<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>

#### 在使用滑块的页面中需要再引入一遍script，大概是在页面内容之前要先加载该功能的资源吧 ####

### 二、记录整个项目流程 ###

#### 1.html文件中script标签引入阿里滑块js资源 ####

#### 2.使用滑块的页面或组件中再次进入script标签 ####

#### 3.组件中构建滑块容器 ####

**(对于一个页面中嵌套多个组件的登录最好滑块数量不超过两个，亲身项目经历，会导致滑块重置等方法失效)**

#### 4.编写滑块初始化方法，我写的是同个路由页面两个滑块切换 ####

单个滑块的方法在[阿里滑块官网介绍入口][Link 1]中可以参考

data () { 
    	ncData: { }, // 用于存放滑动成功后的回调数据
    	box1: null, // 用于接收整个滑动对象window.nc
    	// 每个容器对应一个box属性，所以我在data中定义了两个box属性
    	box2: null
    }

methods: { 
    // 滑块测试
        init (idName, i) {  
        // idName是多个滑块的容器名称，i是data中用来接收整个滑块返回对象的属性
          const myLang = { 
            'cn': { 
              // 加载状态提示。
              'LOADING': '加载中...',
              // 等待滑动状态提示。
              'SLIDE': '请向右滑动验证',
              // 验证通过状态提示。
              'SUCCESS': '验证通过',
              // 验证失败触发拦截状态提示。
              'ERROR': `哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次`,
              // 验证失败触发拦截状态提示。
              'FAIL': `验证失败，请重试，点击<a href="javascript:__nc.reset()">刷新</a>再来一次`
            }
          }
          let _this = this
          // 实例化nc
          AWSC.use('nc', function (state, module) { 
            // 初始化
            window.nc = module.init({ 
              // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
              appkey: 'XXXXXXXXXXX',
              // 使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
              scene: 'XXXX',
              renderTo: idName, // idName就是要渲染滑动的容器id名，即上面的nc1/nc2
              upLang: myLang,
              success: function (data) { 
                _this.ncData = { 
                // 将登陆所需要的所有数据存放data中
                  sessionId: data.sessionId,
                  sig: data.sig,
                  token: data.token,
                  scene: 'XXXX'
                }
                _this.$message.success('成功，请继续操作')
              },
              // 滑动验证失败时触发该回调参数。
              fail: function (failCode) { 
                _this.$message.warning('失败，请点击重试')
              },
              // 验证码加载出现异常时触发该回调参数。
              error: function (errorCode) { 
                window.console && console.log(errorCode)
              }
            })
            // 给this.box1/this.box2分别赋值
            _this[i] = window.nc
          })
        }
      }

#### 5.mounted中进行初始化调用 ####

mounted () { 
    	this.init('nc1', 'box1')
    	this.init('nc2', 'box2')
    }

#### 6.登录失败或者切换登录时需要重新渲染重置滑块，官网提供了方法 ####

**window.nc\[方法名\] 或 window.nc.方法名**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bGlldF94bWo_size_16_color_FFFFFF_t_70]  
之前在data中定义了box1/box2，初始化方法中分别对其赋值了，赋值的内容就是该对象，所以重新渲染时使用方法如下

this.box1.reset()
    this.box2.reset()
    // 记得重置时把滑动成功获得的数据清空
    this.ncData = { }

#### 7.结束了 ####

[vue]: https://blog.csdn.net/qq_41299955/article/details/106027650?spm=1001.2014.3001.5502
[Link 1]: https://help.aliyun.com/document_detail/193141.html?spm=a2c4g.11186623.6.554.45b12f6cRSG9RZ
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bGlldF94bWo_size_16_color_FFFFFF_t_70]: /images/20221022/688a36103eca44de8de253295efb4bea.png