使用阿里云滑块验证

喜欢ヅ旅行 2022-12-29 00:18 415阅读 0赞

## 注意：id不能随便自定义。我试过换成其他自定义id，是不行的。 ##

## 1、基础使用（html中使用）： ##

<div id="nc" style="margin-top: 30px"></div>
    
    <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
    <script>
      AWSC.use("nc", function (state, module) { 
        // 初始化
        window.nc = module.init({ 
          // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
          appkey: "CF_APP_1",
          //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
          scene: "register",
          // 声明滑动验证需要渲染的目标ID。
          renderTo: "nc",
          //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
          success: function (data) { 
            console.log(data)
            // window.console && console.log(data.sessionId)
            // window.console && console.log(data.sig)
            // window.console && console.log(data.token)
            $getCodeBtn.removeClass('disabled')
          },
          // 滑动验证失败时触发该回调参数。
          fail: function (failCode) { 
            window.console && console.log(failCode)
          },
          // 验证码加载出现异常时触发该回调参数。
          error: function (errorCode) { 
            window.console && console.log(errorCode)
          }
        });
      })
    </script>

## 2、重置(vue项目中)： ##

AWSC.use("nc", (state, module) => { 
        // 初始化
        window.nc = module.init({ 
        ...
        });
        this.windowNc = window.nc  //先把滑块对象保存到一个变量中
      })
    
    
    this.windowNc.reset() //在需要重置的地方调用reset方法即可