vue 登录模块滑动验证
借助阿里云云盾开发
首先登陆账号开通验证码服务
https://yundun.console.aliyun.com/?spm=5176.2020520162.categories-n-products.dafs.d7955fb0c2YTxQ&p=afs#/no-service
开通过的直接去控制台:阿里云控制台
首先新增配置
填写配置后点击下一步
创建好以后会进入代码集成页面,把代码引入到项目中
将js资源引入public文件夹下的index.html文件中
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
滑动块放入需要渲染的位置
<div id="your-dom-id" class="nc-container"></div>
放入下方的js代码(建议放在onMounted)
<script type="text/javascript">
var nc_token = ["根据自己生成的appkey进行修改", (new Date()).getTime(), Math.random()].join(':');
var NC_Opt =
{
renderTo: "#your-dom-id",//注意渲染的id
appkey: "根据自己生成的appkey进行修改(和上面一样)",
scene: "nc_login",
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>