在vue 脚手架中实现阿里PC端人机验证前端

最新推荐文章于 2024-06-02 21:27:33 发布

๑柯帆๑

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量1.6k

点赞数 2

分类专栏：阿里云人机滑动验证+vuecli 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_41299955/article/details/106027650

版权

阿里云人机滑动验证+vuecli 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在vue 脚手架中实现阿里云PC网页的人机滑动验证

这里附上官方文档阿里pc网页滑动验证代码集成

在public/index里添加

<head>
     <!-- 国内使用 -->
    <script type="text/JAVAscript" charset="utf-8" src="https://g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
    <!-- 若您的主要用户来源于海外，请替换使用下面的js资源 -->
    <!-- <script type="text/JavaScript" charset="utf-8" src="//aeis.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script> -->
</head>

2.页面使用
html代码

       <div id="slide" class="nc-container"></div>//slide为id可自定义
       <div class="container">
          <form action="http://192.168.0.100/api/Verification_code" method="post">//后台地址
              <input type="hidden" id="nc_token" name="token"/>//token
              <input type="hidden" id="csessionid" name="session_id"/>//sesson_id
              <input type="hidden" id="scene" name="scene" />//客户端场景
              <input type="hidden" id="sig" name="sig" />//签名
              <!-- <div class="ln">
               <input type="submit" value="提交" />
                </div> -->
           </form>
       </div>

在script标签前新加一个script标签

<script type="text/javascript"></script>//这里不加会报noCaptcha没有声明等错误

mounted

 mounted() {
    this.init();
  },

methods

 init() {
      var nc_token = [
        "FFFFXXXXXXXXXXXXXX",//appkey(自己填写)
        new Date().getTime(),
        Math.random()
      ].join(":");
      var NC_Opt = {
        renderTo: "#slide",
        appkey: "FFXXXXXXXXXXXXXXXXX", //appkey(自己填写)
        scene: "register", //场景值(当前pc网页端)
        token: nc_token,
        customWidth: 300,
        trans: { key1: "code0" },
        elementID: ["usernameID"],
        is_Opt: 0,
        language: "cn",
        isEnabled: true,
        timeout: 3000,
        times: 5,
        apimap: {},
        callback: function(data) {
          //组装数据到后台
          document.getElementById("nc_token").value = nc_token;
          document.getElementById("csessionid").value = data.csessionid;
          document.getElementById("sig").value = data.sig;
          //在这里可以拿到返回的数据
          // console.log("nc_token", nc_token);
          // console.log("csessionid", data.csessionid);
          // console.log("data.sig", data.sig);
          // 调取接口把数据返回给后端
          Verification({
            token: nc_token, //token
            session_id: data.csessionid, //客户端session
            sig: data.sig, //签名
            scene: "register" //客户端场景
          })
            .then(res => {
              console.log("验证返回", res);
            })
            .catch(err => {
              console.log(err);
            });
        }
      };
      var nc = new noCaptcha(NC_Opt);
      nc.upLang("cn", {
        _startTEXT: "请按住滑块，拖动到最右边",
        _yesTEXT: "验证通过",
        _error300:
          '哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次',
        _errorNetwork:
          '网络不给力，请<a href="javascript:__nc.reset()">点击刷新</a>'
      });

      var self = this;
      this.nc_token = [this.appKey, new Date().getTime(), Math.random()].join(
        ":"
      );
    },

如果想自定义样式可以查看文档或者自行右键检查元素获取类名使用v-deep穿透修改样式即可

๑柯帆๑

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在vue 脚手架中实现阿里PC端人机验证前端

在vue 脚手架中实现阿里云PC网页的人机滑动验证这里附上官方文档阿里pc网页滑动验证代码集成在public/index里添加<head>  <script type="text/JAVAscript" charset="utf-8" src="https://g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script> <!-- 若您的主要用户来
复制链接

扫一扫