vue项目中引入阿里云滑动验证_initaliyuncaptcha-优快云博客

本文详细介绍了如何在Vue项目中集成阿里云的滑动验证功能，包括在index.html中引入必要的JS文件，以及在组件中实现验证逻辑的具体步骤。通过实际代码示例，展示了如何初始化验证、设置参数及回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注册阿里云账号
参照滑动验证demo
滑动验证在vue中使用步骤
1、在vue-cli安装的项目中，index.html页面引入js

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>防伪码验证</title>
  </head>
  <body>
    <div id="app">
    </div>
  </body>
    <!-- 国内使用 -->
        <script type="text/javascript" charset="utf-8" src="//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> -->
</html>

2、组件中引用
在这里插入图片描述

<script>
export default {
        name: "组件名",
        mounted(){
          this.init();
        },
        methods:{
        	init(){
        	//里边放阿里云滑动验证js代码
        	var nc_token = ["xxxxxxxxxxxxxxxxxxxxxx", (new Date()).getTime(), Math.random()].join(':');
	       var NC_Opt = 
	        {
	            renderTo: "#captcha",
	            appkey: "xxxxxxxxxxxxxxxxxxxxxx",
	            scene: "nc_other",
	            token: nc_token,
	            customWidth: 300,
	            trans:{"key1":"code0"},
	            elementID: ["usernameID"],
	            is_Opt: 0,
	            language: "cn",
	            isEnabled: true,
	            timeout: 3000,
	            times:5,
	            apimap: {
	                // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
	                // 'get_captcha': '//b.com/get_captcha/ver3',
	                // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
	                // 'get_img': '//c.com/get_img',
	                // 'checkcode': '//d.com/captcha/checkcode.jsonp',
	                // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
	                // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
	                // 'umid_serUrl': 'https://g.com/service/um.json'
	            },   
	            callback: function (data) { 
	                window.console && console.log(nc_token)
	                window.console && console.log(data.csessionid)
	                window.console && console.log(data.sig)
	            }
	        }
	        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>",
	        })
	   }
        }
      }
</script>