使用阿里云滑块验证

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

官网地址: https://help.aliyun.com/document_detail/193144.html

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方法即可

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值