这篇文章主要讲解了vue在项目中调用腾讯云的滑动验证码的详细教程,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
在项目中使用滑动验证,可以调用腾讯云的组件和接口(付费项目)
步骤
1、新建项目对应 appid
在 验证码控制台 中注册 AppID 和 AppSecret。
其中的“所在网址”可以填本地开发IP地址,例如 “192.168.20.28”
注意,自己测试的话,需要先领取免费包。即在 APPID 列表里新建验证成功后,选择列表 table 上面的 “领取免费包”,领取2万次调用次数
2、在 index.html 中引入验证 js 文件
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
3、在按钮中绑定点击事件,实例化 TencentCaptcha ,制定回调函数
// vue 例子 // 点击按钮,出现拼图弹窗 <el @click="varify" > 验证</el - button > methods: { varify() { let appid = 'xxxxx'; // 腾讯云控制台中对应这个项目的 appid //生成一个滑块验证码对象 let captcha = new TencentCaptcha(appid, function (res) { // 用户滑动结束或者关闭弹窗,腾讯返回的内容 console.log(res) if (res.ret === 0) { //成功,传递数据给后台进行验证 axios.post('接口路径', { Ticket: res.ticket, CaptchaAppId: res.appid, Randstr: res.randstr, // 其他参数 }) .then( // 后台验证通过,返回用户信息 // 前端接收并登陆系统 ) .catch( // 验证失败 ) } else { // 提示用户完成验证 } }); // 滑块显示 captcha.show(); } }
其中,腾讯返回的数据格式是这样的:
appid: "xxxx" bizState: "xxx" randstr: "@0N2" ret: 0 // 2 代表用户关闭验证弹窗 ticket: "xxxxx"
4、在线调试
后台未接入腾讯云验证接口,也可以通过腾讯云提供的在线调试工具,测试验证结果
步骤:
看完上述内容,是不是对vue在项目中调用腾讯云的滑动验证码的详细教程有进一步的了解,如果还想学习更多内容,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。