码迷,mamicode.com
首页 > 其他好文 > 详细

vue 阿里云的滑动验证

时间:2020-06-17 11:12:53      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:边框   记录   div   方法   radius   png   spm   console   sig   

网址:https://help.aliyun.com/document_detail/121898.html?spm=a2c4g.11186623.6.559.c58f2430eBmuaf

可直接使用

<template>
  <div>
    <div id="__nc" style="margin-left:auto;margin-right:auto;width:80%;height:100px;padding-top:100px;">
        <div id="nc"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: index,
    data() {
      return {
        nc: null
      };
    },
    mounted() {
      let that = this;
      var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(:);
      let nc = NoCaptcha.init({
        renderTo: #nc,
        // appkey: this.appkey,//这个参数需要后台返回 应用类型标识
        // scene: this.scene,//    使用场景标识
        // token: this.token,//滑动验证码的主键
        appkey: CF_APP_1,
        scene: register,
        token: nc_token,
        trans: {"key1": "code200"},
        elementID: ["usernameID"], //通过Dom的ID属性自动填写trans业务键,可为空。为便于线上问题的排查
        is_Opt: 0, //是否自定义配置底层采集组件。如无特殊场景 使用默认值(0),即不自定义配置底层采集组件
        language: "cn",
        timeout: 10000, 
        retryTimes: 5,
        errorTimes: 5,
        inline: false,
        apimap: { //    用于自定义滑动验证各项请求的接口地址。一般情况,请勿配置该参数。
          // ‘analyze‘: ‘//a.com/nocaptcha/analyze.jsonp‘,
          // ‘uab_Url‘: ‘//aeu.alicdn.com/js/uac/909.js‘,
        },
        bannerHidden: false,  //验证通过之后默认隐藏。默认值为false
        initHidden: false, //是否默认不渲染。默认值为false。当设置为true时,不自动渲染,需要自行调用show方法进行渲染。
        callback: function (data) {
         /*  前端滑动验证通过时会触发该回调参数。
          您可以在该回调参数中将请求标识(token)、会话ID(sessionid)、签名串(sig)字段记录下来,
          随业务请求一同发送至您的服务端调用验签。 */
          console.log(data,this,***********************);
          console.log(data.sig,data.csessionid,nc_token,***********参数************);
          // that.verify_token = this.token;
          // that.sessionid = data.csessionid;
          // that.sig = data.sig;
          window.console && console.log(nc_token)
          window.console && console.log(data.csessionid)
          window.console && console.log(data.sig)
          // var params = {
          //   sign: data.sig,
          //   sessionId: data.csessionid,
          //   token: nc_token,
          //   scene: scene
          // };
          // axios.post("/test/test1", params).then(response => {
          //   console.log(response);
          // });
        },
        error: function (s) {
          console.log(s,********失败***************)
        }
      });
      NoCaptcha.setEnabled(true);
      nc.reset();//请务必确保这里调用一次reset()方法
      NoCaptcha.upLang(cn, {
        LOADING: "加载中...",//加载
        SLIDER_LABEL: "请向右滑动验证",//等待滑动
        CHECK_Y: "验证通过",//通过
        ERROR_TITLE: "非常抱歉,这出错了哟...",//拦截
        CHECK_N: "验证未通过", //准备唤醒二次验证
        OVERLAY_INFORM: "经检测你当前操作环境存在风险,请输入验证码",//二次验证
        TIPS_TITLE: "验证码错误,请重新输入"//验证码输错时的提示
      });
      this.nc = nc;
    }
  };
</script>
<style lang="scss">
/* 滑动条高度、边框、背景色等 */
._nc .stage1 .slider {
    height: 52px;
    border-radius: 26px;
    box-shadow: 0 0 3px #999;
    background-color: #ddd;
}
/* 滑动条 */
._nc .stage1 .track div {
    border-radius: 26px;
    color: #fff;
}
/* 滑动条背景色-正常 */
._nc .stage1 .bg-green {
    background-color: #78c430;
}
/* 滑动条背景色-失败 */
._nc .stage1 .bg-red {
    background-color: #ff5500;
}
._nc .stage1 .button {
  border-radius: 50%;
}
/* 各个状态的icon */
// 等待滑动:"icon iconfont icon-slide-arrow"
// 验证出错:"icon no iconfont icon-close"
// 验证通过:"icon yes iconfont icon-ok"

// 拦截状态
._nc .stage3 .title {
    font-size: 20px;  
    color: #777;
    width: 100%;
}
/* 图标 */
// ._nc .icon {
//     width: 32px;
//     height: 32px;
//     background-image: url("//g.alicdn.com/sd/nch5/icons.png?v=2");
// }
// ._nc .stage3 .menu.refresh .icon {
//     background-position: -128px 0;
// }
// ._nc .stage3 .menu.feedback .icon {
//     background-position: -160px 0;
// }
// /* 刷新链接 */
// ._nc .stage3 .menu.refresh {
//     border-right: 2px solid #ccc;
// }
</style>

 

vue 阿里云的滑动验证

标签:边框   记录   div   方法   radius   png   spm   console   sig   

原文地址:https://www.cnblogs.com/toughy/p/13150922.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!