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",//注意渲染的idappkey: "根据自己生成的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>

vue 登录模块滑动验证相关推荐

Vue实现图片滑动验证
Vue实现图片滑动验证使用vue完成使用vue完成实习一个星期小白对工作安排的图片滑动验证分享 1.安装依赖附上:https://www.npmjs.com/package/vue-monop ...
vue实现图片滑动验证功能——功能实现
图片滑动验证,是目前比较常见的验证方式,主要目的是防止用户利用机器人自动注册.登录.灌水. 目前vue技术日趋成熟,已经有专门针对图片滑动验证功能的插件了.具体使用方式如下: 1.安装插件--npm ...
python登录京东滑动验证_Python 实现自动登录+点击+滑动验证功能
需要用到的库有selenium,还需要安装Chrome浏览器驱动,具体如何安装我就不详述了在这里我模拟了csdn的登录过程 ** 1**.首先打开网页,用户名+密码登录,然后定位用户名输入框,和密码 ...
Vue实现图形滑动验证
最近在项目中使用到图形验证来避免用户过多的重复操作,此功能没有使用到后端,单纯的前端实现,由于自己写的话时间来不及,所以这里用到了vue的组件库 vue-monoplasty-slide-verify ...
滑动验证+短信验证码接入=复制粘贴（Java）
PC版滑动验证的实现简介滑动验证是基于人机识别技术开发的智能验证码产品.用户通过简单的右滑交互,无需思考即可通过验证. 资源引入说明使用PC版滑动验证码,需要引入以下js资源,为保证服务功能最优 ...
html 滑动拼图验证,vue登录滑动拼图验证
vue登录滑动拼图验证 vue登录滑动拼图验证一.安装插件: npm install --save vue-monoplasty-slide-verify 二.main.js引入: import S ...
vue 后台登录滑动验证
1.引入vue-monoplasty-slide-verify组件到项目里先使用命令行安装:npm install --save vue-monoplasty-slide-verify 2.在mai ...
PC项目——vue 脚手架中实现阿里云人机滑动验证
转自๑柯帆๑ 找半天才找到这个可用的 vue 脚手架中实现阿里云人机滑动验证一.报错问题解决描述:照官网写的引入方式引入vue报错 AWSC is not define 解决:.html文件引入s ...
【原创】基于vue。简单、优雅的评论插件（包含颜文字表情、滑动验证）。
主要功能支持颜文字emoji表情(╮(￣▽￣)╭) 支持滑动验证. 评论为空不允许提交. 封装了几个常用的方法. 在线浏览 1.用户已登录 2.用户未登录使用方法 <template> ...

vue 登录模块滑动验证

vue 登录模块滑动验证

vue 登录模块滑动验证相关推荐

最新文章

热门文章